WordPressで運営しているコーポレートサイトや個人ブログに「お問い合わせフォーム」を設置したいがどうすればいいかわからない！方法教えて！
ついでに自動返信メール機能や簡単なカスタマイズも教えて欲しい。。。
今回の記事では、プログラミング初心者の方でも分かるようにWordPressにお問い合わせフォームを設置する方法を徹底解説していきます！
本来はPHPを使ってお問い合わせフォームを作りますが、プログラミング経験のない方はできないかと思いますので、「Contact Form 7」と呼ばれるWordPressで最も使われているお問い合わせフォームを作るためのプラグインを今回は使用します。
- Contact Form 7 のインストール方法
- フォームの作り方
- 自動返信メールの実装
- フォーム送信後のメッセージ設定など
- 簡単なカスタマイズを紹介
Contact Form 7を使えばものの10分程度でお問い合わせフォームができるので、ぜひこの記事を読みながら手を動かして作業してみましょう！
それではいきます！
WordPressにお問い合わせフォームを作る方法
1.Contact Form 7 をインストールする
まず始めにWordPressの管理画面から「Contact Form 7 」をインストールします。
- プラグインをクリック
- 新規追加をクリック
- 検索窓に「Contact Form 7」と検索する
- 今すぐインストールをクリックして有効化する
たったのこれだけでContact Form 7のインストールは完了です。
インストールが完了すると自動的にサイドメニューに「お問い合わせ」項目が追加されます。
今後Contact Form の編集や管理はこのメニューから全て行います。
2.お問い合わせフォームを作る
このステップでは、お問い合わせフォームに必要な入力ボックスやチェックボックスなどを設置していきます。
- テキストボックス（名前や会社名、住所など）
- メールアドレス
- サイトURL
- 電話番号
- 数値
- 日付
- テキストエリア（メッセージ本文）
- ドロップダウンメニュー（都道府県選択など）
- チェックボックス
- ラジオボタン（性別の選択など）
- 承諾確認
- クイズ
- ファイルアップ
- 送信ボタン
Contact Form 7 では主にこのような項目をお問い合わせフォームに設置することができます。
では早速新しくお問い合わせフォームを作ってみましょう！
- お問い合わせ
- 新規追加をクリック
- 新規作成画面が開く
- コンタクトフォームのタイトルを入力（例：お問い合わせフォーム）
3.お問い合わせフォームに必要な項目を追加・編集する
次にお問い合わせフォームにどんな項目を設置したいか設定をしていきます。
Contact Form 7にある項目を全て使用するとこんな感じになります。（スクロール可能）
フォーム画面の基本的な味方はこんな感じです。
新規追加するとデフォルトで、
- お名前
- メールアドレス
- 題名
- 送信ボタン
これらが用意されています。
新しくテキストボックスを追加してみる
デフォルトのままでは項目が少ないということで、例として名前ボックスの下に「会社名」を入力するテキストボックスを設置してみましょう！
完成形はこんな感じです。
- <label>で囲まれた部分をコピー
- 下にそのまま貼り付ける
- []の部分を削除
- テキストを選択
テキストを選択するとこのように画面が表示されるので、選択したり入力していきます。
- 項目タイプ：入力必須にするかしないかを選択できる
- 名前：このボックスに名前をつける（半角英数字）nameと記述するとエラーが出る
- デフォルト値：デフォルトで表示させるテキストを指定できる
- プレースホルダー：チェックを付けると上記文字が透かし文字で表示される
- Akismet：スパム対策（チェックなしでOK）
- ID属性：デザインを当てる際に使用（なくてもOK）
- クラス属性：デザインを当てる際に使用（なくてもOK）
各項目を入力して「タグを挿入する」ボタンをクリックすると、、、
このように[ ]タグが生成されて公開すると、ちゃんとテキストボックスとして表示されます。
ドロップダウンメニューを設置する
次に都道府県選択で主に使用されるドロップダウンメニューの作り方について解説します。
こんな感じのものですね！
ドロップボックスを作る際は<label>を使用するのでなく、<div>を使用します。
でないとエラーが表示されてしまいます。
<div> 都道府県
ここに[]を挿入 </div>これをそのままコピーして貼り付けてください。
ドロップダウンメニューを選択すると、このような画面が表示されるので解説します。
- 項目タイプ：入力必須にするかしないかを選択できる
- 名前：このボックスに名前をつける（半角英数字）nameと記述するとエラーが出る
- オプション：選択できる項目を書く（一行おきに書く）
- 複数選択を可能にする：チェックすると複数選択できる
- 空の項目を先頭に挿入する：チェックすると文字のない項目が先頭に来る
- ID属性：デザインを当てる際に使用（なくてもOK）
- クラス属性：デザインを当てる際に使用（なくてもOK）
あとは先ほどと同じように「タグを挿入」をクリックするとタグが生成されます。
その他のポイント
その他の項目の作り方も上記二つとほとんど同じですが、注意するべき点があるのでご説明します。
ファイル形式には：jpeg,png,pdfのように書く。
複数形式可能の場合は,（カンマ）で区切る
ラベル項目に入力した文字が、ボタンに表示される文字になる。
例）送信する、Submit、この内容で送信する
4.お問い合わせフォームを公開する
よし！お問い合わせフォームができた！と思ってもまだこれだけでは表示されません。
次に、WordPressの投稿機能を使って作成したフォームを公開する必要があります。
- 保存ボタンを押す
- ショートコードが生成される
- コードをコピーする
- 「固定ページ」新規追加をクリック
後はいつものように、タイトルを書いて、好きな文章や画像を挿入し、先ほどコピーしたショートコードを好きなところに貼り付けて公開すれば完成です！！
最後に公開したURLにアクセスしてちゃんと反映されているか確認しましょう！
自動返信メールの設定方法
Contact Form 7ではお問い合わせフォームから送信された時に、送信したユーザーに対して自動返信メールを送信することが可能です。
イメージとしてはこんな感じです。
- 送信者の名前を「〇〇様」のようにメールに記載できる
- メール本文内容を自由に設定できる
- ホームページのURLなども設置可能
- ファイルの添付が可能
↓自動返信メールの設定方法についてはこちらの記事をご覧ください↓
送信完了メッセージなどを編集する
ユーザーがお問い合わせフォームから送信が完了した際に、送信が完了したメッセージを表示させたり、入力内容が間違っている場合はエラーメッセージを表示させるとユーザーの利便性が高まりますね！
- 送信完了後：「お問い合わせ頂きありがとうございました。」
- 送信失敗：送信に失敗しました。最後送信し直してください
- 必須項目が未入力：必須項目を入力してください
上記のように表示させると、スムーズにお問い合わせができますよね！
フォーム作成画面に、「メッセージ」タブがあるのでクリックすると、
〇〇の場合は → テキストボックス内の文字を表示する
のように条件とその時のメッセージが書かれているので、好きなメッセージに書き換えることができます。
デフォルトで全ての条件に対するメッセージが書いてありますが、どれも不自然なメッセージばかりなので、書き換えるといいでしょう。
コピペOK お問い合わせフォームをカスタマイズする
Contact Form 7はとっても便利なプラグインですが、一つ難点を上げるとするとデザインがシンプルすぎると言う点です。
何もカスタマイズしないままだと、白と黒のなんの装飾もないお問い合わせフォームのままです。
お問い合わせフォームはサイトのコンバージョンを上げる重要なものなので、設置することはもちろんのこと、デザインもサイトにあったものにカスタマイズする必要があります。
そこで今回は特別にコピペOKのカスタマイズ集をご紹介します。
- どんなサイトでも万能なデザイン
- コーポレートサイト用のきっちりとしたデザイン
- 可愛いポップなデザイン
今回はこちらの３つを用意しました！こちらのリンクからコピペしてください！
WordPressサイトにお問い合わせフォームを作る方法まとめ
Contact Form 7とても使いやすくて便利だね！
いかがでしたでしょうか！！
WordPressのContact From 7プラグインを使用すると、プログラミング未経験者でも簡単にお問い合わせフォームの設置ができます！
お問い合わせフォームのデザインを変えたりするのはプログラミングの知識が必要なので、ランサーズや、クラウドワークス、僕に依頼して頂いても大丈夫です！
お見積もり、ご相談はお問い合わせフォームにてお願い致します。
最後までご覧いただき有難うございました！
