ワードプレス(WordPress)のプラグインContact Form 7の設定方法と使い方を詳しく解説します。
- Contact Form 7の使い方と設定方法がわかります
Contact Form 7で実現できること
Contact Form 7を使うと下記のことが実現できます。
- 問い合わせページ(フォーム)が簡単に作成できる
- 自動返信メールの設定ができる
Contact Form 7プラグインを使うとHTMLやCSSの知見がなくても、問い合わせページやフォームが作成できます。
ボタンを押すだけで簡単にドロップダウンメニューやラジオボタンなどを生成できます。
Contact Form 7プラグインの開発者は日本人で、利用者も多いので安心して利用することができます
Contact Form 7のインストール方法
Contact Form 7プラグインをWordpressにインストールする手順を解説します
WordPressにContact Form 7プラグインを追加
WordPressのダッシュボード(管理者画面)のプラグインの新規追加を選択します↑WordPressのダッシュボード(管理者画面)のプラグインの新規追加をクリックします
プラグインを追加画面の検索ボックスに”Contact Form 7″と入力して検索結果を表示させます- 検索ボックスに”Contact Form 7”と入力すると下に検索結果が表示されます
- ”Contact Form 7”の今すぐインストール”ボタンをクリックします
“インストール中”と表示されます
Contact Form 7のインストールが完了すると”有効化”と表示されるのでクリックします↑Contact Form 7のインストールが完了すると有効化ボタンが表示されるのでクリックします。
これでContact Form 7のインストールと有効化が完了しました。
次は設定をしていきます
Contact Form 7の使い方と設定方法
Contact Form 7を設定する方法を解説します。
WordPressダッシュボード(管理画面)のお問い合わせのコンタクトフォーム画面↑Wordpressのダッシュボード(管理者画面)のお問い合わせをクリックします。
ショートコードの列に下記のコードがあるのでコピーします。
contact-form-7 id=”1153″ title=”コンタクトフォーム 1″
↑このコードを新規作成したお問い合わせ用の固定ページに貼り付けます。
id=”〇〇”の数字の部分は環境によって異なります。
※コードを実際に入力するときはカッコ[ ]で括ってください。
お問い合わせ用の固定ページを作成する
お問い合わせ用の固定ページを作成します。
ダッシュボード(管理画面)の固定ページの新規追加を選択します。
ダッシュボード(管理画面)の”固定ページ”の”新規追加”をクリックします
“新規固定ページを追加”画面で本文にコードを、タイトルに”お問い合わせ”と入力し、パーマリンクを変更します- 固定ページ本文に先ほどコピーした contact-form-7 id=”○○” title=”コンタクトフォーム 1″ を入力します
- タイトルに”お問い合わせ”と入力
- パーマンリンクを contact に変更
- 公開ボタンを押します
※コードを実際に入力するときはカッコ[ ]で括ってください。
ブロックエディタの場合でも同様の手順になります。
お問い合わせ用の固定ページを確認
Contact Form 7の設定でカスタマイズする前の問い合わせ画面は下記のようなデザインと項目名になっています。
先ほど作ったお問い合わせ用の固定ページ編集画面内にある変更をプレビューボタンを押します。
お問い合わせ用の固定ページの変更をプレビューを押すContact Form 7の初期設定で自動作成されたお問い合わせ画面
固定ページで作成した問い合わせフォームページを確認すると下記のようなデザインと項目になっています。
Contact Form 7の初期設定で作成した問い合わせ画面のデザイングローバルナビゲーションメニューにお問い合わせを追加
新規に固定ページで作成したお問い合わせフォームをブログサイトのトップ画面もメニューに表示する方法を解説します。
ダッシュボード(管理画面)の外観のメニューを選択します。
ダッシュボード(管理画面)の”外観”の”メニュー”をクリックします
外観のメニューから「お問い合わせ」固定ページを追加します- メニューの編集画面でグローバルナビゲーションメニューを選択します。
もしなければ作成します - “左側のメニュー項目を追加”の”固定ページ”にある「お問い合わせ」のチェックボックスに☑チェックマークを付けます
- 【メニューを追加】ボタンを押します
- 「お問い合わせ」がメニュー構造のグローバルナビゲーションの一番下の行に追加されます
- 【メニューを保存】ボタン押します
グローバルナビゲーションメニューにお問い合わせを追加していますが、任意の別のメニューでも大丈夫です。
PCのサイドメニューやスマホのメニューへの登録も基本的には同様の手順で実施します。
グローバルナビゲーションメニューに「お問い合わせ」が追加されていますコンタクトフォームの編集・設定方法
コンタクトフォームとは問い合わせ画面(ページ)のことです。
コンタクトフォームの編集とはContact Form 7の設定のことです。
コンタクトフォームを編集・設定する方法はお問い合わせのコンタクトフォームの編集を選択します。
ダッシュボード(管理画面)の”お問い合わせ”の”コンタクトフォーム”をクリックします
“コンタクトフォーム”の”編集”をクリックしますコンタクトフォームの編集で設定できる項目(タブ)は下記の4つです。
- フォーム
- メール
- メッセージ
- その他の設定
それぞれの項目の具体的な設定方法について解説します。
フォーム(設定)
初期設定の問い合わせフォームを自分好みにカスタイマイズ(設定変更)するにはフォームを変更します。
このフォームの設定画面では主にお問い合わせ画面で利用者に入力してもらう内容や項目に表示するテキストなどを設定変更できます。
このフォーム設定の項目はHTMLとCSSの知識がないと全て使うことはできません。
必要最小限の問い合わせ画面を作る場合は初期設定だけで大丈夫です。
Contact Form 7のコンタクトフォームの編集のフォーム(設定)画面フォーム画面内のボタンは大きく別けて、テキストボックス、ドロップダウンメニュー、チェックボックス、ラジオボタン、ファイル添付、送信があります。
Contact Form 7で自動生成できる機能は11種類
これらの自動生成ボタンで作成できる機能は大きく別けて下記の3種類があります。
- テキスト(ボックス)
テキスト、メールアドレス、URL、電話番号 ※この4つは基本的な機能は同じです - 数値
- 日付
- テキストエリア
- ドロップダウンメニュー
- チェックボックス
- ラジオボタン
- 承認確認
- クイズ
- ファイル (添付ファイルのアップロード機能)
- 送信ボタン
これらのボタンを押すことでタグの入力が自動で実施されます。タグをフォームに直接入力することもできます。
テキスト(ボックス)
テキスト、メールアドレス、URL、電話番号のボタンはすべてテキストボックスです。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(テキスト)↑各項目の意味は次の通りです。
- 項目タイプ：☐必須項目
チェックを入れると入力が必須になり、当項目に入力しないと送信できなくなります。 - 名前 text-○○
システムの通し番号が入っており、変更不可です。
タグに挿入された text-○○ の部分は後でメール設定で利用するので絶対に削除してはいけません - デフォルト値
ここに入力した文字を最初からテキストボックス内に表示することができます。 - ☐ このテキストを項目のプレースホルダーとして使用する
チェックを入れるとデフォルト値の文字がテキストボックスに文字を入力し始めると消えます。チェックを入れないとデフォルト値の文字は手動で消さない限り残ります。 - Akismet ☐ 送信者の名前の入力を要求する項目
送信者の名前を入力するフォームを作成するときにスパム対策プラグインのAkismetを利用して名前の入力をスパムかどうかを判定することができます。もしスパム判定された場合は「メッセージの送信に失敗しました」と表示され、問い合わせフォーム自体からメールは送信されません - ID属性
タグに固有の識別名を付けれます。主にスタイルシート(CSS)に記述した修飾を適用するために使います。
- クラス属性
主にスタイルシート(CSS)を適用するグループを指定するために使います。
問い合わせフォームのデザインをCSSでカスタマイズするときに利用します
ID属性とクラス属性はフォームタグ自動生成で入力するよりも直接タグに手入力する方法をおすすめします
※以降、項目名が同じ箇所は内容が重複しているので解説は省略しています。
テキスト(ボックス) 実際の画面表示
実際のお問い合わせ画面でテキストボックスは次のように表示されます。
テキスト(ボックス) 実際の画面表示フォーム内での設定例：
<label> 生年月日 (任意)
[text text-○○ “1900/01/01”]
数値
数値は価格や数量などの入力に使います。数値を入力する方法は2種類から選択できます。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(数値)↑項目の意味は次の通りです。
- 項目タイプ スピンボックス or スライダー
数値を入力する方法を選択できます - 範囲
数値の上限と下限を設定できます
数値 実際の画面表示
実際のお問い合わせ画面で数値は次のように表示されます。
スピンボックス
数値設定のスピンボックス 実際の画面表示フォーム内での設定例：
<label> 必要数(1～100) (任意)
[number number-○○ min:0 max:100 step:10 “0”]
↑minは下限、maxは上限、stepは入力単位、”0″は初期値です。
スライダー
数値設定のスライダー 実際の画面表示スライダーは数値が利用者(送信者)側には見えません。
受信者側には数値で確認できます。
フォーム内での設定例：
<label> 必要数(1～100) (任意)
[range number-○○ min:0 max:100 step:10 “50”]
数値の入力単位は例えば、step:10 とタグ内に追記すると10単位の入力になります
日付
日付は発送希望日などの入力に使います。
生年月日などの入力はテキストボックスで作成したほうが使いやすいです。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(日付)↑項目の意味は次の通りです
- デフォルト値
初めから日付に入力したい日付を設定できます
YYYY/MM/DD ※YYYYは西暦、MMは月で01～12、DDは日で01～31 - 範囲
日付に入力できる年月日の下限値と上限値を設定できます
日付 実際の画面表示
実際のお問い合わせ画面で日付は次のように表示されます。
日付 実際の画面表示フォーム内での設定例：
<label> 発送希望日 (任意)
2024
テキストエリア
テキスト(ボックス)は1行だけしか入力できませんが、テキストエリアは複数行の入力ができます。
ご意見の入力などの長文での入力が必要なフォームの作成に使います。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(テキストエリア)↑項目の意味はテキスト(ボックス)と同じです。
テキストボックスと違うのはテキストエリアのほうは文字数制限や行数を設定できる点にあります。
テキストエリアはタグにオプションを記載すると、テキストエリアの幅や高さ(行数)、最大文字数、最小文字数を指定できます
テキストエリア 実際の画面表示
実際のお問い合わせ画面で日付は次のように表示されます。
テキストエリア 実際の画面表示フォーム内での設定例：
<label> ご意見 (任意)
[textarea textarea-○○ placeholder “ご意見をお書きください”]
または
<label> ご意見 (必須)
[textarea* textarea-940 placeholder 60×10 minlength:20 maxlength:100 “ご意見をお書きください”]
↑60:横幅、50:行数、minlength:最小文字数、maxlength:最大文字数
最小文字数に満たない場合は下記のようにエラーが表示されて送信されません。
テキストエリアで最小文字数を指定した際に表示されるエラーメッセージドロップダウンメニュー
ドロップダウンメニューとはボックスに複数の選択肢が一列に表示されるメニューのことです。
ドロップダウンメニュー機能を使うと例えば、居住地を送信してもらう場合に47都道府県名から1つを選択して入力することもできます。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(ドロップダウンメニュー)↑項目の意味は次の通りです。
- オプション
ドロップダウンメニューに表示される部分です。1行に選択肢として1項目入力します - ☐ 複数選択を可能にする
CtrlキーやShiftキーを押しながら選択することで項目を複数選択可能になります
- ☐ 空の項目を先頭に挿入する
チェックマークを入れてオンにすると初期入力が空白になります
ドロップダウンメニュー 実際の画面表示
実際のお問い合わせ画面でドロップダウンメニューで47都道府県を設定した場合は次のように表示されます。
ドロップダウンメニューで47都道府県を設定した実際の画面表示フォーム内での設定例：
<label> お住いの都道府県 (任意)
[select menu-498 “北海道” “青森県” “岩手県” “宮城県” “秋田県” “山形県” “福島県” “茨城県” “栃木県” “群馬県” “埼玉県” “千葉県” “東京都” “神奈川県” “新潟県” “富山県” “石川県” “福井県” “山梨県” “長野県” “岐阜県” “静岡県” “愛知県” “三重県” “滋賀県” “京都府” “大阪府” “兵庫県” “奈良県” “和歌山県” “鳥取県” “島根県” “岡山県” “広島県” “山口県” “徳島県” “香川県” “愛媛県” “高知県” “福岡県” “佐賀県” “長崎県” “熊本県” “大分県” “宮崎県” “鹿児島県” “沖縄県”]
チェックボックス
チェックボックスとは選択肢の隣りにある☐にチェックマークを入れてオンにすると☑の表示になり、選択肢の中のどれかを1つを選択することができる機能です。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(チェックボックス)↑項目の意味は次の通りです。
- ☐ ラベルを前に、チェックボックスを後に配置する
文字(ラベル)の後ろ(右)にチェックボックスを配置できます。通常は文字の前(左)にチェックボックスを配置するので、この機能をオンにする機会はありません。
- ☐ 個々の項目を label 要素で囲む
チェックマークを入れてオンにすると各項目に＜label＞が挿入されます。
各項目の＜label＞タグをCSSで装飾するときに使います。 - ☐ チェックボックスを排他化する
チェックマークを入れることができる項目を1つだけにすることができます
チェックボックス機能を使うと例えば、利用者の性別を送信してもらう場合に、男性と女性の表記の隣りにあるチェックボックスにチェックマークを入れることで、どちらか1つを選択することができます
チェックボックス 実際の画面表示
実際のお問い合わせ画面でチェックボックスは次のように表示されます。
チェックボックス 実際の画面表示フォーム内での設定例：
<label> 性別 (任意)
[checkbox checkbox-412 exclusive “男性” “女性”]
ラジオボタン
ラジオボタンとは選択肢の隣りにある〇マークをクリックしてオンにすると●の表示になり、選択肢の中のどれかを1つを選択することができる機能です。
チェックボックスとの違いは複数選択出来ない点です。ラジオボタンは必ず1つだけ選択する項目に使います。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(ラジオボタン)↑項目の意味はチェックボックスと同じです。
ラジオボタン 実際の画面表示
実際のお問い合わせ画面でラジオボタンは次のように表示されます。
ラジオボタン 実際の画面表示フォーム内での設定例：
<label> 同意の可否 (任意)
[radio radio-496 default:1 “する” “しない” “どちらでもない”]
承認確認
承諾確認は個人情報の取り扱いなどの確認に使います。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(承諾確認)↑項目の意味は次の通りです。
- 同意条件
同意を得たい文章を入力します。チェックボックスの横に表示されます - オプション ☐ チェックボックスを任意選択にする
初期設定ではチェックボックスにはチェックマークが入っていません。
チェックボックスへのチェクマークを必須にする場合はこのオプションのチェックを外した状態にします
承諾確認 実際の画面表示
実際のお問い合わせ画面で承諾確認は次のように表示されます。
承諾確認 実際の画面表示フォーム内での設定例：
<label> 個人情報の取り扱いに同意する
[acceptance acceptance-154] はい。個人情報の取り扱いに同意します。 [/acceptance]
クイズ
クイズはボット(bot)などによるスパム対策用の機能です。
クイズ(質問)の回答が間違っていたり、回答の入力がないと問い合わせ画面からメールは送信されません。
1+1=2のような簡単な計算問題でもボット(bot)は回答できないので、強力なスパムメール対策になります。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(クイズ)↑項目の意味は次の通りです。
- クイズと回答
初期設定ではチェックボックスにはチェックマークが入っていません。
1行ごとに縦線(パイプ)を挟んで問題と回答を記入します。
クイズ(質問)を複数行記入すると、そのうちの1つが毎回ランダムに選ばれて表示されます
クイズ 実際の画面表示
実際のお問い合わせ画面でクイズは次のように表示されます。
クイズ 実際の画面表示回答が間違っていたり入力がないとエラーが表示され送信されません。
クイズの答えが間違っていたり入力されていないとエラーが表示されますフォーム内での設定例：
<label> スパム対策用 (必須)
[quiz quiz-968 “1+11=|12” “11+22=|33” “33+44=|77” “55+66=|121”]
ファイル (添付ファイルのアップロード機能)
ファイルは添付ファイルのアップロード機能です。
問い合わせフォームからファイルを添付して送信することができます。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(ファイル)画面↑項目の意味は次の通りです。
- ファイルサイズの上限 (バイト)
ファイルの上限サイズを設定します。
数値はバイト数(例:1048576)、またはkb(1024kb)、mb(1mb)で指定できます。
指定がない場合は自動的に1MBになります
- 受け入れ可能なファイル形式
添付ファイルで送信できるファイルの形式をjpgやpdfなどのファイル拡張子で入力します。複数ある場合は「jpg|zip|pdf」のように縦線(パイプ)で区切ります。
受け入れ可能なファイル形式で指定できる拡張子は下記のとおりです。
jpg、jpeg、png、gif、pdf、xls、xlsx、xlsm、doc、docx、ppt、pptx、avi、ogg、mov、mp3、mp4、mpg、wav、wmv
※上記以外の拡張子も指定可能です。
ファイル 実際の画面表示
実際のお問い合わせ画面でファイル(添付ファイルのアップロード機能)は次のように表示されます。
ファイル(添付ファイルのアップロード機能) 実際の画面表示↑ファイルを選択ボタンを押すとウィンドウ画面が開くので添付するファイルを選択できます。
フォーム内での設定例：
<label> 添付ファイル (任意)
[file file-587 limit:524288000 filetypes:pdf|jpg|png|zip|rar]
↑500MBの添付ファイルの容量制限をする場合はバイト指定だと524288000になります。
送信ボタン
送信ボタンはデフォルト(初期設定)で既にコンタクトフォームに存在しているので、この送信ボタン機能は誤って削除した場合にしか利用する必要はありません。
Contact Form 7のコンタクトフォームの編集のフォームタグ生成(送信ボタン)画面↑項目の意味は次の通りです。
- ラベル
送信ボタンに表示する文字(ラベル)を指定できます
送信ボタン 実際の画面表示
実際のお問い合わせ画面で送信ボタンは次のように表示されます。
送信ボタン 実際の画面表示※使用しているWebブラウザによって送信ボタンのデザインは異なります。
写真のブラウザはGoogle Chromeを利用しています。
フォーム内での設定例：
[submit “送信”]
メール(設定)
メール(設定)ではお問い合わせフォームから送信されたメールの宛先と受信内容を設定することができます。
基本的には初期設定(デフォルト)のままでも大丈夫ですが、フォーム(設定)でタグを作成していた場合はメール(設定)の”メッセージ本文”にタグを記載しないとその項目の内容を受信できないので記載忘れがないように注意してください。
Contact Form 7のメール(設定)画面↑[limit:524288000]というファイルタグをフォーム(設定)で作成しているので、上部に表示されています。それをコピーしてメッセージ本文の任意の場所に記載します。
初期設定(デフォルト)で基本的なタグは最初からメッセージ本文に記入されていますが、新規に作ったフォームタグは忘れずにメッセージ本文に記載しないとデータを受信できません
Contact Form 7は問い合わせフォームから利用者が問い合わせたときに、それに対する自動返信メールを設定することができます。
自動返信メールの設定は必須ではありませんが、きちんと送信されましたと記載されたメールが利用者(送信者)に届くので安心感を与えることができます。
メール (2) 自動返信メールの設定
上部タブのメールの画面の最下行にある”メール (2) を使用”にチェックマークを入れると、下に自動返信用のメールテンプレートが表示されます。
メール (2) 自動返信メールの設定画面↑送信先などの設定はこのままで大丈夫ですが、初期設定で入っている題名とメッセージ本文(返信文章)は不親切なので、きちんとした文章に書き換えるのをおすすめします。
下記は題名とメッセージ本文の例です。
題名の例：
[_site_title]へのお問い合わせありがとうございます(自動返信メール)
メッセージ本文の例：
########################
[_site_title]へのお問い合わせありがとうございます。
このメールは自動送信メールです。
お送りいただいた内容は以下の通りです。
########################
・お名前
[your-name]
・メールアドレス
[your-email]
・件名
[your-subject]
メッセージ本文:
[your-message]
========================
送っていただいたメールの内容を確認次第、折り返しご連絡いたします。今しばらくお待ちください。
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました
メッセージ(設定)
メッセージ(設定)は初期設定(デフォルト)のままで大丈夫です。
Contact Form 7の初期設定状態のメッセージ(設定)画面こららのメッセージは大きく別けると利用者が問い合わせフォームに入力するときに出力されるエラーメッセーと正常に送信した際に表示されるメッセージの2種類だけです。
変更する場合はテキストボックスの文字を修正し、最後に保存ボタンをクリックします。
その他の設定
その他の設定を利用するとお問い合わせフォームに追加設定を含めることができます。
Contact Form 7のその他の設定画面下記の追加コードを記載することで各種のモードを利用できます。
- サブスクライバー専用モード
subscribers_only：true
サイトにログインしたユーザーだけ、お問い合わせフォームから送信することができます - デモモード
demo_mode：on
お問い合わせフォームからメールが送信されなくなります。送信完了メッセージの確認するために利用します
他にもモードはありますが、上記のモードを含めて一般的な用途ではないので利用することは殆どなさそうです。
Cotact Form 7のスパム対策
お問い合わせフォームを利用するスパム(迷惑行為)は非常に多いです。
9割以上が海外からのスパム(迷惑)メールです。
Contact Form 7のスパム対策は必須です。
とはいえ、当記事で紹介したクイズの足し算や、送信前のチェックボックスを利用すればスパムのボット対策は出来ています。
ただ、それだと完璧に防ぐことは出来ないので、Contact Form 7と外部プラグインを連携させる方法が一般的なスパム対策で、効果的です。
スパム対策プラグインとContact Form 7を連携させる方法を解説します。
Akismetでのスパム対策
スパム対策プラグインのAkismetを利用すると、Contact Form 7の問い合わせフォームを利用したスパム対策が可能です。
Akismetを利用したスパム対策の方法は下記2つを実施します。
- Akismetプラグインのインストールと有効化
- Contact Form 7でAkismetオプションを指定
①はAPIキーの設定まで完了していないといけません。
Contact Form 7でAkismetオプションを指定
Akismetが有効になって設定も完了してたら、後はコンタクトフォームの作成時、タグに下記のオプションを入力するか、フォームタグ自動生成用の各ボタンを押した時に表示される画面内のAkismetの箇所にチェックマークを入れるだけで、自動的にタグにAkismetのオプションが入ります。
手動でAkismetのオプションを入力する場合は下記オプションをコンタクトフォームに記載します。
| オプションタグ | 用途 | フォームタグ記入例 |
|---|---|---|
| akismet:author | 送信者の名前 | [text your-name akismet:author] |
| akismet:author_email | 送信者のメ-ルアドレス | [email* your-email akismet:author_email] |
| akismet:author_url | 送信者のサイトURL | [text your-url akismet:author_url] |
この3つのオプションタグの内、どれか1つだけ入力されていたらAkismetのスパム対策は有効になります。なので3つ全てのオプションタグを入力する必要はありません。akismet:author(送信者の名前)が一番利用頻度が多いのでこのオプションタグ1つだけで十分です。
reCAPTCHAでのスパム対策
Akismetはサイトにサインインしないといけないなど少々面倒なので使いたくない人も多いと思います。そのときはGoogleの「reCAPTCHA」を導入してContact Form 7と連携させる方法があります。
ただ、「reCAPTCHA」を使うにはGoogleアカウントが必要です。
「reCAPTCHA」の登録方法はこちらの記事を参考にしてください。
スパム対策 reCAPTCHAの設置/設定方法と使い方
Contact Form 7と「reCAPTCHA」の連携方法
ダッシュボード(管理画面)のお問い合わせのインテグレーションを選択します。
WordPressのダッシュボード(管理者画面)のお問い合わせのインテグレーションを選択します↑WordPressのダッシュボード(管理者画面)のお問い合わせのインテグレーションをクリックします。
「reCAPTCHA」のインテグレーションのセットアップボタンを押します
「reCAPTCHA」のインテグレーション画面↑Googleの「reCAPTCHA」サイトで発行されたサイトキーとシークレットキーをContact Form 7に入力するだけです。
- サイトキーを入力します
- シークレットキーを入力します
- 【変更を保存】ボタンを押します
「reCAPTCHA」が有効化された際に表示される画面以上でContact Form 7と「reCAPTCHA」の連携したスパム対策は完了です。
お問い合わせフォームのデザインをHTMLとCSSでカスタマイズ
Contact Form 7はコンタクトフォームの編集でHTMLとCSSが使えるので、お問い合わせ画面のデザインをカスタマイズすることができます。
ID属性とクラス属性
Contact Form 7はフォームタグにHTMLとCSSで利用するID属性とクラス属性を追加できるので、見た目のデザインを変更することができます。
ID属性とクラス属性はフォームタグ自動生成で入力することもできますが、CSSに慣れている場合は直接コンタクトフォームの編集画面で手入力することをおすすめします。
お問い合わせフォームのカスタマイズ
お問い合わせ画面(コンタクトフォーム)の見た目をHTMLを使ってカスタマイズできます。
Contact Form 7のコンタクトフォームの編集画面(設定例)HTMLコードだけでは正常に表示されません。とくにスマホ画面だと表示が途切れるのでクラス指定とCSSの設定は必須です。
カスタマイズしたお問い合わせ画面
下記は上記のHTMLのテーブルタグでカスタマイズした実際のお問い合わせ画面です。
Contact Form 7 カスタマイズしたお問い合わせ画面Contact Form 7 お問い合わせフォームのカスタマイズ方法の詳細はこちらの記事をご覧ください
Contact Form 7 お問い合わせフォームのカスタマイズ方法
まとめ
Contact Form 7は非常に簡単にお問い合わせフォームを作成できるプラグインです。
お問い合わせフォーム用のプラグインではContact Form 7以外に他の選択肢がないほどです。
しかも、痒い所に手が届くような細かい設定が多く、カスタマイズの幅が広いことも特徴です。
さらにContact Form 7用の機能追加プラグインもあるほどです。
多機能である程度のHTMLとCSSの知識さえあれば個人ブログ以外にも法人用サイトのお問い合わせフォームとしての使用も十分可能です。
ブログ初心者にも優しく初期設定(デフォルト)のままでも大丈夫なのも特筆すべき点です。
ワードプレスには必須の定番プラグインなので非常におオススメです。
Googleの無料 スパム防止サービス「reCAPTCHA」の導入とContact Form 7への設定を解説した記事はこちらです↓
reCAPTCHA 導入方法とContact Form 7への設定方法
