Contact Form by WPFormsの使い方とreCAPTCHAの設定

Contact Form by WPFormsの使い方とreCAPTCHAの設定
フェニック

Contact Form by WPFormsでサクッとお問い合わせフォームを作る方法が知りたいぞ。

今回はこのようなお悩みにお答えします。

ブログ運営をするためには、お問い合わせフォームの設置は必須となります。

必須な理由
  • Google Adsenseに合格するため
  • ASPから高単価案件を紹介してもらうため
  • 読者とコミュニケーションをとるため

ただしお問い合わせフォームを作るのは面倒ですよね。

そこで今回はWPFormsを使い、お問い合わせフォームを超簡単に設置する方法を解説します。

解説画像を40枚以上用意したので、真似するだけでOKです。

WPFormsでサクッとお問い合わせフォームを作ってしまいましょう。

追記です。
WordPressを立ち上げたばかりの人には「WordPressの初期設定」の記事もおすすめです。

目次

Contact Form by WPFormsのインストール方法

Contact Form byWPFormsのインストール方法解説画像
Contact Form byWPFormsのインストール方法

ダッシュボードからプラグインを選択します。

検索窓に「Contact Form byWPForms」と入力すれば、熊のアイコンが表示されたプラグインが表示されます。

【今すぐインストール+有効化】のボタンを押せば、 Contact Form by WPformsのインストールは完了です。

WPForms LiteはContact Form by WPFormsの無料版のこと

Contact Form by WPFormsを有効化すると、プラグイン名がWPForms Liteに変更されます。

WPForms LiteはContact Form by WPFormsの無料版のことです。

WPForms Liteでも高い機能を持つお問い合わせフォームを作れるので安心してください。

Contact Form by WPFormsの使い方

完成したお問い合わせフォーム
完成したお問い合わせフォーム

画像を入れたおしゃれなお問い合わせフォームを作ります。

WPFormsではHTMLやCSSの知識がなくても、簡単にお問い合わせフォームを作成できます。

カスタマイズは、ドラッグ&ドロップと文字の書き換えだけで完了

カスタマイズは、ドラッグ&ドロップと文字の書き換えだけで完了します。

Shota

超簡単なので15分で作れますよ。

お問い合わせフォームの雛形を選択する

WPFormsには。お問い合わせフォームの雛形が用意されています。

まずは雛形を選びましょう。

お問い合わせフォーム入力画面を表示させる
お問い合わせフォーム入力画面を表示させる

ダッシュボードから【WPForms】を選択します。

上図のような画面が表示されたら【フォームの作成】をクリックします。

クリックするとお問い合わせフォームの作成画面が表示されます。

お問い合わせフォームの雛形の選択
お問い合わせフォームの雛形の選択

入力画面が表示されたら【フォームの名前を付ける】という項目に「お問い合わせフォーム」と入力します。

Simple Contact Form(簡単なお問い合わせフォーム)が雛形になるので選択しましょう。

以前のお問い合わせフォーム作成画面は日本語表記でしたが、プラグインのバージョンアップにより英語表記に変更されました。

Contact Form by WPFormsでお問い合わせフォームをカスタマイズする

雛形の初期設定は英語表記

お問い合わせフォームの雛形は英語表記になっています。

日本語表記にカスタマイズしたお問い合わせフォーム

雛形を日本語表記にカスタマイズします。

お問合せフォームのカスタマイズはフィールド項目の一般画面から行う

お問い合わせフォームのカスタマイズはフィールド項目の一般画面から行います。

【フィールド】⇒【フィールド設定】⇒【一般】へとページを進めましょう。

名前入力欄を日本語に修正する

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

名前入力欄をクリックして、修正画面を表示させます。

名前入力欄を以下のように修正します。

項目修正方法
ラベル「name」を「お名前」に修正
フォーマット「シンプル」を選択
⇒名前入力欄が2つから1つになる
説明「ご担当者のお名前を入力ください」と入力
必須「ON」にする
⇒名前の入力が必須になる
完成した名前入力欄
完成した名前入力欄

これで名前入力欄の修正は完了です。

メールアドレス入力欄を日本語に修正する

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

メールアドレス入力欄をクリックして修正画面を表示させます。

メールアドレス入力欄を以下のように修正します。

項目修正方法
ラベル「Email」を「メール」に修正
必須「ON」にする
⇒メールアドレスの入力が必須になる
確認メールを有効化「ON」にする
⇒確認用のメールアドレス入力項目が追加される
完成したメールアドレス入力欄
完成したメールアドレス入力欄

これでメールアドレス入力欄の修正は完了です。

お問い合わせ内容入力欄を日本語に修正する

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

お問い合わせ内容入力欄をクリックして修正画面を表示させます。

お問い合わせ内容入力欄を以下のように修正します。

項目修正方法
ラベル「Comment or Message」を「お問い合わせ内容」に修正
説明「ご不明点やお問い合わせ内容をご記入ください」と入力
必須「ON」にする
⇒お問い合わせ内容の入力が必須になる
完成したお問い合わせ内容入力欄
完成したお問い合わせ内容入力欄

これでお問い合わせ内容入力欄の修正は完了です。

法人名記入欄を作成する

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

【フィールドを追加】をクリックし、画面が切り替わったら【一行のテキスト入力】を選択します。

次にお問い合わせフォームの一番上の部分に、ドラック&ドロップします。

【一行のテキスト入力】という入力欄が追加されます。

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

【フィールドのオプション】⇒【一般】 の画面に戻りましょう。

【一行のテキスト入力】 をクリックして修正画面を表示させます。

【一行のテキスト入力】を以下のように修正します。

項目修正方法
ラベル「法人名(屋号)」と入力
必須「OFF」にする

法人名(屋号)記入の必須をOFFにしないと、個人でお問い合わせしてきた人が困ります。

完成した法人名入力欄
完成した法人名入力欄

これで法人名記入欄の作成は完了です。

送信ボタンを日本語化する

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

送信ボタンの日本語化は設定項目の一般画面から行います。

【設定】⇒【一般】へとページを進めましょう。

送信ボタンを以下のように修正します。

項目修正方法
「送信」ボタンのテキスト「Submit」を「送信」に修正
「送信」ボタン処理テキスト「Sending…」を「送信中…」に修正
完成した送信ボタン
完成した送信ボタン

これで送信ボタンの日本語化は完了です。

カスタマイズが完了したお問い合わせフォーム
カスタマイズが完了したお問い合わせフォーム

これでお問い合わせフォームのカスタマイズは完成です。

いったん右上に表示されている保存ボタンをクリックしましょう。

お問い合わせフォームを保存ができない場合の対処法
お問い合わせフォームを保存ができない場合に表示される画面
お問い合わせフォームを保存ができない場合に表示される画面

WPFormsで作ったお問い合わせフォームを保存しようとすると、上図のようにエラーが発生する場合があります。

これは使用しているレンタルサーバーが誤って発動したセキュリティ機能によるものです。

あなたがお使いのレンタルサーバーのWAF設定を一時的にOFFにしましょう。

WAF設定の無効化方法
WAF設定の無効化方法

ロリポップの場合サイト管理画面から、ドメインごとにWAF設定を無効にすることができます。

保存ボタンを押してエラーが発生した場合は、レンタルサーバーのWAF設定をOFFにしましょう。

フェニック

お問い合わせフォームが完成したらONに戻してね。

Contact Form by WPFormsで自動返信メールを作成する

読者への自動返信メール(スマホ画面)
読者への自動返信メール(スマホ画面)

自動返信メールとは、読者にメールを受信した旨を知らせる返信メールのことです。

通知設定の初期画面
通知設定の初期画面

自動返信メールの設定は設定項目の通知画面から行います。

【設定】⇒【通知】へとページを進めましょう。

WPFormsの初期設定では、自動返信メールは読者には届きません。

自動返信の宛先が自分だけに設定されているからです。

自動返信メールの設定は、以下のように設定しましょう。

読者さんへの返信メールを作成方法①
読者さんへの返信メールを作成方法①
項目記入内容
メールアドレスに送る{field_id=”1″},{admin_email}
メールの件名お問い合わせありがとうございます。
送信者名※メディア名
送信元メールアドレス{admin_email}
返信先メールアドレス{field_id=”1″}
メールメッセージお問い合わせにありがとうございます。
3日以内にご返信させていただきます。
{all_fields}

【メールアドレスへ送る】の項目には{field_id=”1″},{admin_email} と入力しますが、以下の手順で入力します。

  1. デフォルトで記入してある{field_id=”1″} の後ろにカンマ(,)を記入
  2. 【スマートタグを表示】をクリック
自動返信メールの完成図
自動返信メールの完成図

これで自動返信メールを設定は完了です。

フェニック

{field_id=”1″} やら{all_fields}やら意味が分からない文字列が多すぎる。

Shota

ここは解説が必要ですね。

文字列文字列の意味
{admin_email}WordPressに登録している自分のメールアドレスにも、自動返信メールを送信する
{field_id=”1″}お問い合わせをくれた読者に自動返信メールを送信する
{all_fields}読者がお問い合わせフォームに入力した全ての内容を送信する

{admin_email}のWordPressに登録しているメールアドレスは、ダッシュボードから【設定】⇒【一般設定】をクリックすれば確認できます。

WordPressに登録しているアドレスの確認方法
WordPressに登録しているアドレスの確認方法

また【メールアドレスを送る】の項目に {field_id=”1″},{admin_email} と入力すると、自動返信メールを読者と自分に送信することができます。

Contact Form by WPFormsで送信完了の確認画面を作成する

 送信完了後の確認画面
送信完了後の確認画面

確認画面とは、読者にメール送信完了の旨を伝える表示画面のことです。

確認画面の設定は設定項目の確認画面から行う

確認画面の設定は設定項目の確認画面から行います。

【設定】⇒【確認】へとページを進めましょう。

確認画面の初期設定
確認画面の初期設定

WPFormsの初期設定では、確認画面のメッセージが英語表記になっています。

日本語に修正しましょう。

以下のように設定してください。

項目選択または記入内容
確認タイプメッセージ
確認メッセージお問い合わせにありがとうございます。
3日以内にご返信させていただきます。
サイト名、サイト管理者の名前
確認メッセージまで自動的にスクロールするONにする
お問い合わせフォーム送信後、画面に表示されるメッセージの完成図
確認画面の完成図

これで確認画面の設定は完了です。

確認タイプの設定について
確認タイプの選択方法
確認タイプの選択方法

【確認タイプ】は「メッセージ」「ページを表示」「URLに移動(リダイレクト)」の3つから選択できます。

確認タイプの種類送信後の確認画面の表示内容
メッセージメッセージ送信後、作成した確認画面が表示される
ページを表示メッセージ送信後、設定した固定ページを表示させる
URLに移動(リダイレクト)メッセージ送信後、設定したURLページを表示させる
「URLに移動(リダイレクト)」の設定方法
「URLに移動(リダイレクト)」の設定方法

読者に見て欲しいキラーページがある場合は「URLに移動(リダイレクト)」を選択し、表示させたいURLを設定してください。

お問い合わせフォームのショートコードを固定ページに貼り付ける

お問い合わせフォームのショートコードをコピーする
お問い合わせフォームのショートコードをコピーする

ダッシュボードに戻り【WPForms】⇒【すべてのフォーム】 の画面を表示させます。

先ほど作ったお問い合わせフォームのショートコードをコピーします。

お問い合わせフォームのショートコードを固定ページに貼り付ける方法①
お問い合わせフォームのショートコードを固定ページに貼り付ける方法①

ダッシュボードから【固定ページ】⇒【新規追加】を選択します。

お問い合わせフォームのショートコードを固定ページに貼り付ける方法②
お問い合わせフォームのショートコードを固定ページに貼り付ける方法②

題名に「お問い合わせ」と入力し、お問い合わせフォームのショートコードを貼り付けます。

Shota

これでもOKですが、画像を貼っておしゃれにしました。

画像を貼り付ける
画像を貼り付ける

ショートコードの上部に好きな画像を貼り付けます。

お問い合わせフォームのURLを決める
お問い合わせフォームのURLを決める

URLスラッグにcontact-formと入力し、お問い合わせページのURLを決定します。

noindex指定する方法
noindex指定する方法

最後にお問い合わせページをnoindex指定し、公開すれば完了です。

フェニック

どうしてお問い合わせページにnoindex指定するんだ?

Shota

お問い合わせページには価値ある情報が書かれていない。だからindexさせるとGoogleに低品質コンテンツと評価されるよ。

お問い合わせフォームをグローバルメニューに設置する

お問い合わせフォームが設置されたトップページ
お問い合わせフォームが設置されたトップページ

WPFormsで作ったお問い合わせフォームを、グローバルメニューに設置する方法を解説します。

お問い合わせフォームをグローバルメニューに設置する方法①
お問い合わせフォームをグローバルメニューに設置する方法①

ダッシュボードから【外観】⇒【メニュー】を選択します。

画面が表示されたら【新しいメニューを作成しましょう。】をクリックします。

お問い合わせフォームをグローバルメニューに設置する方法②
お問い合わせフォームをグローバルメニューに設置する方法②

新しいページが開いたら、以下の手順で作業を進めます。

  1. メニュー名に「ヘッダーナビゲーション」と入力
  2. グローバルナビ(現在の設定:ヘッダー)にチェックを入れる
  3. メニューの作成をクリック
お問い合わせフォームをグローバルメニューに設置する方法③
お問い合わせフォームをグローバルメニューに設置する方法③

メニュー作成ページが表示されます。

  1. 固定ページの項目の【お問い合わせ】にチェックを入れる。
  2. 【メニューの追加】をクリック
  3. お問い合わせがメニュー名に追加される
  4. メニュー設定の【グローバルナビ】にチェックを入れる
  5. 【メニューの保存】をクリック
お問い合わせフォームの設置完成図
お問い合わせフォームの設置完成図

これでグローバルメニューへのお問い合わせフォームの設置は完了です。

Contact Form by WPFormsでお問い合わせフォームにreCAPTCHAを設定する

お問い合わせフォームにreCAPTCHAが表示された画像

Word Pressでお問い合わせフォーム運用していると、英語のスパムメールが送られてきます。

ブログのアクセス数が伸びると、1日に1,000件以上スパムメールが送られてくることもあります。

そこでスパムメールからブログを守る機能を持つ、reCAPTCHAの設定方法を解説します。

Shota

reCAPTCHAはGoogleの無料サービスなので安心して利用できますよ。

Google reCAPTCHAにアクセスし、サイトキーとシークレットキーを入手

reCAPTCHA設定方法①
reCAPTCHA設定方法①

まずはGoogle reCAPTCHAにアクセスします。

⋙Google reCAPTCHAへ

Googleへのログインが求められるので、事前にアカウントを準備しておいてください。

【v3 Admin Consile】をクリックします。

eCAPTCHA設定方法②
reCAPTCHA設定方法②

サイト登録する画面が表示されるので【+】をクリックします。

reCAPTCHA設定方法③
reCAPTCHA設定方法③

次にサイト情報を入力します。

以下のように入力、選択をしてください。

入力、選択項目入力、選択方法
ラベルドメイン名を入力
reCAPTCHAreCAPTCHA v3を選択
ドメインドメイン名を入力
reCAPTCHA利用条件に同意するチェックを入れる
アラートをオーナーに送信するチェックを入れる

送信を押してサイト登録は完了です。

なお、ドメイン名入力で「https://」を間違えて入力するとエラーが発生します。

reCAPTCHAにはいくつか種類がありますが、今回はreCAPTCHA v3を使用します。

reCAPTCHA v3はサイトのバックグラウンドでスパムメールを判定することができます。

reCAPTCHAv2以前のバージョンでは「画像のタイル」を選択させたり「私はロボットではありません」をチェックさせることで、スパムメールを判定していました。

階段のタイルの選択画像
階段のタイルの選択画像
フェニック

階段のタイルを選択する問題が難しすぎて、お問い合わせメール送信できなかったぞ。

Shota

reCAPTCHA v3なら、読者さんを困らせることはありません。

reCAPTCHA設定方法④

サイト登録が終わったら、サイトキーとシークレットキーが発行されます。

両方ともコピーしましょう。

Contact Form by WPFormsにサイトキーとシークレットキーを貼り付ける

reCAPTCHA設定方法⑤
reCAPTCHA設定方法⑤

Word Pressのダッシュボードに戻ります。

WPFormの【設定】を選択し【CAPTCHA】をクリックします。

reCAPTCHA設定方法⑥
reCAPTCHA設定方法⑥

CAPTCHAの登録画面が表示されるので、以下のように入力、選択をしましょう。

項目入力、選択方法
CAPTCHAreCAPTCHA画像を選択
タイプreCAPTCHA v3を選択
サイトキーGoogle reCAPTCHAで取得したものを入力
シークレットキーGoogle reCAPTCHAで取得したものを入力

【設定を保存】をクリックすれば作業完了です。

reCAPTCHA v3の設定が反映されているか確認する

reCAPTCHAの反映を確認する方法
reCAPTCHAの反映を確認する方法

お問い合わせページを表示させます。

画面右下にreCAPTCHA画像が表示されていれば、reCAPTCHA v3の設定が反映されています。

Contact Form by WPFormsに関する疑問点

Contact Form by WPFormsについてよくある疑問点をまとめました。

Contact Form by WPFormsで作った自動返信メールが読者に届かない

自動返信メールが届かない理由は、自動返信メールが迷惑メール扱いされるためです。

管理者メールアドレスをgmailに設定した画像

WordPressの一般設定で、管理者メールアドレスをgmailに設定した場合を例に解説します。

自動返信メール(gmail)はレンタルサーバーを経由するため届かない

自動返信メールはgmailから送信されますが、レンタルサーバーを経由します。

レンタルサーバーはメールの配信を専門的に取り扱っているわけではありません。

そのため自動返信メールが適切に処理されず、迷惑メール扱いされるのです。

WP Mail SMTP by WPForms の画像
WP Mail SMTP by WPForms

自動返信メールを読者に確実に届けるには、WP Mail SMTP by WPFormsというプラグインの導入が有効です。

WP Mail SMTP by WPFormsを使用すると、自動送信メールがSMTPサーバーを経由して読者に送信される

WP Mail SMTP by WPFormsを使用すると、自動送信メールがSMTPサーバーを経由して読者に送信されます。

SMTPサーバーはメール送信に特化したサーバーなので、迷惑メール扱いされることはありません。

WP Mail SMTP by WPFormsについてはWP Mail SMTP by WPFormsの使い方【無料】で解説しています。

Contact Form 7とContact Form by WPFormsのどちらがおすすめ?

Contact-form-7

結論はContact Form by WPFormsがおすすめです。

HTMLやCSSの知識がなくても、お問い合わせフォームをカスタマイズできるからです。

Contact Form 7でお問い合わせフォームを作る場合、入力項目を増やすにはHTMLとCSSの知識が必要となります。

Contact Form by WPFormsで入力項目を追加する方法
Contact Form by WPFormsで入力項目を追加する方法

Contact Form by WPFormsは、標準フィールドのブロックをドラッグ&ドロップするだけで入力項目を追加できます。

カスタマイズが簡単なため、Contact Form by WPFormsがおすすめです。

Contact Form 7からContact Form by WPFormsへ引っ越しする方法

Contact Form 7からContact Form by WPFormsへの引っ越し方法①
Contact Form 7からContact Form by WPFormsへの引っ越し方法①

ダッシュボードから【WPForms】⇒【ツール】を選択します。

【他のプラグインフォームからのインポート】の項目をクリックすると、Contact Form 7が表示されるため選択します。

インポートをクリックします。

Contact Form 7からContact Form by WPFormsへの引っ越し方法②
Contact Form 7からContact Form by WPFormsへの引っ越し方法②

フォームインポートの画面が表示されたら、コンタクトフォーム1と記載された項目が表示されるので、チェックを入れインポートをクリックします。

Contact Form 7からContact Form by WPFormsへの引っ越し方法③
Contact Form 7からContact Form by WPFormsへの引っ越し方法③

ダッシュボードに戻り【WPForms】⇒【すべてのフォーム】を選択します。

コンタクトフォーム1が表示されていたら引っ越し完了です。

WPFormsで引っ越ししたお問い合わせフォームをカスタマイズしてみてください。

Contact Form by WPFormsを有料プランにするメリットは?

Contact Form by WPFormsの有料プランでは以下のサービスが追加されます。

異なる自動返信メールを、自分と読者に分岐して通知できる
異なる自動返信メールを分岐して通知できる
  • 有料テンプレートの使用できる
  • 有料のフィールドを使用できる(電話番号、住所、サイトURLの入力欄)
  • 異なる自動返信メールを、自分と読者に分岐して通知できる

ただこれらの機能は、個人ブロガーには必要ないので気にしなくてOKです。

Contact Form by WPFormsでお問い合わせフォームを作った後にすべきことは?

プライバシーポリシーには連絡先の入力が必要になります。

以下の画像のようにプライバシーポリシーの連絡先にお問い合わせフォームへのリンクを貼りましょう。

プライバシーポリシーのお問い合わせフォームへのリンクの貼り方
プライバシーポリシーのお問い合わせフォームへのリンクの貼り方
フェニック

これでGoogleアドセンス審査への準備はばっちりだね。

なおプライバシーポリシーの作り方は【コピペOK】ブログ向けプライバシーポリシーと免責事項の書き方で詳しく解説しています。

まとめ

まとめ

今回は簡単にお問い合わせフォームを設置できる、Contact Form by WPFormsの使い方について解説しました。

以下の手順で簡単にお問い合わせフォームを作成できます。

  1. お問い合わせフォームの雛形を選択する
  2. お問い合わせフォームをカスタマイズする
  3. 自動返信メールを作成する
  4. 送信完了の確認画面を作成する
  5. ショートコードを固定ページに貼り付ける
  6. グローバルメニューに設置する

Contact Form by WPFormsを使えばHTMLやCSSの知識がなくても、おしゃれなお問い合わせフォームを作成できます。

本記事を参考にお問い合わせフォームを作ってください。

なお、お問い合わせフォームの設置以外にもブログ立ち上げ時はやることが多いですよね。

以下の記事でもブログ運営ノウハウを解説しているのでぜひご覧ください。

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

コメント

コメントする

コメントに日本語が含まれない場合は表示できません(スパム対策)

目次
閉じる