こんな方にオススメ
- Contact Form7利用
- カスタマイズ初心者
- お問い合わせフォームは初期設定のまま
- どこを触ればカスタマイズできるのか知りたい
こんにちは。運営者のあおいろ ( @ao_bloger ) です。
お問い合わせフォームのカスタマイズ入門編です。
だれでもできる簡単なカスタマイズで、カスタマイズの基本的な知識をつけることができます。
今回は当ブログのお問い合わせフォームを参考に、ちょっとだけカスタマイズして、ちょっとだけこだわりを見せる方法をご紹介します。メリットと合わせてご覧下さい。
Contact Form７カスタマイズ前と後【比較画像あり】
今回はお問い合わせフォームを下の画像のようにカスタマイズしていきます。
ご覧のとおり、ちょっと見た目が変わってますね。
【 変更内容 】
- 「ここはぜったい入力してね 」とわかりやすくするためにアスタリスク印 ( ＊ )を挿入
- " メッセージ本文(任意) " を " お問い合わせ内容 " に変更
- 送信前のチェックボックスを挿入
補足①：入力必須項目について
- 「氏名」「メールアドレス」「題名」は初期設定の段階で入力必須項目になっています。 ( メッセージは任意項目/ 2021.5 現在 )
- この初期設定を下記のように変更
①題名→必須から任意項目に
②メッセージ本文→任意から必須項目に
③お問い合わせ相手が見たとき、必須項目がわかりやすいように、氏名等の横に ＊ 印を挿入
補足②：チェックボックスについて
- Contact Form7は、送信前の確認画面がでてきません。お問い合わせ相手が入力途中でうっかり送信ボタンを押してしまうミスを防ぐ対策。
- チェックを入れないと送信できないので、スパム対策にもなります。
Contact Form7 カスタマイズ手順
画像付きでお問い合わせフォームのカスタマイズ手順を解説していきます。
ワードプレスの管理画面から下記の手順ですすめて下さい。
【お問い合わせ】→【コンタクトフォーム】→【編集】→【フォーム 】→【テンプレートを編集後、保存】
１．管理画面からお問い合わせ→コンタクトフォームの順にクリック
２．編集をクリック
３．フォームタブをクリック
４ー１．フォームタブ内のテンプレートを編集
編集前：初期設定
編集後
- 【 赤枠 】
「氏名」「メールアドレス」「お問い合わせ内容」の横に、
<span style="color;red;">*</span> を入力
※このコードを入れると「 氏名* 」という表示になります。
- 【 黄色枠 】
①初期設定では「 text* 」になっています。text の横のアスタリスク ( ＊ ) を削除 ( ←これで入力必須項目ではなく、任意項目になります )
②初期設定では「 textarea 」になっています。textarea の横にアスタリスク ( ＊ ) を入力 ( ←これで任意項目ではなく、入力必須項目になります )
アスタリスクは、キーボードが日本語配列の場合は「け」、英語配列の場合は「８」のところにあるはずです。
- 【 緑枠 】
「 メッセージ本文 (任意) 」という文言を「 お問い合わせ内容 」に変更
青枠は送信前のチェックボックスのコードになります。こちらは下記の方法で追加できます。
４－２．フォームタブ内のチェックボックスをクリック
４－３．項目タイプにチェックをいれ、オプションに表示させたい内容を記入。タグを挿入をクリック。
４－４．最初、テンプレート内の上に挿入されてしまうので ( 当サイトの場合 )、切り取って [submit "送信"] の上に貼りなおす
タグコードを切り取り
[ submit "送信"] の上に貼り付け
５．保存をクリック
これで、お問い合わせフォームのカスタマイズはおわりです。
この手順を応用すれば、好きな文言を足したり、お問い合わせフォームに電話番号や日付の入力画面を入れることもできます。
まとめ：Contact Form7のカスタマイズの利点
今回のカスタマイズの利点
- 自分がほしい情報を入力必須項目にする → 必要な情報を確実に入力してもらえる ( 未入力は送信できない )
- 必須項目にアスタリスク(＊)挿入 → どれが必須項目かわかりやすくする
- チェックボックス挿入 → うっかり送信防止＆スパム対策
以上、お問い合わせ相手と自分に少し配慮したカスタマイズになりました。
筆者と同じように、ちょっとこだわりたい方に、今回の記事が参考なれば幸いです。
 です。 お問い合わせフォームのカスタマイズ入門編です。 だれでもできる簡単なカスタマイズで、カスタマイズの基本的な知識をつけることができます){kind=link}