Skip to content
espar form espar form espar form DOCS

基本のフォーム

espar form で実現できる一連の機能を実装したフォームのHTMLを紹介します。

HTMLコード

<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <title>espar-form サンプルフォーム</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
  <script src="https://bridge.espar.biz/v1/form.js"></script>
  <script>
      var espar_form = {
          espf: {
              debug: true,
              api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
              delimiter_lang: "<br>",
              delimiter_inquiry_type: " | ",
              input_ready_callback: function()    { console.log("input");   },
              confirm_ready_callback: function()  { console.log("confirm"); },
              submit_success_callback: function() { console.log("success"); },
              submit_failure_callback: function() { console.log("failure"); },
              validation_failure_callback: function() {
                  $.each(espar_form.espf.validation_errors, function(i, e) {
                      console.log(e);
                  });
              },
          },
          config_test: false
      };


  </script>
</head>
<body>


<h2>サンプルフォーム</h2>


<!-- JavaScriptが無効なブラウザに対する表示(JavaScriptが使えるブラウザでは表示されません) -->
<noscript>本ページではjavascriptを使用しています。<br>本メッセージが表示される場合は、恐れ入りますがjavascriptを有効にしてお問い合わせ下さい</noscript>


<!-- 入力画面でのみ表示をしたいメッセージ -->
<p class="espf-m-input">お問い合せ事項は以下のフォームから御連絡下さい。担当の者が24時間以内にご連絡差し上げます。</p>
<!-- 確認画面だけに表示をしたいメッセージ -->
<p class="espf-m-confirm">内容に問題がないかどうか確認し、送信ボタンを押して下さい。</p>


<!-- 最低限のシステムエラー表示要素(通常は表示されません) -->
<p class="form-failure espf-m-token-expire">フォームの有効期限が切れました。もう一度最初からお試し下さい</p>
<p class="form-failure espf-m-mail-error espf-m-token-error">未定義のエラーが発生しました。申し訳ございませんが info [at] example.com に直接メールをお送り頂くか、0120-12-3456 までお電話下さい</p>


<!-- その他のシステムエラー表示要素 -->
<p class="form-failure espf-m-token-invalid">APIキーまたはフォームIDが無効です</p>
<p class="form-failure espf-m-token-forbidden">アクセスが許可されていないホストです</p>
<p class="form-failure espf-m-rate-limit">一定時間あたりに許可されているメール送信数を超えました。しばらく経ってからお試しください</p>
<p class="form-failure espf-m-unknown-error">未定義のエラーが発生しました。サイト管理者にご連絡ください</p>


<!-- メール送信の成功/失敗時の表示要素(メール送信処理後に自動的に表示されます) -->
<h3 class="form-success espf-m-success">お問い合わせありがとうございました</h3>
<h3 class="form-failure espf-m-failure">送信に失敗しました。誠に申し訳ございませんが info [at] example.com にメールにて御連絡下さい</h3>


<!-- 入力チェックでエラーが一つでもある場合に表示されます -->
<h3 class="espf-e" style="color:red">無効な入力項目があります</h3>


<form class="espf" method="POST">
  <table cellpadding="5" cellspacing="0" border="1">
    <tbody>
    <tr>
      <td class="key"><label for="company">会社名</label></td>
      <td class="value"><input type="text" name="company" value="" id="company" class="espf-maxlength-20">
        <div class="espf-e-company" style="color:red">
          <span class="form-input-error espf-e-company-maxlength">会社名が長すぎます。</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="key"><label for="name">お名前</label></td>
      <td class="value"><input type="text" name="name" value="" id="name" class="espf-required">
        <div class="espf-e-name" style="color:red">
          <span class="espf-e-name-required">お名前を入力してください。</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="key"><label for="mail">メールアドレス</label></td>
      <td class="value"><input type="text" name="mail" value="" id="mail" class="espf-required espf-email espf-emailDomain">
        <div class="espf-e-mail" style="color:red">
          <span class="form-input-error espf-e-mail-required">メールアドレスを入力してください。</span>
          <span class="espf-e-mail-email">メールアドレスの形式が不正です。</span>
          <span class="espf-e-mail-emailDomain">メールアドレスのドメインが誤っている可能性があります。</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="key"><label for="url">ウェブサイト</label></td>
      <td class="value"><input type="text" name="url" value="" id="url" class="espf-url">
        <div class="espf-e-url" style="color:red">
          <span class="espf-e-url-url">URLの形式が不正です。</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="key"><label for="tel">電話番号</label></td>
      <td class="value"><input type="text" name="tel" value="" id="tel" class="espf-tel">
        <div class="espf-e-tel" style="color:red">
          <span class="espf-e-tel-tel">電話番号の形式が不正です。</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="key"><label for="zip">郵便番号</label></td>
      <td class="value"><input type="text" name="zip" value="" id="zip" class="espf-zip">
        <div class="espf-e-zip" style="color:red">
          <span class="espf-e-zip-zip">郵便番号の形式が不正です。</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="key"><label for="alpha">アルファベット</label></td>
      <td class="value"><input type="text" name="alpha" value="" id="alpha" class="espf-alpha">
        <div class="espf-e-alpha" style="color:red">
          <span class="espf-e-alpha-alpha">アルファベットのみで入力してください。</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="key"><label for="alphanumeric">英数字</label></td>
      <td class="value"><input type="text" name="alphanumeric" value="" id="alphanumeric" class="espf-alphanumeric">
        <div class="espf-e-alphanumeric" style="color:red">
          <span class="espf-e-alphanumeric-alphanumeric">英数字のみで入力してください。</span>
        </div>
      </td>
    </tr>


    <tr>
      <td class="key"><label for="location">セレクトボックス</label></td>
      <td class="value">
        <input type="url" name="location" list="urls" id="location" class="espf-required">
        <datalist id="urls">
          <option label="MIME: Format of Internet Message Bodies" value="http://tools.ietf.org/html/rfc2045"></option>
          <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/"></option>
          <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint"></option>
          <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/"></option>
          <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html"></option>
          <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/"></option>
          ※safariは未対応
        </datalist>
        <div class="espf-e-location" style="color:red">
          <span class="espf-e-location-required">選択してください。</span>
        </div>
      </td>
    </tr>


    <tr>
      <td class="key">性別</td>
      <td class="value">
        <input type="radio" name="sex" value="Male" id="sex-male"><label for="sex-male">男</label>
        <input type="radio" name="sex" value="Female" id="sex-female" class="espf-required"><label for="sex-female">女</label>
        <div class="espf-e-sex" style="color:red">
          <span class="espf-e-sex-required">選択してください。</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="key">言語</td>
      <td class="value">
        <input type="checkbox" name="lang" value="Japanese" id="lang-ja"><label for="lang-ja">日本語</label>
        <input type="checkbox" name="lang" value="English" id="lang-en" class="espf-maxlength-20"><label for="lang-en">英語</label>
        <input type="checkbox" name="lang" value="Chinese" id="lang-zh" class="espf-required"><label for="lang-zh">中国語</label>
        <div class="espf-e-inquiry_type" style="color:red">
          <span class="espf-e-lang-required">言語を入力してください。</span>
          <span class="espf-e-lang-maxlength">言語が長い</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="key"><label for="inquiry_type"><span>問い合わせ種別</span></label></td>
      <td class="value">
        <select name="inquiry_type" id="inquiry_type" class="espf-required" multiple>
          <option value="esparについて">esparについて</option>
          <option value="取材/掲載御依頼">取材/掲載の御依頼</option>
          <option value="その他のお問い合せ">その他のお問い合せ</option>
        </select>
        <div class="espf-e-inquiry_type" style="color:red">
          <span class="espf-e-inquiry_type-required">問い合わせ種別を入力してください。</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="key lastrow"><label for="content"><span>内容</span></label></td>
      <td class="value lastrow">
        <textarea cols="30" rows="8" name="content" id="content" class="espf-required"></textarea>
        <div class="espf-e-content" style="color:red">
          <span class="espf-e-content-required">問い合わせ内容を入力してください。</span>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
  <br>
  <button value="戻る" class="espf-b-back">もどる</button>
  <button type="button" value="確認" class="espf-b-confirm">かくにん</button>
  <button type="button" value="送信" class="espf-b-submit">そうしん</button>
</form>
</body>
</html>

サンプルHTMLコードのダウンロード

動作イメージ

サンプルのフォームを動作させると下図のようになります。

example_1-2-0

入力要素一覧

サンプルのフォームで使用している入力要素です。

ラベル名入力要素名入力タイプ
会社名companytext
お名前nametext
メールアドレスmailtext
ウェブサイトurltext
電話番号teltext
郵便番号ziptext
アルファベットalphatext
英数字alphanumerictext
セレクトボックスlocationurl (datalist)
性別sexradio
言語langcheckbox
問い合わせ種別inquiry_typeselect (multiple)
内容contenttextarea

バリデーションとエラー

サンプルフォームで使用しているバリデーションとエラークラスの一覧です。

ラベル名入力要素名バリデーションエラークラス
会社名companymaxlength-20espf-e-company-maxlength
お名前namerequiredespf-e-name-required
メールアドレスmailrequired
email
emailDomain		espf-e-mail-required
espf-e-mail-email
espf-e-mail-emailDomain
ウェブサイトurlurlespf-e-url-url
電話番号teltelespf-e-tel-tel
郵便番号zipzipespf-e-zip-zip
アルファベットalphaalphaespf-e-alpha-alpha
英数字alphanumericalphanumericespf-e-alphanumeric-alphanumeric
セレクトボックスlocationrequiredespf-e-location-required
性別sexrequiredespf-e-sex-required
言語langrequired
maxlength-20		espf-e-lang-required
espf-e-lang-maxlength
問い合わせ種別inquiry_typerequiredespf-e-inquiry_type-required
内容contentrequiredespf-e-content-required

動作確認方法

サンプルのフォームを動作確認するには、以下手順に従って下さい

  1. サンプルフォームのHTMLをダウンロードする
  2. APIキーを適切なものに置き換える (管理画面でAPIキーを確認する必要があります)
  3. Webサーバにアップロードする
  4. (メールを飛ばす場合は)メールテンプレートを設定する
  5. ブラウザで表示して入力する

バリデーションとエラー表示の確認までで良い場合、4は不要です。

メールを飛ばして確認したい場合、管理画面からメールテンプレートを編集して下さい。通知メールと返信メールのメール本文が、入力要素一覧にある項目のみを使用した本文となるよう編集する必要があります。