簡単にお問い合わせフォームが作れるプラグイン「Contact Form by WPForms 」の設定と使い方

ブログ運営において「お問い合わせフォーム」というのはとても大切なものです。

お問い合わせフォームは運営者とユーザーをつなぐ架け橋でありながら、「連絡が取れる」という真っ当な運営の証明でもあります。また、クローズドASPからの招待やちょっとした儲け話など、おいしい話は大抵お問い合わせフォームより連絡があるものです。

今回は、そんなお問い合わせフォームを簡単に作成できるプラグイン「Contact Form by WPForms」をご紹介します。初心者でも簡単に導入できるので、ぜひ試してみてください。

Contact Form by WPFormsの特徴

簡単操作で高機能なContact Form by WPFormsは、初心者・中級車を問わずおすすめなプラグインです。

一番の魅力はコマンドによる操作を必要としないこと。たったの5ステップで綺麗なお問い合わせページを作ることができます。

また、シンプルながらも多機能であり、スパム対策などもバッチリ。「Contact Forms7」と機能面では大差ないのですが、直感的に操作できる点でこちらの方が便利だと思います。

---

Contact Form by WPFormsの導入

それではプラグインの導入方法の解説に移ります。
ダウンロード数500万超え、最新のWordPressにも対応している公式プラグインなので、安心して使用してください。

インストールと有効化

まずはプラグインの「新規追加」から「Contact Form by WPForms」で検索します。上の方に出てくると思うので、見つかったらインストールと有効化をしましょう。

導入に関しては以上です。
特に初期設定も必要ないので、このままプラグインを使ってお問い合わせフォームを作っていきます。

---

Contact Form by WPFormsの使い方

それでは実際にお問い合わせフォームを作っていきます。今回は無料で使える機能の範囲内で紹介しますね。

1.テンプレートを選択

まずはフォームの作成に取り掛かります。
サイドバーに「WPForms」が設置されているので、そこから「新規追加」を選択します。

テンプレート選択画面に移ったら、上部にフォームの名前を入力します。自分しか見ることがないため、適当な分かりやすい名前を付けましょう。

次にテンプレートを選択します。色々ありますが、今回はSimple Contact Form(シンプルな問い合わせフォーム)を選択します。

2.フィールドの設置と編集

続けて、フィールドと呼ばれる入力欄を追加・編集して、自分好みのお問い合わせフォームに変更していきます。

フィールドの編集

フィールドの編集は以下の手順で行います。

1. 編集したいフィールド（パーツ）をクリック
2. ラベルを変更(テンプレートはデフォルトが英語です)
3. フォーマットを変更
4. お好みで必須にチェック(スパム対策になります)

また、フィールドのドラッグ＆ドロップで配置の変更なども可能です。

フィールドの追加

他にもフィールドを追加したい場合は、「フィールドを追加」を開いて、好きなフィールドをドラッグ＆ドロップで追加します。

フィールドを追加した後は忘れず編集をしましょう。

3.フォームの設定をする

続いてフォームの設定をしていきます。
フォーム作成ページの左サイドバーに「設定」があるのでクリックします。

一般：フォームの概要を設定

「一般」ではフォームの名前や送信ボタンの編集ができます。下記の項目だけ設定しましょう。

フォーム名	このフォームの名前 自分の分かりやすい名前ならOKです
送信ボタンのテキスト	問い合わせの送信ボタン 「送信」など分かりやすいものにしましょう
送信ボタンの処理中テキスト	問い合わせの送信中に表示されるテキスト 「送信中」や「sending…」などにしましょう
スパム対策保護を有効化	ハニーポット（スパム攻撃を代わりに受けるおとり）が有効になります ONにしましょう

通知：自動送信メールを設定

お問い合わせ送信後の自動メールの設定です。

受け取ったことの確認と自分への通知のために、相手と自分の両方に送られるよう設定しましょう。

・{admin_email}：サイト運営者のメールアドレス(WordPress側の「設定」に入力されている)
・{field_id=”1″}：お問い合わせで入力されたメールアドレス(相手のメアド)。idはフィールドの設置箇所で変わります
・{all_fields}：お問い合わせで入力された内容

下記の表はおすすめの設定です。よく分からない方はこちらを参考にしてください。

メールアドレスへ送る	自動メールの送信先 相手のメールアドレス fieled_id=”1″を追加しましょう 例： {admin_email},{field_id=”1″}
メール件名	自動メールのタイトル 例：サイト名｜お問い合わせ内容の確認
フォーム名	設定でONにしない限りは表示されません 例：サイト名
送信者名	自動メールの送信者名 例：サイト名｜運営者名
送信元メールアドレス	自動メールの送信元アドレス 管理者のメールアドレス {admin_email} のままでよし
返信先メールアドレス	自動メールへ返信する際に、自動で入力される送信先 相手のメールアドレス {field_id=”1″} のままでよし
メールメッセージ	自動メールの内容 （例） ※このメールはシステムによる自動返信です 以下の内容でお問い合わせを受け付けました。 {all_fields}

確認：お問い合わせ直後のアクション設定

お問い合わせを送信した直後のアクションを、以下の三つから設定できます。

メッセージ	ページにテキストを表示する
ページを表示	他の固定ページへ移動させる
リダイレクト	それ以外のページへ移動させる

お問い合わせフォームであれば「メッセージ」が無難です。メールマガジンや会員登録フォームの場合は「ページを表示」や「リダイレクト」も活用してみてください。

4.お問い合わせページを作成

フォームが完成したら、次はページを作成します。

新規で固定ページを作成します。タイトルとパーマリンクさえ設定すれば、中身は真っ白でも大丈夫です。

5.フォームを設置する

お問い合わせページに先ほど作成したフォームを設置します。

新しくWPFormsブロックが追加されているのでクリックして、作成したフォームを選択すれば設置完了です。

補足：個人情報保護方針の追加方法

お問い合わせフォームを送信する前に「個人情報の取り扱いについて同意してください」というチェックボックスを見たことがあるかと思います。

あれもWPFormsで作成できるので、簡単に作成方法を紹介します。

---

スパム対策にreCAPTCHAと連携する方法

最後に、スパム対策ツールの「reCAPTCHA」と連携する方法を紹介します。

reCAPTCHAを導入しておけば、botによるスパムメールを一定数減らすことができます。簡単なのでぜひやってみてください。

1.reCAPTCHAのキーを取得する

まずはGoogle reCAPTCHAのサイトへアクセスします。
サイトへ入ったら上部の「v3 admin console」をクリックして、Googleアカウントでログインしましょう。

上の＋をクリックして、reCAPTHCAの作成に取り掛かります。（すでにreCAPTCHAを持っている場合は、右の歯車マークのページからキーを取得可能です）

以下の画像と表を見本に設定してください。

ラベル	自分の分かりやすい名前に設定
reCAPTCHAタイプ	自分の好きなタイプを選択します v3：スコアにより自動で人間かどうかを判別 v2：チェックボックスなどのアクションで判別
ドメイン	サイトのドメインを入力(URLの赤字部分) https://〇〇.com/
reCAPTCHA利用条件に同意する	利用規約を読んでチェック
アラートをオーナーに送信する	念のためチェック推奨

reCAPTCHAタイプはv2でもv3でも大丈夫です。特にこだわりがないなら最新のv3にしておきましょう。入力が終わったら送信をクリックして次へ行きます。

登録が終わるとサイトキーとシークレットキーが表示されます。この2つのキーは後ほど使うので、ページは開いたままにしておいてください。

2.Contact Form by WPFormsでキーを設定

続いてプラグイン側の設定を行っていきます。

まずはサイドバーの「WPForms」 > 「設定」を開き、CAPTCHAのタブにあるreCAPTCHAを選択します。

reCAPTCHAの設定画面が開いたら、自分のreCAPTCHAのタイプを選択し、先ほど取得したサイトキーとシークレットキーを貼り付けます。

※もし他のreCAPTCHAを使うプラグインと競合した場合は、下の方にある「無競合モード」にチェックを入れてみてください

キーの入力が終わったら「設定を保存」ボタンをクリックして、設定は完了です。

3.フォームのreCAPTCHAを有効化する

最後に、フォームにreCAPTCHAを導入しましょう。

「WPForms」> 「すべてのフォーム」から先ほど作ったフォームを選択します。

フォームの編集画面に移ったら、「reCAPTCHA」のフィールドがあるのでクリック。
※「保存を忘れると有効化されませんよ」という旨のポップアップが表示されます

フォームの右上にreCAPTCHAマークが追加されているのを確認したら、右上のボタンで保存しましょう。

以上でreCAPTCHAの導入は完了です。

お問い合わせページを見てみると、v2の場合はフォームの下にチェックボックスが追加、v3の場合はページの右下にバッジが表示されているはずです。問題なく表示されていれば作業終了、お疲れ様でした。

---

主なエラーと対処法

実際にWPFormsを使って起きたエラーとその対処法を紹介します。

ここにないエラーについてはトラブルシューティングを参考にしてください。

Javascriptの読み込みエラー

注意してください！ WPForms は、このページで JavaScript の問題を検出しました。このフォームが正しく機能するには JavaScript が必要であるため、このフォームは期待どおりに機能しない可能性があります。詳細についてはトラブルシューティングガイドを参照するか、サポートにお問い合わせください。

設置ページのエラー表示（管理者のみ確認できる）

reCAPTCHAで使用するJavascriptを読み込めなかった場合に発生するエラー。

主な原因は「Javascriptの非同期読み込み」です。Chromeのデベロッパーツールを開けば、エラーが発生しているのが確認できるはずです。

非同期読み込みをやめるか、reCAPTCHAを外すことで解消できます。

フォームの保存エラー

フォームの保存中に問題が発生しました。ページを再読み込みして、もう一度お試しください。
この動作が続く場合は、プラグインサポートチームへ連絡してください。

フォーム保存時のエラー表示

フォームを保存できないというエラーです。主な原因はサーバーのWAFです。
※WAF：脆弱性を突いたハッキングを検出・低減するセキュリティ

使用しているレンタルサーバーの管理画面から、WAFを無効化すれば解消できます。

WAFの無効化についてはこちらも参考になります。
wpFormsの「フォームを保存中に問題が発生しました」の対処法

reCAPTCHAのサイト所有者エラー

reCAPTCHA上に “サイト所有者のエラー:サイトキーが無効です” と表示されるエラー。

原因はサイトキーの入力ミスか、サイトキー反映までのタイムラグです。

1分ほど時間を置いてから再読み込みしても消えない場合は、もう一度reCAPTCHAの設定が間違っていないか確認しましょう。

プラグインの競合

プラグインが競合してreCAPTCHAが表示されないケースもあります。

そういった場合は、CAPTCHA設定から無競合モードをONにしてみましょう。

---

補足：お問い合わせページ以外で読み込まない

WPFormsはお問い合わせページでしか使うことがないプラグインです。

つまり、他のページで読み込む必要が全くありません。ページの表示速度を下げるだけです。

少しでも表示速度を改善したいなら、Plugin Load Filterを使ってお問い合わせページでのみ読み込むよう設定しましょう。

まとめ

以上、Contact From by WPFormsの導入からreCAPTCHAとの連携までを解説しました。

お問い合わせフォームはブログ運営において必須です。このプラグインならコードや難しい操作を必要とせず、誰でも簡単に綺麗なフォームが作れるので、ぜひ導入してみてください。