問い合わせフォームの作り方-Contact Form 7 で簡単設置

スポンサーリンク

contact form 7

問い合わせフォームのWordPressプラグイン

私の問い合わせフォームのおすすめプラグインはContact Form 7です。理由は次のとおりです。このサイトでも使わせてもらっています。

  • 無料で使える
  • 簡単に導入できる
  • 確認画面も表示できる
  • いろいろな設定ができる
  • 多言語対応も可能(エラーメッセージを設定できる)
  • 頻繁にアップデートが行われている。
  • よく使われるメジャーなプラグイン

Contact Form 7のインストール方法

管理画面のプラグインより、新規追加を選び、”Contact Form 7″で検索すれば、ヒットします。ちなみにFormと7の間にはスペースを入れてください。入れないとまく見つからない場合があるので注意してください。見つかったらインストールして、有効化してください。

contact form 7

問い合わせフォームの作り方

Contact Form 7は問い合わせフォームの機能を実現してくれます。実装方法としては、問い合わせページ自体を固定ページで作成し、そこにContact Form 7 のショートコードを埋め込むと問い合わせフォームを作ることができます。それでは順番に説明していきます。

Contact Form 7の設定

Contact Form 7がうまくインストールされて有効化されていれば、管理画面に「お問い合わせ」の項目が追加されます。そこを選択するとコンタクトフォームの設定画面が表示されます。まず最初は、一番上にある新規追加をクリックしてください。するとコンタクトフォームの追加画面が表示されます。

コンタクトフォームの追加

フォームの設定画面では、フォーム、メール、メッセージ、その他の設定の4つのタブが表示されます。その中で設定が必要なのは、フォームタブメールタブになります。

メッセージタブは送信ボタンを押したときのメッセージの設定です。送信できた時のメッセージやフォームの記入が不十分だった時のメッセージを変更できます。こちらは特にこだわりがなければ初期設定のままでOKです。

フォームタブ問い合わせフォームの入力形式を設定できます

メールタブは問い合わせフォームの内容を使って、メールの文面を作成する設定になります。

順に説明していきたいと思います。

多言語対応する場合

コンタクトフォームやメールの文面はそれぞれその言語で設定してあげれば良いです。エラーメッセージは、メッセージタブの文面を実装したい言語へ翻訳すれば変更できます。Contact Form 7の作者はBogoを作っているので考慮してくれているのだと思います。

フォームタブの設定

フォームタブはコンタクトフォームの設定画面です。ここに必要なフォームを書いていきます。下記の画像の赤枠内にあるボタンを押すことでフォームを追加できますし、直接コードを書くことで追加もできます。初期設定の項目をベースに必要な項目を設定してみてください。フォームの記述方法は、[機能 名前] の形式です。機能でフォームの種類を指定できます。名前はそのフォームの名前で、コンタクトフォームから送信されるメールに引用するときに使用できます

機能

主要な機能の説明になります。入力後の確認の際に参考にしてください。

text       : テキスト入力(1行)
email     : emailアドレス入力フォーム
textarea : テキスト入力(複数行)
submit   : 送信ボタンボタン
*           : 入力必須項目指定

設定例

このサイトの問い合わせフォームでは次のように設定しています。

cf7_1

コンタクトフォーム例

上の設定に対応するコンタクトフォームが次のようになります。

メールタブの設定

メールタブではコンタクトフォームに入力された内容を基に、メールで送信する形式を指定できます。フォームタブで設定したフォームの[機能 名前]にある名前を[]で囲むとショートコードとしてコンタクトフォームに入力された文面を使うことができます。フォームタブで入力した内容と見ながら設定してみてください。

フォームの設定例の場合、使用できるショートコード

[名前]でショートコードとして使えるので上の設定例だと次のコードが使えます。それぞれ対応するフォームに記入された内容を引用できます。

[your-name] : お名前
[your-email]  : メールアドレス
[your-subject] : 題名
[your-message] : メッセージ本文

コンタクトフォームの作成

これまでの手順で新規のコンタクトフォームができましたので、管理画面からお問い合わせをクリックしてお問い合わせの設定画面を開くと、コンタクトフォームの一覧が表示されます。ここにあるショートコードを固定ページに張り付けることでコンタクトフォームのページが作成されます。

固定ページの作り方

固定ページは管理画面の固定ページの項目をクリックし、表示されたページで新規作成ボタンから作成できます。

固定ページの表示のさせ方

固定ページとして作られた問い合わせフォームのページは、管理画面外観にあるメニューを選択するとメニューの設定画面が表示されます。メニューやフッターに固定ページの問い合わせフォームを追加すればブログに表示されるようになります。

コンタクトフォームのテスト送信

コンタクトフォームの設定が終わったら、実際にコンタクトフォームからメールを送信してみましょう。無事に送信できれば完了になります。

もし送信ができないようでしたら、SMTPサーバーの設定が必要かもしれません。こちらのSMTPでメールを送るのに便利なプラグイン WP Mail SMTP の使い方の記事を参考に設定してみてください。

まとめ

Contact Form 7 で簡単にコンタクトフォームを作ることができます。フォームの内容をメールタブで引用するショートコードの使い方が理解できれば、すぐに必要な問い合わせフォームを作成できるので試してみてください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする