Contact Form 7でメールアドレス入力欄の内容をダブルチェックする確認機能を設定しよう

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日はお問い合わせフォームを導入する有名プラグイン「Contact Form 7」のカスタマイズ。以前に入力内容の確認画面を実装するカスタム手順について解説させていただきました。以下に貼っておきますね。

WordPressにワンタッチでお問い合わせフォームを導入できるContact Form 7に確認画面を導入する方法

本日は入力内容の確認画面ではなく「メールアドレスのダブルチェック」です。お問い合わせ時に来訪者が入力したメールアドレスに不備・間違いがないかを事前確認するためのカスタマイズとなります。

Contact Form 7でメールアドレス入力欄の内容をダブルチェックする確認機能を設定しよう

実装にはプラグイン「Contact Form 7 Mail Address Check」が必要となりますので最下部から無料プラグインをダウンロードして有効化しておきましょう。管理画面からZIPファイルをアップください。

設定はフォーム内にタグを追加するだけでOK

以下は標準のフォームです。

確認用のタグを設置した記述例

以下が追加した例です。メールアドレス確認用というフォームを追加しています。

使用するタグは以下です。コピペ用として残しておきます。

your-email-confirm

フォームの動作をチェックする

以下が差し込んだフォームです。

メールアドレスの入力が一致しない状態ではエラーメッセージが表示されます。

入力内容に間違いがなければエラーメッセージは消えます。

設置方法は以上です。

まとめ

本日は「Contact Form 7でメールアドレスの入力内容を確認するチェック機能」をご紹介いたしました。

プラグインは「無料ダウンロード」から手に入れられます。もしエラーメッセージで表示される文言(確認用メールアドレスが一致しません)が管理画面内から変更できるようになれば便利ですよね。

今後のアップデートで対応するかもしれません。まずは一度お試しくださいませ。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

💻手に職をつけて安定的に働きたい人

⇒ 完全無料のプログラミングスクール - 受講料無料でプログラミング習得 -

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください