マニュアル

メールアドレスの入力項目を二つ用意しどちらも同じであることを確認してから送信するフォームの作成方法

メールアドレスの入力ミスなどを防ぐために、メールアドレスの入力項目を二つ用意し、両方が同一であることを確認してから送信する、というフォームは以下の手順で作成が可能です。

フォームを用意する

  1. フォームの「項目変更」タブを開く
  2. 「フォームの項目変更」画面で「メールアドレス」の項目を二回追加する
  3. 片方の鉛筆マークをクリックし「項目名」を「メールアドレス(確認)」に変更して [完了] ボタンをクリックする
  4. 項目名「メールアドレス」「メールアドレス(確認)」の項目ができたら [保存] ボタンをクリックする
  5. 必要なソースコードをフォームを公開したいページに貼り付ける

二つのメールアドレスが同一であることをチェックする JavaScript を設定する

  1. テンプレート等を利用し以下のソースコードを含む JavaScript ファイルを作成する
  2. window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
    function MTNetForm() { MTNetFormDataLayer.push(arguments); }
    MTNetForm("validator", {
      validator: function(values) {
        var email, confirm, confirmId;
        values.forEach(function(v) {
          if (v.label === "メールアドレス") {
            email = v.value;
          } else if (v.label === "メールアドレス(確認)") {
            confirm = v.value;
            confirmId = v.id;
          }
        });
    
        if (email && confirm && email !== confirm) {
          return {
            id: confirmId,
            message: "「メールアドレス(確認)」が一致していません。",
          };
        }
      },
    });
  3. フォームを設置したページ内に以下のタグで読み込む
  4. <script src="https://***.movabletype.io/***.js(作成した JavaScript ファイルの URL)"
     defer async></script>

上記の設定を行うと、送信ボタンをクリックした際、メールアドレスが同一かどうかのチェックを行い、同一でない場合は「「メールアドレス(確認)」が一致していません。」というメッセージが表示されるようになります。
ぜひご活用ください。