WordPressでHP／ブログを作っているが、お問い合わせフォームを作りたい。
簡単に作れる方法はある？こんな疑問にお答えします。
Googleアドセンスの審査前に、お問い合わせフォームの作成で悩んでいる方もいるかもしれませんね。
特にそんな段階の方ほど、一つのことを進めるのに立ち止まってしまいますよね。
今回は、このサイトを製作・運営している私「Sumieのマネージャー」が、お問い合わせフォームを作成する方法を解説します。
１．WordPressでお問い合わせフォームを作るにはプラグイン「Contact Form 7」が簡単
WordPressでお問い合わせフォームを作るには、プラグイン「Contact Form 7」が簡単です。
Contact Form 7の設定方法
まずはプラグインContact Form 7をインストールし有効化します。
プラグインのインストール、有効化の方法は「プラグインについて解説した記事」をご覧ください。
Contact Form 7の設定画面は、WordPressの管理画面の左側のメニューから「プラグイン」⇒「インストール済みのプラグイン」⇒Contact Form 7を探し「設定」ボタンを押します。
または、「お問い合わせ」⇒「コンタクトフォーム」からもいけます。
※WordPressの管理画面から引用
コンタクトフォームという画面に移ります。
上部の「新規追加」ボタンを押すと、新しい問い合わせフォームを作成できます。
※WordPressの管理画面から引用
上の画像では、中ほどに「コンタクトフォーム1」と書かれたものがありますね。
ここに作った問い合わせフォームなどが出てきます。
「新規追加」ボタンを押すと、以下の画面になります。
※WordPressの管理画面から引用
「フォーム」画面では、問い合わせフォームに何を記載するかを決めます。
デフォルトで「氏名」「メールアドレス」「題名」「メッセージ本文」「送信ボタン」が入っています。
これだけあれば十分でしょう。
追加する必要も無いと思いますが、追加した方は各ボタンで追加していきましょう。
次の「メール」画面では、問い合わせがあった際に送られてくる
メールについての設定です。
※WordPressの管理画面から引用
必須項目は送信先です。メールを受け取るアドレスを記入しましょう。
その他は変更せずともOKです。
次の「メッセージ」画面は、特に変更する必要無しです。
※WordPressの管理画面から引用
問い合わせメッセージ送信が成功した時や失敗した時に出るメッセージを決めます。
変えてもOKですが、時間をかける箇所ではないでしょう。
次の「その他の設定」では、コード入力により様々なカスタマイズができます。
※WordPressの管理画面から引用
例えば、ログインしている人限定とかですが、私はやったことがありません。
必要無ければ、特にいじらなくてOKです。
最後に保存ボタンを押して完成です。
固定ページにショートコードを貼り付ける
上記の設定をしただけでは、お問い合わせフォームは作られません。
実際にお問い合わせページを作成していきましょう。
まず、固定ページを作成します。
固定ページを作成し、HTML入力またはテキスト入力でショートコードを入力します。
こんな感じです。
※WordPressの管理画面から引用
ショートコードは、先ほどのContact Form 7の設定画面から確認できます。
以下の場所です。
※WordPressの管理画面から引用
これでお問い合わせフォームの設置は完了です。
お問い合わせフォームのページリンクをトップページに貼るのをお忘れなく。
最後に、試しに送信して、設定したメールアドレスに届けばOKです。
２．使いこなすと高性能なプラグインContact Form 7
さて、最低限の問い合わせフォームを作る説明をしてきましたが、使い方によっては様々なアレンジができます。
今ご覧のサイトでは、「星読み鑑定の申し込みフォーム」で活用しています。
ここを説明しだすと大ボリュームになってしまいますので、別記事で解説することにします。
ここでは、私が「これを使いこなせば大丈夫！」という項目だけ紹介しておきます。
※WordPressの管理画面から引用
- テキスト
テキストの入力枠を表示します。 - メールアドレス
見た目はテキストと同じですが、@が大文字などメールアドレスとして無効な入力はエラーとなります。 - 電話番号
数字のみ入力が可能で、電話番号として無効な入力はエラーとなります。 - 日付
日付を入力できるカレンダーが開いて選択できます。 - テキストエリア
枠の大きい、テキストの入力欄を表示します。
何かご要望があれば入力してください。で使われてるイメージです。 - ドロップダウンメニュー
ドロップダウンメニューでの選択欄を表示します。 - チェックボックス
チェックボックスでの選択欄を表示します。 - ファイル
ファイルを添付できます。 - 送信ボタン
送信ボタンです。
条件分岐もできる
また、「Conditional fields」という機能を使うと（上の画像は古いバージョンなのでありませんが）条件分岐もできます。
・①の場合は○○を表示する。
・②の場合は△△を表示する。
というイメージです。
これも説明しだすと大ボリュームになりますので、ここでは機能の紹介だけです。
お問い合わせフォームは、Webサイトを運営する上で必須項目となります。
最低限の機能で十分ですので、設置するようにしましょう。