ホームページ、サイトを運営する際、問い合わせフォームを設置することは良くあります。
問い合わせフォームに使うプラグインは複数ありますが、今回は「Contact Form 7」を取り上げていきます。
フリーのテーマや有料のテーマでは、「Contact Form 7」の装飾を最初から設定されていることが多くありますので、初期設定のまま装飾をCSSで設定しないでもカッコよく使えることが多くあります。
Contact Form 7をインストール
WordPress管理画面から、プラグインの新規追加で「Contact Form 7」と検索をしてインストール、有効化します。
新規追加の検索で出てこない場合には、コチラからダウンロードし、wp-content/pluginsにインストールすることでも可能です。
Contact Form 7を使ってみよう
Contact Form 7を有効化すると、WordPressの管理画面のメニューに「お問い合わせ」が追加されます。
「お問い合わせ＞コンタクトフォーム」で作成したお問合せフォームの確認ができます。有効化したときには「コンタクトフォーム 1」というのがあります。こちらを使用して編集していくこともできますし、新たに作っていくこと、複数作っていくことも可能です。
「新規追加」を押して新しいフォームを作ってみましょう。
「新規追加」を選択すると、設定画面に変わりますので、まずタイトルを設定しましょう。「お問合せ」など好きな名称で大丈夫です。
続いて、「フォーム」「メール」「メッセージ」「その他の設定」を設定していきます。
フォーム
問合せフォームに表示する内容を設定します。
最初の状態では、「お名前」「メールアドレス」「件名」「本文」「送信ボタン」となっています。上部の青枠のボタンから、ラジオボタンや、日付などの設定も可能です。
HTMLで記載しますので、CSSのID、CLASSを設定することも可能ですが、慣れていない方はとりあえずそのまま入れていきましょう。
メール
フォームからの送信されてきた内容を受信するメールの設定を行うことが可能です。初期設定ではWordPressで設定しているメールアドレスが表示されていますが、直接入力することで、自由なメールアドレスに変更が可能です。
送信先：メールを受信するアドレス。任意のメールアドレスに設定可能です。
送信元：フォームでメールアドレスを入れてもらう場合、そのメールアドレスから送信されたことにできます。初期設定のままの場合は、[your-name]<[your-email]>としていると、「（例）鈴木太郎<suzukitaro@sample.com>」の様になります。
題名：こちらもフォームで題名を入れてもらうようにすると、初期設定では[your-subject]で入力された題名を参照してきます。
メッセージ本文：こちらは、メールの本文に記載される内容です。初期設定のままですとカスタムして追加した項目が入らないので、カスタムした場合はカスタムの値を[カッコ]で囲むことによって受信が可能です。
下部にメール(2)というのがありますが、こちらは、自動返信用で良く使用されます。この場合は、
送信先：相手のメール、初期設定だと[your-email]
送信元：自分のアドレスなど
題名、本文は同様にカスタマイズして使用することが可能です。
メッセージ
ユーザーが送信が完了した際の表示メッセージなどを自由に変更できます。基本的には初期設定のままで問題ありません。
HTML タグや実体参照はメッセージの中では使えないので、平文のテキストのみ使用してください。メッセージに HTML を挿入した場合には警告が出ます。
その他の設定
カスタマイズのためのコードをここに追加できます。詳しくはその他の機能を参照下さい。
設定が完了したら、「保存」をしましょう。
フォームの設置方法
保存がおわると、コンタクトフォームの一覧に保存したフォームが追加されていますので、「ショートコード」をフォームを設置したい場所に貼り付けることで、作ったコンタクトフォームが表示されます。
※写真の中でエラーが発生していますが、任意のメールアドレスを送信元などに設定すると、WordPressの管理者のメールアドレスではないため、エラー表示が出ますが、特に問題はありません。
ショートコードを貼り付けると、図のようになりますので、設置したいフォームをドロップダウンで選択をします。
これで、フォームの設置は完了しますので、送信テストをしてみたり、項目を増やしたかったらカスタマイズしたり、してみてください。