メールアドレスの入力項目を二つ用意しどちらも同じであることを確認してから送信するフォームの作成と設置方法
メールアドレスの入力ミスなどを防ぐために、メールアドレスの入力項目を二つ用意し、両方が同一であることを確認してから送信する、というフォームの作成と設置は、以下の手順で可能です。
フォームを用意する
「メールアドレスの入力項目を二つ用意しどちらも同じであることを確認してから送信するフォームの作成方法」を参考にフォーム部分を作成します。
二つのメールアドレスが同一であることをチェックする JavaScript テンプレートを作成する
- ウェブサイト、あるいは、フォームを設置したいブログの「デザイン」>「テンプレート」を開く
- 「インデックス・テンプレート」項目の「+新規」リンクをクリックする
- 「名前」に任意の名前を設定する
- 「出力ファイル」に「**.js」というように .js 拡張子のファイル名を設定する
- 以下のソースコードを内容に貼り付ける [公開] ボタンをクリックする
window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() { MTNetFormDataLayer.push(arguments); }
MTNetForm("validator", {
validator: function(values) {
var email, emailId, confirm, confirmId;
values.forEach(function(v) {
if (v.label === "メールアドレス") {
email = v.value;
emailId = v.id;
} else if (v.label === "メールアドレス(確認)") {
confirm = v.value;
confirmId = v.id;
}
});
if (email && confirm && email !== confirm) {
return {
id: [emailId, confirmId],
message: "「メールアドレス(確認)」が一致していません。",
};
}
},
});
作成したフォームと JavaScript ファイルを設置する
- フォームを設置したいページにフォームの「埋め込みコード」と以下タグを貼り付ける
<script src="https://***.movabletype.io/***.js(作成した JavaScript テンプレートの公開 URL)" defer async></script>
上記の設定を行うと、送信ボタンをクリックした際、メールアドレスが同一かどうかのチェックを行い、同一でない場合は「「メールアドレス(確認)」が一致していません。」というメッセージが表示されるようになります。
ぜひご活用ください。