Contact Form 7の使い方・カスタマイズ方法を初心者向けにわかりやすく解説！【reCAPTCHA v3導入】

WordPress管理画面のメニューにある「プラグイン」→「新規追加」をクリックします！

「プラグインを追加」画面の右上に検索キーワードの入力欄があるのでContact Form 7を入力します！

Contact Form 7が表示され使用中のWordPressバージョンとの互換性があるか確認したら、「今すぐインストール」をクリックします！

検索したときに他にも色々なプラグインが表示されますが間違えないようにしましょう！

インストールが完了すると「 インストール完了。」に表示が変わります！

「有効化」ボタンをクリックします！

「プラグイン」→「インストール済みプラグイン」でContact Form 7の「自動更新を有効化」をクリックしましょう！

自動更新を有効化しておくと、プラグインが更新されたときの更新漏れを回避することができます！

WordPress管理画面のメニューに「 お問い合わせ」が追加されていますのでクリックします！

「コンタクトフォーム」をクリックして確認してみましょう！

デフォルトで「コンタクトフォーム 1」が用意されていますね！

「コンタクトフォーム 1」をクリックしましょう！

Contact Form 7は「フォーム」「メール」「メッセージ」「その他の設定」の4つで構成されています！

「フォーム」はお問い合わせページで表示される内容を設定する画面です！

デフォルトでは、氏名、メールアドレス、題名、メッセージ本文と送信ボタンがお問い合わせページに表示されるシンプルな構成です！後ほど「カスタマイズ方法」でもう少し詳しく解説します！

「メール」のタブをクリックします！

「メール」はお問い合わせ内容を送るメールの設定です！

お問合せがあると「メール」で設定した内容で「送信先」のメールアドレスに送られます！

後ほど「カスタマイズ方法」でもう少し詳しく解説します！

「メッセージ」のタブをクリックします！

「メッセージ」は様々な状況で用いられるメッセージです！

コンタクトフォームに入力したときのエラーメッセージや、送信完了あるいは送信エラーのメッセージなどユーザーに対するメッセージと考えてOKです！

「その他の設定」のタブをクリックします！

コードを入力することでコンタクトフォームにカスタム設定を追加できます！

初心者の方やプログラミングができない方にとってはあまり使う機会がない設定項目ですね！もし使いたいという方はこちらをご確認くださいませ！

新規でコンタクトフォームを作成する方法についても解説しておきますね！

「 お問い合わせ」から「新規追加」をクリックします！

「コンタクトフォームを追加」の下に入力欄があるので、フォームの名前を入力しましょう！

「保存」をクリックします！

新規でコンタクトフォームを追加した場合も、「コンタクトフォーム 1」と同じ内容がデフォルトであらかじめ用意されますよ！

ハセブロ

基本的にはデフォルトのフォーマットを使ってどんどんカスタムしていくというイメージです！

まずreCAPTCHAのページを開きましょう！

URLは以下になります！

https://www.google.com/recaptcha/about/

画面上のメニューから「v3管理コンソール」をクリックします！

reCAPTCHA v3が使えるようにサイトのドメインを登録します！

「ラベル」はreCAPTCHA v3で管理しやすい名前を入力しましょう！

「スコアベース（v3）」を選択し、自分のサイトの「ドメイン」を入力します！

利用規約を確認して同意する場合はチェックを入れます！

「送信」をクリックします！

ドメインはURLではなくhttps://より後ろの部分です！

登録が成功すると「サイトキー」と「シークレットキー」が表示された画面に変わります！

発行された2つのキーをContact Form 7で使用します！

キーは「v3管理コンソール」→「設定」で確認できます！

WordPressの管理画面で「 お問い合わせ」から「インテグレーション」をクリックします！

「外部APIとのインテグレーション」画面の下の方にスクロールします！

「reCAPTCHA」を見つけたら「インテグレーションのセットアップ」をクリックします！

先ほど発行したreCAPTCHAの「サイトキー」と「シークレットキー」をそれぞれコピー&ペーストで入力します！

「変更を保存」をクリックします！

「 reCAPTCHAはこのサイト上で有効化されています。」が表示されたらOKです！

WordPressの管理画面で「 お問い合わせ」から「コンタクトフォーム」をクリックします！

「コンタクトフォーム 1」の「ショートコード」をコピーします！

[]を含めてコピーしてください！

WordPressの管理画面で「固定ページ」から「新規追加」をクリックします！

タイトルを入力して段落の「＋」をクリックします！

公開設定やパーマリンクの設定も必要に応じて行ってください！サンプルとして作成するので「非公開」設定でも問題ないでしょう！

「ショートコード」アイコンを検索してクリックします！

STEP2でコピーしたショートコードをペーストします！

「更新」をクリックしておきましょう！

画面右上の「更新」ボタンの左にある「プレビュー」をクリックします！

「新しいタブでプレビュー」をクリックします！

お問い合わせページが表示されました！

デフォルトの「コンタクトフォーム 1」はイメージのような内容になっています！

画面右下あたりにreCAPTCHAアイコンが表示されていることも確認しましょう！

ハセブロ

では次にこのフォームをベースに送受信テストを行います！

コンタクトフォームの「メール」タブの「送信先」にメールアドレスを入力しましょう！

「保存」をクリックします！

「送信先」はデフォルトではWordPressの管理者メールアドレスが設定されています！変更の必要がなければそのままでもOKです！

お問い合わせページのフォームに必要事項を入力し「送信」をクリックしましょう！

「ありがとうございます。メッセージは送信されました。」と表示されたらOKです！

VPNでネットワーク接続している場合、2回目以降の送信時はreCAPTCHAによってエラーになることがあります。その場合は一時的にVPNをオフにして送信テストをしてみましょう！

ハセブロ

僕の場合は2回目以降のテストでエラーが出ましたが、VPNをオフにするとエラーがなくなりました！テスト後はVPNをオンに戻すことを忘れないようにしましょう！

「送信先」で設定したメールアドレスに届いた内容です！

デフォルトの「フォーム」設定だとイメージのような内容でメールが届きます！

イメージで「ブログタイトル」と表示されている部分は自分のサイト名が表示されます！

ハセブロ

もう少し充実した内容でフォームを設定したいという方に向けて、次はカスタマイズ方法を解説しますね！

WordPress管理画面で「 お問い合わせ」→「新規追加」をクリックします！

「コンタクトフォーム名」を入力しましょう！

フォームに新たな項目を追加していきます！

ハセブロ

新たな項目を追加する前に基本的な仕組みと追加手順について簡単に解説しますね！

「フォーム」の基本的な仕組みと追加手順について解説します！

基本的な仕組み

「氏名」の項目は以下の部分です！
<label> 氏名 [text* your-name autocomplete:name] </label>

この記述は以下を意味しています！

「フォーム」の項目は基本的に「ラベル」「フォームタグ」の2つで構成されます！

フォームタグは [タグの種類 タグの名前 タグの設定内容] が記述されています！

基本的な追加手順

「フォーム」に項目を追加する場合の基本的な追加手順をおさえておきましょう！

少しコードを扱う必要はありますがゼロからコードを記述しなくても大丈夫です！

ハセブロ

基本的な仕組みと追加手順を理解した上でデフォルトで記述されたものを使いながらカスタムしていきましょう！！

デフォルトでは以下のように2つの構成要素は1文で記述されています。
<label> 氏名
[text* your-name autocomplete:name] </label>

ラベルとフォームタグを分けて書いてもお問い合わせページには同じように表示されます。
<label> 氏名 </label>
[text* your-name autocomplete:name]

2つの要素で構成されていることを説明するための補足として捉えてください！

では「電話番号」の項目を追加しながらもう少し理解を深めていきましょう！

まず<label></label>をコピー&ペーストして<label> 電話番号（必須） </label>と書き換えて準備しましょう！

これがお問い合わせページで電話番号（必須）と表示される部分です！

画面上の方にある「電話番号」のボタンをクリックします！フォームタグの挿入です！

「電話番号」のタグを生成する画面がポップアップします！

イメージは「電話番号」タグを挿入した内容です！

お問い合わせページで表示されるイメージも添付しておきました！

「保存」をクリックしましょう！

続いて「ドロップダウンメニュー」を追加してみましょう！

まず<label></label>をコピー&ペーストします！

本記事では<label> ご都合の良い時間帯（任意） </label>と書き換えて準備しました！

お問い合わせページでご都合の良い時間帯（任意）と表示されます！

画面上の方にある「ドロップダウンメニュー」のボタンをクリックします！フォームタグの挿入です！

「ドロップダウンメニュー」のタグを生成する画面がポップアップします！

イメージは「ドロップダウンメニュー」タグを挿入した内容です！

お問い合わせページで表示されるイメージも添付しておきました！

「保存」をクリックしましょう！

ハセブロ

どうですか？！大分慣れてきたのではないでしょうか？！続いてチェックボックスに進みます！

「チェックボックス」と「ラジオボタン」に入る前にエラーについて解説しておきます！

「チェックボックス」と「ラジオボタン」は<label></label>でフォームタグをはさむとエラーになってしまいます！

ハセブロ

ラベルとフォームタグは分けて記述すると解決します！覚えておいてください！

まず<label></label>をコピー&ペーストします！

本記事では<label> 当ブログを知ったきっかけ（任意） </label>と書き換えて準備しました！

お問い合わせページで当ブログを知ったきっかけ（任意）と表示されます！

画面上の方にある「チェックボックス」のボタンをクリックします！フォームタグの挿入です！

「チェックボックス」のフォームタグを生成する画面がポップアップします！

イメージは「チェックボックス」タグを挿入した内容です！

お問い合わせページで表示されるイメージも添付しておきました！

「保存」をクリックしましょう！

まず<label></label>をコピー&ペーストします！

本記事では<label> お問い合わせ内容（任意） </label>と書き換えて準備しました！

お問い合わせページでお問い合わせ内容（任意）と表示されます！

画面上の方にある「ラジオボタン」をクリックします！フォームタグの挿入です！

「ラジオボタン」のタグを生成する画面がポップアップします！

イメージは「ラジオボタン」タグを挿入した内容です！

お問い合わせページで表示されるイメージも添付しておきました！

「保存」をクリックしましょう！

それでは「メール」の設定をしましょう！「フォーム」で追加したフォームタグの名前が表示されていますね！

「送信先」を変更する場合はメールアドレスを入力します！

「メール」では「フォーム」で設定したフォームタグの名前をメールタグとして利用できます！

「メッセージ本文」に利用可能なメールタグを追加します！

それぞれ何の項目なのかわかりやすいように項目名を入力しておきましょう！

メールタグはお問い合わせページで入力・選択された内容に置き換わります！

修正を加えたら「保存」をクリックします！

では実際にテストしてみましょう！

作成したコンタクトフォームの「ショートコード」をコピーします！

「お問い合わせページの作成方法」で作成したページを使うか、新たにお問い合わせページを作成してください！

「ショートコード」をペーストして入力したら「プレビュー」しましょう！

お問い合わせページに表示されたコンタクトフォームのデフォルト部分です！

画面を下にスクロールすると追加した項目が表示されていることが確認できました！

入力・選択などを済ませたら「送信」ボタンをクリックします！

「ありがとうございます。メッセージは送信されました。」のメッセージが表示されたらOKです！

VPNでネットワーク接続している場合、reCAPTCHAの判定でエラーになることがあります。その場合は一時的にVPNをオフにして送信テストしてみましょう！

ハセブロ

テスト後は忘れずにVPNをオンに戻しましょう！

メールタグはすべて入力・選択した内容で置き換わっていますね！

問題がなければ動作チェックまで完了です！

ハセブロ

本当にお疲れ様でした！！これだけ機能追加できるようになれば、お問い合わせページに必要な項目はある程度カバーできるはずです！