ブログやサイトを運営していくうえで、お問い合わせフォームを設置することは必須になります。お問い合わせフォームとは、そのブログを運営している人へ直接連絡することができる手段になります。
記事内容の誤りの連絡や広告掲載の連絡などの連絡が届く場合がありますので、ブログのジャンルに関わらず必ず設置しておくようにしましょう。
WordPressでお問い合わせフォームを設置する場合は「Contact Form 7」というプラグインを使用することにより、とても簡単に設置することができます。
そこでここでは2019年最新版のContact Form 7を使ったお問い合わせフォームの作り方をWordPress初心者にも使い方が分かるよう解説します。
さらにカスタマイズする人向けに、ラジオボタンやチェックボックスの簡単な使い方や送信できないトラブルに陥った時の原因と解決策まで見ていきましょう。
Contact Form 7のインストール方法
まずは、プラグインのインストールをしていきます。
「Contact Form 7」とプラグイン検索画面から検索してインストールしていきましょう。
プラグインのインストール方法が分からない方は以下の記事を参考にしてみてください。
➡WordPressプラグインとは？今さら聞けないインストール方法3選
Contact Form 7の設定方法
Contact Form 7をインストールすることができたら、設定をしていきます。「インストール済みプラグイン」からContact Form 7の「設定」をクリックしましょう。
続いて、最初から「コンタクトフォーム１」というものが作られていますので、その部分をクリックします。
この画面では、お問い合わせフォームの形式を変更することができます。特に変更する必要はないと思うので、そのままにしておきましょう。
以下の赤枠のコードをそのままコピーします。
お問い合わせフォームの作り方
続いて、お問い合わせフォームを載せるページを作っていきます。普通に記事を投稿するときは投稿ページを使いますが、お問い合わせフォームは「固定ページ」というページに載せます。
お問い合わせフォームは記事一覧に表示させるのではなく、あなたのブログのどのページからもアクセスすることができるようにグローバルメニューなどの位置に設置しなければならないからです。
WordPress管理画面から「固定ページ」の「新規追加」をクリックしましょう。
すると、新規固定ページを追加する画面に移ります。この投稿画面では、タイトルを「お問い合わせ」、パーマリンクを「contact」に設定しておくことをおすすめします。
そして、本文に先ほどコピーしたコードを張り付けましょう。このときテキストエディタではなくビジュアルエディタで張り付けるようにしてください。
本文には、この張り付けたコード以外なにも記入しなくて問題ありません。
以上の「タイトル」「パーマリンク」「コードの貼り付け」の３点を入力し終えたら、「公開」をクリックしましょう。
投稿した固定ページを見ると、このようにお問い合わせフォームが作られています。
カスタマイズしてラジオボタンやチェックボックス等も追加可能
なお、多くの人は上記のデフォルトのまま使う方が多いですが、コンタクトフォームはカスタマイズして、様々な項目を追加することができます。
「フォーム」メニューの中に項目が表示されていますので見てみます。
良く使用されるのは、以下の項目あたり。
- テキスト項目
- メールアドレス
- URL
- 電話番号
- 日付
- テキストエリア
- ドロップダウンメニュー
- チェックボックス
- ラジオボタン
- 承諾の確認
- ファイル
- 送信ボタン
特にカスタマイズする人は、ラジオボックスとかチェックボックスあたりを使われる方も多いみたいですね。
その2つの使用方法もサクッとみていきましょう。
チェックボックスの使い方
チェックボックスをクリックすると、以下のようなタグ生成画面が表示されます。
あとはオプションの部分に1行ずつ、選択肢にしたい項目を入力していくだけです。
必須項目にしたければ、一番上の「項目タイプ」の部分にチェックを入れてください。
あとは基本的にいじる必要はないです。
入力で来たら、「タグを挿入」をクリック。
上記のようにタグが挿入されていれば挿入完了です。
お問い合わせ画面でチェックボックスを表示させたい位置にタグを追加するようにしましょう。
ラジオボタンの使い方
ラジオボタンもほぼ同じやり方で使用できます。
「ラジオボタン」のボタンを押すと、以下の画面が表示されます。
そしたらオプションの部分に1行ずつ選択肢を入力すればOKです。
挿入したい位置に「タグを挿入」してください。
お問い合わせが送信できない場合の解決策
Contact Form 7を使っていく中で、「お問い合わせが送信できない」というトラブルに見舞われる方も少なくないようです。
具体的には以下のように送信ボタンを押しても、クルクルが止まらずに送信できないみたいですね。
あとは管理者（ログインした状態）として問い合わせをテストしてみると送信できるものの、訪問者として送信してみると送信できないというケースもあるよう。
さらにGoogle Chrome上で、Control+Option+Jで、デベロッパーツールを表示し、エラーを確認すると、
Failed to load resource: the server responded with a status of 403 (Forbidden)
というエラーが表示されています。
この場合の送信できない原因は
Rest API が無効に設定されている
というもの。
具体的な解決策は以下の通り。
サーバーの設定からREST APIを有効にする
XSERVERを使っている方であればコントロールパネルにログインし、設定対象ドメインを選択。
WordPressセキュリティ設定 > REST API アクセス制限
の部分をOFFにしてREST APIを有効にしてやることで解決します。
僕自身このトラブルに見舞われたことはないので、ほとんどの人は大丈夫かと思いますが、同様の現象が起きた際は試してみてください。
