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

こんにちは。ハセブロです!

今回は、WordPressのプラグインContact Form 7使い方やカスタマイズの方法などを初心者の方にわかりやすく解説します!

悩み

お問い合わせページ作り方を知りたいな。

悩み

スパム対策が簡単にできる方法はないかな?

ハセブロ

そんなお悩みにContact Form 7reCAPTCHA v3を導入してスパム対策を施したお問い合わせページの作り方も詳しく解説しますね!

Contact Form 7シンプルでカスタマイズもしやすいので、とても人気が高いWordPress用のお問い合わせフォームプラグインです!

「プログラミングはできないよ~…」「難しいのはイヤだ~…」という方でも大丈夫!Contact Form 7基本的な使い方カスタマイズの方法も詳しく紹介しますので安心してください!

本記事を読みながら最後まで実践することで、プログラミングができなくてもContact Form 7を使ったお問い合わせページが作れます!

本記事の流れ

  • Contact Form 7 について
  • Contact Form 7のインストール方法
  • Google reCAPTCHA v3の導入方法
  • お問い合わせページの作成方法と送受信テスト
  • お問い合わせフォームのカスタマイズ方法

それでは始めていきましょう!

本記事の情報は2023年7月24日時点のものです!Contact Form 7及び関連するサービス等最新の情報を確認するようにしてください!

目次

Contact Form 7 について

Contact Form 7とは?
Contact Form 7とは

Contact Form 7とは?

WordPress管理画面:プラグインを追加/Contact Form 7
WordPress管理画面プラグインを追加Contact Form 7

Contact Form 7シンプル柔軟性が高いWordPress用のお問い合わせフォームプラグインです!

非常に人気の高いプラグイン有効インストール数はなんと500万以上!

更新も継続的に行われていて、2023年7月時点でバージョンは5.7.7までリリースWordPressは6.2.2までテスト済みのようです!

以下はContact Form 7のリリース情報です!

Contact Form 7 バージョン 5.7.7 がリリースされました。このマイナーアップデートリリースにはいくつかの改善が含まれます。

必要バージョン: WordPress 6.0 以上
テスト済み: WordPress 6.2.2 まで

引用元:Contact Form 7 5.7.7
ハセブロ

ユーザー数が多いので使い方やエラーなどわからないことは調べると解決方法が見つかりやすいのも安心ですよね!

reCAPTCHA v3を使ったスパム対策

Contact Form 7:スパム対策
Contact Form 7スパム対策

Contact Form 7GooglereCAPTCHAを使用してスパム対策ができます!

reCAPTCHA:スパムボットによる不正なフォーム送信を遮断する機能をもつサービス

Contact Form 7reCAPTCHA v3について記載されたページも確認しておきましょう!

reCAPTCHA API の現在の最新バージョンは v3 です。バージョン 5.1 以降の Contact Form 7 はこの reCAPTCHA v3 API を使用します。

引用元:Contact Form 7 reCAPTCHA (v3)

最新のreCAPTCHA v3が使用できますよ!

ハセブロ

本記事ではreCAPTCHA v3の導入方法も解説します!

reCAPTCHA v3について詳しい情報を知りたい方は、こちらをご確認くださいませ!

本記事のポイント

本記事のポイント
本記事のポイント

Contact Form 7使ったことがない or 使い方がわからないという方に向けて、本記事では以下のポイントを順番に解説していきます!

本記事のポイント

  • Contact Form 7をインストールする
  • reCAPTCHA v3を使用できるようにする
  • デフォルトのフォームを使ってお問い合わせページを作成する
  • 送受信テストを行い動作確認をする
  • コンタクトフォームをカスタマイズする

Contact Form 7の使い方公式のドキュメントもご確認いただくとより理解が深まりますよ!

Contact Form 7のインストール方法

Contact Form 7:インストール方法
Contact Form 7インストール方法

まずはContact Form 7をインストールして内容を確認していきましょう!

このセクションの流れ

  • Contact Form 7を検索しインストール
  • Contact Form 7を有効化する
  • デフォルトのコンタクトフォームを確認する
  • コンタクトフォームの構成:フォーム
  • コンタクトフォームの構成:メール
  • コンタクトフォームの構成:メッセージ
  • コンタクトフォームの構成:その他の設定
  • 新規でコンタクトフォームを作成する方法

では進めます!

STEP
Contact Form 7検索インストール
WordPress管理画面:プラグイン→新規追加
WordPress管理画面プラグイン→新規追加

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

検索→今すぐインストール
検索→今すぐインストール

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

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

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

インストール完了
インストール完了

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

STEP
Contact Form 7有効化する
有効化
有効化

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

自動更新を有効化
自動更新を有効化

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

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

STEP
デフォルトのコンタクトフォームを確認する
WordPress管理画面:お問い合わせ→コンタクトフォーム
WordPress管理画面お問い合わせ→コンタクトフォーム

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

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

デフォルトでコンタクトフォームが用意されている
デフォルトでコンタクトフォームが用意されている

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

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

コンタクトフォーム
コンタクトフォーム

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

役割
フォームお問い合わせページで表示する内容を設定
メールお問い合わせ内容を送るメールの設定
メッセージユーザーに知らせるメッセージの設定
その他の設定コードを入力し高度な設定を行う
STEP
コンタクトフォームの構成:フォーム
コンタクトフォームの構成:フォーム
コンタクトフォームの構成フォーム

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

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

STEP
コンタクトフォームの構成:メール
メール
メール

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

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

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

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

STEP
コンタクトフォームの構成:メッセージ
メッセージ
メッセージ

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

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

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

STEP
コンタクトフォームの構成:その他の設定
その他の設定
その他の設定

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

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

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

STEP
新規でコンタクトフォームを追加する方法
WordPress管理画面:お問い合わせ→新規追加
WordPress管理画面お問い合わせ→新規追加

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

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

フォーム名を入力して保存
フォーム名を入力して保存

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

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

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

ハセブロ

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

reCAPTCHA v3の導入方法

reCAPTCHA v3:導入方法
reCAPTCHA v3導入方法

Contact Form 7をインストールできたらreCAPTCHA v3を導入しましょう!

reCAPTCHA v3の導入方法の解説

  • reCAPTCHAのページを開く
  • v3管理コンソールを開く
  • ドメインを登録
  • reCAPTCHA v3のサイトキーとシークレットキーの確認
  • Contact Form 7のインテグレーションのセットアップ
  • reCAPTCHAの有効化を確認
ハセブロ

インテグレーションというのはContact Form 7reCAPTCHA v3の機能を使えるようにすることです!

Googleアカウントをお持ちでない方は、あらかじめアカウントを作成しておいてください!

準備ができたら進めます!

STEP
reCAPTCHAのページを開く
reCAPTCHA
<a href=httpswwwgooglecomrecaptchaabout target= blank rel=noopener title=reCAPTCHA><strong>reCAPTCHA<strong><a>

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

URLは以下になります!

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

STEP
v3管理コンソールを開く
reCAPTCHA
<a href=httpswwwgooglecomrecaptchaabout target= blank rel=noopener title=reCAPTCHA><strong>reCAPTCHA<strong><a>

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

STEP
ドメインを登録してreCAPTCHA v3を使えるようにする
ドメインの登録
ドメインの登録

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

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

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

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

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

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

STEP
サイトキーとシークレットキーの確認
サイトキーとシークレットキー
サイトキーとシークレットキー

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

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

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

STEP
Contact Form 7のインテグレーションをセットアップ
WordPress管理画面:お問い合わせ→インテグレーション
WordPress管理画面お問い合わせ→インテグレーション

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

外部APIとのインテグレーション
外部APIとのインテグレーション

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

インテグレーションのセットアップ
インテグレーションのセットアップ

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

サイトキーとシークレットキーをペーストして入力
サイトキーとシークレットキーをペーストして入力

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

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

STEP
reCAPTCHAの有効化を確認
reCAPTCHAの有効化確認
reCAPTCHAの有効化確認

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

ハセブロ

お疲れ様です!!これでContact Form 7を使用する準備ができました!次はお問い合わせページを作成して送受信テストをしてみましょう!

お問い合わせページの作成方法と送受信テスト

Contact Form 7:お問い合わせページの作成方法
Contact Form 7お問い合わせページの作成方法

お問い合わせページの作成方法

では実際にContact Form 7を使ってお問い合わせページを作成してみましょう!

お問い合わせページを作成する流れ

  • デフォルトのコンタクトフォームを使用
  • ショートコードをコピー
  • 固定ページでお問い合わせページ作成
  • お問い合わせページのプレビュー

それでは進めます!

ハセブロ

まずはデフォルトの「コンタクトフォーム 1」を使って作成してみますね!

STEP
デフォルトのコンタクトフォームを使用
WordPress管理画面:お問い合わせ→コンタクトフォーム
WordPress管理画面お問い合わせ→コンタクトフォーム

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

STEP
ショートコードをコピー
ショートコードをコピー
ショートコードをコピー

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

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

STEP
固定ページでお問い合わせページ作成
WordPress管理画面:固定ページ→新規追加
WordPress管理画面固定ページ→新規追加

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

タイトルの入力
タイトルの入力

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

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

ショートコードを追加
ショートコードを追加

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

ショートコードをペースト
ショートコードをペースト

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

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

STEP
お問い合わせページのプレビュー
プレビューする
プレビューする

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

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

お問い合わせページ:プレビュー画面
お問い合わせページプレビュー画面

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

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

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

ハセブロ

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

「reCAPTCHAのアイコンが表示されていない~」という方はもう一度設定を確認しましょう!

\ 以下のボタンで移動できます! /

送受信テスト

Contact Form 7:送受信テスト
Contact Form 7送受信テスト

送受信テストで動作確認する流れ

  • 「メール」の「送信先」にメールアドレスを設定
  • 送信テスト
  • 受信内容の確認
STEP
「メール」の「送信先」にメールアドレスを設定
コンタクトフォーム:メール
コンタクトフォームメール

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

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

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

STEP
送信テスト
フォームから送信
フォームから送信

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

送信完了
送信完了

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

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

ハセブロ

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

STEP
受信の確認
届いたメールを確認
届いたメールを確認

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

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

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

ハセブロ

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

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

Contact Form 7:カスタマイズ方法
Contact Form 7カスタマイズ方法
悩み

フォームに他の項目も追加したい…。

悩み

プログラミングができないと無理かな…?

ハセブロ

少しコードの理解は必要ですが、プログラミングができなくても他の項目を追加することはできますよ!

Contact Form 7他の項目を追加する方法を解説しますね!

カスタマイズ方法の解説

  • コンタクトフォームの新規追加
  • 基本的な仕組みと追加手順
  • 電話番号の追加
  • ドロップダウンメニューの追加
  • チェックボックスとラジオボタンのエラー解説
  • チェックボックスの追加
  • ラジオボタンの追加
  • メール:メッセージ本文の設定
  • お問い合わせページの作成・送受信テスト

「電話番号」「ドロップダウンメニュー」「チェックボックス」「ラジオボタン」4つを追加してみましょう!

ハセブロ

上記4つの項目を追加する方法がわかればベーシックなコンタクトフォームは作れそうですよね!

それでは進めていきましょう!

STEP
コンタクトフォームの新規追加
WordPress管理画面:お問い合わせ→新規追加
WordPress管理画面お問い合わせ→新規追加

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

コンタクトフォーム名を入力
コンタクトフォーム名を入力

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

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

ハセブロ

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

STEP
基本的な仕組みと追加手順

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

基本的な仕組み

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

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

構成要素呼び方役割
<label> 氏名 </label>ラベル氏名と表示
[text* your-name autocomplete:name]フォームタグ名前入力欄を設置

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

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

基本的な追加手順

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

「フォーム」の基本的な設定手順

  • ラベルを記述する
  • フォームタグを設定して挿入する

これだけです!

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

ハセブロ

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


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


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

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

STEP
電話番号の追加
電話番号追加
電話番号追加

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

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

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

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

電話番号タグの生成
電話番号タグの生成

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

フォームタグの設定内容(例)

  • 電話番号の入力を必須にする
  • 入力欄に電話番号の入力例を入れる
  • 入力例を表示させる
  • フォームタグを挿入する
電話番号タグを挿入後
電話番号タグを挿入後

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

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

電話番号タグの[tel* tel-713 placeholder “000-0000-0000”]を解説

  • tel*→*は「必須」を意味する
  • tel-713→フォームタグの名前
  • placeholder→プレースホルダーを使う
  • “000-0000-0000″→プレースホルダーで表示する内容

※”000-0000-0000″はフォームタグを生成するときに設定した値です!

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

STEP
ドロップダウンメニューの追加
ドロップダウンメニューの追加
ドロップダウンメニューの追加

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

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

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

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

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

ドロップダウンメニュータグの生成
ドロップダウンメニュータグの生成

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

フォームタグの設定内容(例)

  • 選択オプションを午前と午後を入力
  • 複数選択を可能にする
  • 選択項目の先頭を「以下から選択してください」と表示させる
  • フォームタグを挿入する
ドロップダウンメニュータグの挿入後
ドロップダウンメニュータグの挿入後

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

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

ドロップダウンメニュータグの[select menu-827 multiple include_blank “午前” “午後”]を解説

  • select→「任意」なので*はついてない
  • menu-827→フォームタグの名前
  • multiple→複数選択可能
  • include_blank→オプションの選択項目の先頭に空の項目を追加
  • “午前” “午後”→オプションの選択項目

※”午前” “午後”はフォームタグを生成するときに設定した文字です!

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

ハセブロ

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

STEP
【必読】チェックボックスとラジオボタンのエラー

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

チェックボックスとラジオボタンのエラー例
チェックボックスとラジオボタンのエラー例

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

チェックボックスとラジオボタンのエラー解決方法
チェックボックスとラジオボタンのエラー解決方法
ハセブロ

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

STEP
チェックボックスの追加
チェックボックスの追加
チェックボックスの追加

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

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

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

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

チェックボックスタグの生成
チェックボックスタグの生成

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

フォームタグの設定内容(例)

  • 選択オプションを4つ入力
  • フォームタグを挿入する
チェックボックスタグの挿入後
チェックボックスタグの挿入後

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

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

チェックボックスタグの[checkbox checkbox-469 use_label_element “検索” “メルマガ” “SNS” “その他”]を解説

  • checkbox→「任意」なので*はついてない
  • checkbox-469→フォームタグの名前
  • use_label_element→個々の項目をlabel要素で囲む
  • “検索” “メルマガ” “SNS” “その他”→オプションの選択項目

※”検索” “メルマガ” “SNS” “その他”はタグを生成するときに設定した文字になります!

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

STEP
ラジオボタンの追加
ラジオボタンの追加
ラジオボタンの追加

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

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

お問い合わせページでお問い合わせ内容(任意)と表示されます!

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

ラジオボタンタグを生成
ラジオボタンタグを生成

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

フォームタグの設定内容(例)

  • 選択オプションを3つ入力
  • フォームタグを挿入する
ラジオボタンタグの挿入後
ラジオボタンタグの挿入後

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

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

ラジオボタンタグの[radio radio-471 use_label_element default:1 “質問” “相談” “その他”]を解説

  • radio→「任意」なので*はついてない
  • radio-471→フォームタグの名前
  • use_label_element default:1→個々の項目をlabel要素で囲む
  • default:1→デフォルトで先頭を選択した状態/2番目を選択する場合はdefault:2
  • “質問” “相談” “その他”→オプションの選択項目

※”質問” “相談” “その他”はフォームタグを生成するときに設定した文字です!

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

STEP
メールメッセージ本文
メールの設定
メールの設定

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

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

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

メッセージ本文のカスタマイズ
メッセージ本文のカスタマイズ

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

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

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

本記事の例でメールタグを解説

  • メッセージ本文にメールタグ[radio-471]を挿入しておく
  • お問い合わせページで“質問”が選択されて送信されたとする
  • [radio-471]質問の文字に置き換わってメールが届く

このようなイメージです!

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

STEP
お問い合わせページの作成・送受信テスト
ショートコードをコピー
ショートコードをコピー

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

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

ショートコードを入力
ショートコードを入力

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

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

お問い合わせページの作成方法をもう一度確認する場合は、以下ボタンで移動できます!

お問い合わせページのプレビュー画面1
お問い合わせページのプレビュー画面1

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

お問い合わせページのプレビュー画面2
お問い合わせページのプレビュー画面2

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

送信する
送信する

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

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

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

ハセブロ

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

届いたメールを確認
届いたメールを確認

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

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

ハセブロ

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


WordPressの設定について不安などございませんか?!【ブログの始め方】WordPressの使い方や初期設定について初心者向けに詳しく解説!WordPressの基本的な使い方や設定方法について詳しく解説しています!

まとめ

今回は「【reCAPTCHA v3対応】Contact Form 7の使い方を初心者向けにわかりやすく解説!」について書きました。

プログラミングがわからないという方でも、Contact Form 7を使えば簡単にお問い合わせページが作れますよね!

少し手間は必要ですが、柔軟にカスタマイズできるのもContact Form 7の魅力です!

フォームがシンプルなのでどんなデザインにも馴染みやすい一方で、「ページの見え方を調整したいな~」でも「プログラミングができない~」とお悩の方には有料テーマを活用してみるのもオススメです!

【ブログの始め方】WordPressの使い方や初期設定について初心者向けに詳しく解説!ではオススメの有料テーマについても紹介していますのでぜひご参考くださいませ!

以上、ハセブロでした!

最後までお読みいただきありがとうございました!

よかったらシェアしてね!
  • URLをコピーしました!
目次