デル株式会社

Contact Form7 (お問い合わせフォーム)のカスタマイズ方法

スマートフォンに届いたメッセージ
Pocket

先日、全国音訳ボランティアネットワーク様から、お問い合わせフォームのカスタマイズを依頼され、Contact Form7 でメールアドレスのエラーチェックなどを追加させていただきました。

このサイトはボランティアの皆様がホームページを制作・運営されていますが、お問い合わせフォームのエラーチェックは確かに難しいですよね。そこで、Contact Form7について調べました。

WordPressでお問い合わせフォームの設置

WordPressのユーザーマニュアルBeta(http://megumi-manuals.com/manual2/custom/plug_in/contact_form7/)というサイトで、「Contact Form7 」の一般的な使い方と、お問い合わせフォームカスタムテンプレート集が公開されていて、とても便利です。

参照元:Contact Form7 -お問い合わせフォーム-
http://megumi-manuals.com/manual2/custom/plug_in/contact_form7/

参考:「WordPressのユーザーマニュアルBeta(http://megumi-manuals.com/)」で公開されているテンプレート

  • ディフォルトのコンタクトフォーム
  • 一般の会社用のフォーム
  • 商品についてのフォーム
  • 資料請求用のフォーム
  • アンケート用のフォーム
  • 予約フォーム
  • メールマガジン用のフォーム
  • 採用情報用のフォーム
  • 説明会用のコンタクトフォームソース

動画、フォームの見た目写真、ソースが公開されていますので、コピー&ペーストするだけで上記のようなお問い合わせフォームを制作できます。大変便利ですね。

メールアドレスの入力確認

なお、全国音訳ボランティアネットワーク様のお問い合わせフォームのメールアドレスが同じかどうかの確認は、簡単なPHPのプログラミングをしました。

私はエンジニアさんのウェブサイトに載っていたカスタマイズのサンプルソースをコピー&ペーストし、以下の手順で行ったらできたました。ただし、プラグインのソースをいじることになるので、消してはいけないところを消したり、書き間違えるなど、ミスをするとプラグインが壊れる可能性があります。

もしそれでも良い方は、http://www.kitaguchi.jp/contact/96.html などのサイトにソースが公開されていますので、コピーして作業されてください。

  1. 左サイドメニュー プラグインをクリック
  2. インストール済みプラグインをクリック
  3. Contact Form7 の名前の下にある「編集」をクリック
  4. テーマのための関数 functions.php」をクリック
  5. ソースが表示されたら、エラーチェックのソースを貼り付け

で、完成しました。

例:メールアドレスの入力確認を追加した画面

「Contact Form7 メールアドレス チェック」で検索していただくと、サンプルのソースと詳細なやり方が書かれたウェブサイトが見つかります。ご活用くださいね。

Author Profile

片岡杏紗(あさ)
国家資格キャリアコンサルタント。JCDA認定CDA(キャリア・デベロップメント・アドバイザー)。元IT系講師。ITmediaオルタナティブ・ブログでは、「教育ICT」に関する記事を連載中。http://blogs.itmedia.co.jp/kataoka/
Pocket

コメント

  • トラックバックは利用できません。
  • コメント (0)
  1. この記事へのコメントはありません。

CAPTCHA


ウェブサイト翻訳ツール

アーカイブ

Zenback

ページ上部へ戻る