![](https://www.nomad-hacks.org/wp-content/uploads/2020/05/guchiwo.jpg)
こんにちは、場所にとらわれない働き方を実践している複業ノマドワーカーのぐちを(@guchiwo_nomad)です。
![](https://www.nomad-hacks.org/wp-content/uploads/2020/05/man-question.png)
![](https://www.nomad-hacks.org/wp-content/uploads/2020/05/man-question.png)
![](https://www.nomad-hacks.org/wp-content/uploads/2020/05/man-question.png)
WordPrssでお問い合わせフォームを設置できるプラグインの中で、Contact Form by WPFormsが気になってるので導入してみたいです。
設定方法とか使い方が気になってます。
こんな疑問にお答えしていきます。
WordPressでお問い合わせフォームを設置可能なプラグインと言えばContact Form 7が有名ですが、Contact Form by WPFormsでも同様に設置可能です。
むしろContact Form by WPFormsのほうが、HTMLの知識一切不要で直感的な操作でお問い合わせフォームを設置可能なので、初心者にはこちらがおすすめと言えます。
この記事ではContact Form by WPFormsの
・インストールと初期設定の手順
・使い方(お問い合わせフォームや自動返信メールの設定など)
を解説しますので、ぜひ参考にしてみてください。
Contact Form by WPFormsとは?
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/b071f5d191452a5669aa65c58b9d0c84.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/b071f5d191452a5669aa65c58b9d0c84.jpg)
Contact Form by WPFormsは、WordPressで作成したサイトにお問い合わせフォームを簡単に設置できるプラグインです。
特徴
Contact Form by WPFormsの、主な特徴は以下の通り。
- UIが分かりやすくて使いやすい
- 操作のほぼ全てがドラック&ドロップで完結(HTMLやCSSの知識は不要)
- プレビューで確認しながら設定が可能
- 他のプラグインからデータを移行できる
基本的なお問い合わせフォームの設置では、HTMLやCSSの知識は一切必要ありません。
また、UIに関してもContact Form 7より優れている印象を受けますね。
プランと料金
無料版とPro版(有料版)の2種類があります。
無料版でもお問い合わせフォームの主要な機能は使えるので、基本的には無料版の利用で十分です。
Contact Form by WPFormsのインストール手順
Contact Form by WPFormsのインストール手順を解説します。
まずは、WordPressの管理画面から「プラグイン」→「新規追加」と移動します。
検索ボックスに「Contact Form by WPForms」と入力して「今すぐインストール」をクリックし、有効化まで行いましょう。
いかにも欧米チックな熊のキャラクターが目印ですね。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/e8aac13a3dbfb84396d5c83d217468de.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/e8aac13a3dbfb84396d5c83d217468de.jpg)
これだけでインストールは完了で、すぐにウェルカムページへと移ります。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/84aba39b85104ea76f2444c9c19d6285.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/84aba39b85104ea76f2444c9c19d6285.jpg)
Contact Form by WPFormsの設定方法・使い方
ここからは、Contact Form by WPFormsの設定方法・使い方を解説します。
機能拡張できる有料のPro版もありますが、ここでは無料で使える範囲内で説明しますね。
①テンプレートを選択する
インストールが完了するとダッシュボードに「WPForms」が追加されているので、こちらから「新規追加」をクリックします。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/d582c18f8460a6c2417e201db6790845.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/d582c18f8460a6c2417e201db6790845.jpg)
セットアップ画面に遷移するので、こちらからテンプレートを選びます。
テンプレートの種類は
・空のフォーム
・簡単なお問い合わせフォーム
・メールマガジン登録フォーム
・提案フォーム
の4種類があります(2021年1月時点)。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/8a381a01deffa07d739f5582d32a9739.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/8a381a01deffa07d739f5582d32a9739.jpg)
空のフォーム
空のフォームは、マニュアルでお問い合わせフォームを作成していくイメージです。
以下はGIF画像ですが、このようにドラッグ&ドロップで操作し、設定していきます。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/Jan-05-2021-18-43-15.gif)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/Jan-05-2021-18-43-15.gif)
簡単なお問い合わせフォーム
マニュアルで作成せずとも、簡素なお問い合わせフォームはこちらで利用可能です。
とりあえず簡単で良いので、お問い合わせを受け付けられる状態にしたいという方におすすめですね。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/a8d5d604f41ee3da542fa79c83ff4cde.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/a8d5d604f41ee3da542fa79c83ff4cde.jpg)
メールマガジン登録フォーム
メルマガを利用する人向けの設定もあります。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/63ec96c21bda044ea0ee59da7d7bb6e0.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/63ec96c21bda044ea0ee59da7d7bb6e0.jpg)
提案フォーム
特徴的な機能として、提案フォームがあります。
こちらは、ユーザーからの提案を募ることができ、企業サイトなどでは役に立つ機会があるかもしれません。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/a7800a8132c3d277ae30db098d280b1b.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/a7800a8132c3d277ae30db098d280b1b.jpg)
②詳細の設定を行う
テンプレートを選択した後は、詳細の設定を行います。
無料版で設定できる項目は、
です。
一般
詳細の設定を行うには、まずカスタマイズ画面の「設定」をクリックします。
以下画像が「一般」の画面です。
一般では、主にテキストの変更ができます。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/eb32022eba8bb55328e597983bc460a7.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/eb32022eba8bb55328e597983bc460a7.jpg)
通知
「通知」では、お問い合わせの通知関連(メール)の設定ができます。
「メールアドレスへ送る」にデフォルトで設定されている{admin_email}は、WordPressで設定しているメールアドレスにお問い合わせが送信されるという意味です。
もしそうでないメールアドレスに送信したい場合は、ここで変更しておきましょう。
他は重要項目ではないので、特にこだわりがなければデフォルトのままでOKです。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/06e07c619ed34a701344dce95a4992ad.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/06e07c619ed34a701344dce95a4992ad.jpg)
確認
「確認」はお問い合わせしてくれたユーザーへのアクションを設定可能です。
デフォルトではメールでのメッセージの送付となっており、「確認メッセージ」でテキストの編集が行えます。
アクションはメッセージの他に
・ページを表示
・URLに移動(リダイレクト)
があります。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/bb26fa4969350f65a44189d09b675d60.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/bb26fa4969350f65a44189d09b675d60.jpg)
参考までに、僕は確認メッセージの内容を以下の通り変更しております。
上記設定が完了したら、「保存」をクリックしましょう。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/d5ac0675f4afc7a8889b420946e3f914.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/d5ac0675f4afc7a8889b420946e3f914.jpg)
③スパム対策(reCAPTCHA)の設定を行う
最後に、スパム対策としてreCAPTCHAの設定を行いましょう
この設定を行わないと自動のスパムメールが大量に送られてくるので、対策として重要です。
設定はまず、reCAPTCHAのサイトへアクセスし、「Admin Console」をクリックします。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/812d0e2cbcfd80779ebdf5758969cf66.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/812d0e2cbcfd80779ebdf5758969cf66.jpg)
以下の通り、項目の入力とチェックを行いましょう。
reCAPTCHAタイプは、「reCAPTCHA v2」を選び、1番上にチェックを入れるのがベーシックなやり方です。
また、ドメインは「https://」を省いたものを入力します。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/aef88519ccd4b0deb9fb7286732fb6a1-720x1024.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/aef88519ccd4b0deb9fb7286732fb6a1-720x1024.jpg)
「送信」をクリックして以下の画面が表示されると、登録は完了です。
次のContact Form by WPForms側での設定で、こちらの
・サイトキー
・シークレットキー
を使うので、タブはそのまま残しておきましょう。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/dfdf3143acdd40c358e4afac1db48fd4.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/dfdf3143acdd40c358e4afac1db48fd4.jpg)
続いてWordPressのダッシュボードを開き、「WPForms」から「設定」→「CAPTCHA」と移動し、「reCAPTCHA」を選択します。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/ead4491522781131945a42c37638933c.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/ead4491522781131945a42c37638933c.jpg)
reCAPTCHAの登録画面に移るので以下の通り入力します。
タイプは1番左の「Checkbox reCAPTCHA v2」、サイトキーとシークレットキーは先ほど設定したものをペーストしましょう。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/d0a0024215f7b2e382e5118ea927ab97.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/d0a0024215f7b2e382e5118ea927ab97.jpg)
保存したら、お問い合わせフォームの設定画面(フィールド)へアクセスし、「検索フィールド」の「reCAPTCHA」から設定を行います。
右側に有効マークが出ていれば、ちゃんと設定できている証です。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/bd300f6ed66f279e1949ba2ba1731b27.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/bd300f6ed66f279e1949ba2ba1731b27.jpg)
最後に、設置したお問い合わせフォームでreCAPTCHAが機能しているかどうか確認しましょう。
お問い合わせフォームの設置方法は以下で解説しています。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/b0b713fc820bb04d9398692137cb1e54.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/b0b713fc820bb04d9398692137cb1e54.jpg)
Contact Form by WPFormsで設定したお問い合わせフォームの設置方法
上記で作成したお問い合わせフォームの設置方法を解説します。
まずはダッシュボードの「WPForms」をクリックし、遷移先の画面右にあるショートコードをコピーします。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/7f640685b202b551814cd9443119deae.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/7f640685b202b551814cd9443119deae.jpg)
コピーしたコードをエディターの「ショートコード」で貼り付けます。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/c740680704fffe417258eb8180c53388.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/c740680704fffe417258eb8180c53388.jpg)
プレビューでお問い合わせフォームが設置されているか確認しましょう。
念のためちゃんとメールが届くかどうかテストもしておくと良いですね。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/a5392d4236e44464b5af5c09f7dd8633.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/a5392d4236e44464b5af5c09f7dd8633.jpg)
他のプラグインからデータを移行する方法
Contact Form by WPFormsでは、他のお問い合わせフォーム系プラグインからデータを移行することができます。
移行の手順は、「ツール」の「他のフォームプラグインからのインポート」から行えます。
移行可能なプラグインは
・Contact Form7
・Ninja Forms
・Pirate Forms
です。
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/cdea93a6285a2f67f93bd67c4d7b3775.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/cdea93a6285a2f67f93bd67c4d7b3775.jpg)
まとめ:Contact Form by WPFormsならお問い合わせフォームを直感的操作で簡単に設置可能!
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/shutterstock_1779930926-2.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2021/01/shutterstock_1779930926-2.jpg)
以上、WordPressでお問い合わせフォームを設置できるプラグイン「Contact Form by WPForms」について解説しました。
Contact Form 7より知名度は低いですが、機能性は申し分なく、直感的な操作で簡単にお問い合わせフォームを設置できます。
特にreCAPTCHAをプラグインの内部機能で設定できるのが個人的に良いなと。
UIも良く、WordPress初心者にもおすすめできるプラグインです。
気になる方はぜひこの機会に。
![](https://www.nomad-hacks.org/wp-content/uploads/2020/05/guchiwo.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2020/05/guchiwo.jpg)
![](https://www.nomad-hacks.org/wp-content/uploads/2020/05/guchiwo.jpg)
「この記事が参考になった!」という人はSNSでシェアしてもらえると大変嬉しいです!
Twitterなら、リツイートもさせていただきますね!