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

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

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

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

プラグインはテーマや他のプラグイン・WordPressのバージョン次第では、正常に動作しないことがあります。安全なプラグインのみを紹介しておりますが、導入される際は自己責任でお願いします。

目次

Contact Form by WPFormsの特徴

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

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

Contact Form by WPFormsでお問い合わせフォームを設置するまでのステップ

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

  • ドラッグ&ドロップで直感的に作成可能
  • コマンド入力などの面倒な操作がない
  • チェックボックスやラジオボタンなど豊富なパーツが揃っている
  • お問い合わせ後のページ遷移やメッセージ表示も設定可能
  • 問い合わせをしたユーザーへの自動返信機能あり
  • 「reCAPTCHA」と連携することでスパム対策もバッチリ
    ※有料版は更に機能が豊富です

ContactForm7でreCAPTCHAがうまく使用できない人は、このプラグインを使うのが良いと思います

Contact Form by WPFormsの導入

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

インストールと有効化

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

Contact Form by WPFormsのインストール画面

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

Contact Form by WPFormsの使い方

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

1.テンプレートを選択

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

WPFormsの「新規追加」ボタン

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

Contact Form by WPFormsのテンプレート選択

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

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

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

フィールドの編集

Contact Form by WPFormsのフィールド編集

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

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

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

フィールドの追加

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

Contact Form by WPFormsのフィールド追加

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

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

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

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

WPFormsのお問い合わせフォームの一般設定

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

  • フォーム名:フォームの名前です。自分が分かる名前なら大丈夫です。
  • 送信ボタンのテキスト:「送信」など分かりやすいものにしましょう。
  • 送信ボタンの処理中テキスト:「送信中…」などシンプルなもので。
  • スパム対策保護を有効化:ハニーポットが有効になります。ONにしておきましょう。
    ※ハニーポット:スパム攻撃を代わりに受けるおとり

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

相手への自動返信と自分へ通知するメールを設定します。ここの設定は非常に重要です。ここを間違えると意図しないメールが自分や相手に届くので注意しましょう

WPFormsの通知設定
画像のとおり設定してください

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

・メールアドレスへ送る

お問い合わせ後に自動で送信されるメールの送信先。
デフォルトでは{admin_email}(管理者のメアド)だけなので、相手のメールアドレスも追加しましょう

右上の「スマートタグを表示」 > Emailを選択 > {field_id=”1″}が入力される
※コンマ「,」で分けられてるか確認してください

・Email Subject Line

メールのタイトルです。
「サイト名|お問い合わせ」や「お問い合わせありがとうございます」あたりが無難化と思います。

・送信者名

メールの送信者名です。
「サイト名」、もしくは「サイト名+運営者名」にしておきましょう。

・送信元メールアドレス

メールの送信元です。
デフォルトで管理者のメールアドレス{admin_email}が入っているので、そのままで大丈夫です。

・Reply-To Email Address

メールの返信先です。
デフォルトで相手のメールアドレスが入っているので、そのままで大丈夫です。

・Email Message

メールの本文です。
自動返信であるという一文と{all_fields}(問い合わせ内容)は入れておきましょう。

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

WPFormsの確認設定

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

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

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

ここまで設定し終えたなら画面右上の保存をクリック

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

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

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

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

5.フォームを設置する

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

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

WPFormsのブロック

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

WPFormsとreCAPTCHAを連携するまでの流れ

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

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

1.reCAPTCHAのキーを取得する

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

Google reCAPTCHAのトップページ

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

Google reCAPTCHAの登録ボタン

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

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

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

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

reCAPTCHAのキー

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

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

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

WPFormsのreCAPTCHAの設定1

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

WPFormsのreCAPTCHAの設定2

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

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

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

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

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

WPFormsのフォーム選択画面

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

WPFormsでreCAPTCHAを有効化する

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

フォームにreCAPTCHAが有効化されているのを確認

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

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

お問い合わせページにreCAPTCHAが追加されているのを確認

まとめ

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

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

目次
目次
閉じる