このサイトはWordPressの有料テーマであるAFFINGER5で作成していますが、AFFINGER5には標準で問い合わせフォームが付いていないため、無料のプラグインを使って問い合わせフォームを設置する必要があります。
オススメの無料プラグイン Contact Form 7を使うことで、自動返信メールやサンクスページが設置できます。
当サイトに記載する手順通りに行えば、初心者でも簡単にカスタマイズすることができます。
Contact Form 7とは
Contact Form 7はWordPressに問い合わせフォームを入れるための無料プラグインです。
自分で問い合わせフォームを作成する場合はHTMLやCSSの知識が必要となります。
しかし、Contact Fomr 7はプラグインを有効にし、比較的簡単な設定をするだけで、簡単に問い合わせフォームを設置することができます。
また、Contact Form 7の拡張プラグインもあり、それらを組み合わせることで、自分だけの問い合わせフォームを設置することができます。
Contact form 7のインストール手順
管理メニューの「プラグイン→新規追加」のプラグイン検索窓に「Contact Form 7」と入力して、Contact Form 7を検索してください。
その後、今すぐインストールをクリックしてください。
次に「有効化」をクリックします。
Contact Form 7の使い方
Contact Form 7を有効化すると、管理画面の左側メニュー部分に「お問い合わせ」項目が追加されます。
ここをクリックすることで問い合わせフォームの作成ができるようになります。
問い合わせフォームを作成する場合は、ページ上部にある「新規追加」をクリックしてください。
コンタクトフォームの新規追加を押すと、以下の様な編集画面が表示されます。
簡単な問い合わせフォームを作成したい場合は、特に設定を変更する必要はなさそうです。
凝ったフォームを作りたい場合は、次章を参考にしてみてください。
Contact Form 7のフォームアレンジ
以下を編集することで問い合わせフォームをアレンジすることが可能です。
フォームのアレンジに使える項目は以下の8点です。
アレンジポイント
- テキスト・URL・電話番号の設定
- 日付の設定
- テキストエリアの設定
- ドロップダウン・メニューの設定
- チェックボックスの設定
- 承諾の確認の設定
- ファイルのアップロードの設定
- 送信ボタンの設定
テキスト項目・URL・電話番号の設定
テキスト項目
1行の入力フォームを設定するときに使います。
氏名・住所などの入力はこれで代用します。
URL・電話番号の設定
専用の入力項目が存在します。
URLの定義にあっていないものや、電話番号としてみなされない入力に対しては自動的に入力のやり直しが求められます。
日付の設定
日付の設定は、生年月日の入力に使用するケースが多いです。
テキストエリアの設定
テキストエリアは複数行の入力ができるようになっています。
そのため、問い合わせ内容を記載してもらうような、長文を記載する際に使用します。
ドロップダウン・メニューの設定
ドロップダウン・メニューを使うと、都道府県や問い合わせの項目を選択できるメニューを設置することができます。
オプションには、ドロップダウンで表示したい選択項目を1行毎入力します。
例えば、都道府県の情報を選択させる様にするには、47都道府県名を1行ずつ入力します。
ドロップダウンメニューで複数選択できるようにするには、「複数選択を可能にする」にチェックを入れます。
先頭行を空白にしたい場合には「空の項目を先頭に挿入する」にチェックを入れます。
チェックボックスの設定
チェックボックスを使うことで、簡易的な選択式アンケートを作ることができます。
オプションには、チェックボックスで表示したい選択項目を1行毎入力します。
ラベルとチェックボックスの配置を変えたい場合は、「ラベルを前に、チェックボックスを後に配置する」にチェックを入れます。基本的にはチェックがつけにくくなるため、ここにチェックを入れることはほとんどないと思います。
チェックできる項目を1つに制限したい場合(ラジオボタンの様に扱いたい場合)は、「チェックボックスを排他化する」にチェックを入れます。複数選択可能なチェックボックスとしたい場合は、ここは空白にしておきましょう。
承諾の確認の設定
この設定では、お問い合わせや採用応募時の「個人情報の取り扱い規約」などに合意する確認ボタンを表示することができます。
同意条件に任意の文言を入れてください。
ファイルのアップロードの設定
ファイルアップロードを使うことで、資料を添付送信してもらえます。
送信ボタンの設定
フォーム入力後の送信ボタンを作成・アレンジすることができます。
ラベルには「送信」「お問い合わせ」など、送信ボタン上に配置する文字列を入力します。
Contact Form 7のカスタマイズ方法
Contact Form 7では自動返信メールの設定が可能なので、ここでは自動返信メールの設定方法について記載します。
自動返信メールの設定
Contact Form 7では、問い合わせをしてくださった方に対して自動返信メールの設定をすることができます。
簡単に設定できるため、やっておくことをオススメします。
まずはメールの設定画面にいってください。
下部にスクロールし、「メール(2)」にチェックを入れましょう。
そうすると、自動返信メール作成用の入力画面が表示されます。
簡易的な自動返信メールであれば、下記の通り設定してください。
- 送信先：[your-email]と入力してください。これ以外の宛先にすると、問い合わせした方に自動返信メールが届かなくなります。
- 送信元：あなたの名前を入力してください。
- 題名：「お問い合わせありがとうございました」というような、自動返信メールであることが分かるような件名を設定してください。
- メッセージ本文：自動返信メールの中身を入力します。定型文に加え、問い合わせフォームに設定したショートコードを使用することで、自動返信メールにお問い合わせ内容を記載することが可能です。
Contact Form 7で作成したフォームの公開
すべての設定が完了したら、コンタクトフォームの編集ページの右上にある保存ボタンをクリックしてください。
ボタンクリック後、ショートコードが表示されます。
これをコピーして、固定ページで作成した問い合わせページの本文に貼り付けてください。
最後に固定ページを公開すれば、問い合わせフォームが完成します。
まとめ
Contact Form 7 はお問い合わせフォームを簡単に、高レベルで作成することができる便利で優秀なプラグインです。
別途紹介予定の追加プラグインを使うことで、例えば問い合わせのメールに対して受付番号を連番で振ったり、当サイトでも紹介しているkintoneへの情報転記などが可能となります。
最後に設定の振り返りです。
振り返りポイント
- インストール方法
- Contact Form 7の使い方
- フォームのアレンジ方法
- Contact form7のカスタマイズ方法
- フォームの公開
いろんな方が、さまざまなお問い合わせフォームを作成しています。
是非、多くのページを見て、参考にしてみてください。