WordPressプラグイン「Contact form 7」で手軽にお問い合わせフォームを作ろう

WordPressでは、お問い合わせフォームをプラグインで簡単に作る事が出来ます。

WordPressでお問い合わせフォームと言えば、「Contact form 7」という日本人の方が作成されたプラグインが非常に有名です。今回はこの「Contact form 7」というプラグインを利用し、お問い合わせフォームを作っていきます。

Contact form 7の設定

「Contact form 7」をインストールして有効化すると、左側のメニューに「お問い合わせ」というメニューが出現しますので、ここをクリックします。

クリックすると、コンタクトフォームの設定画面が表示されます。

画面には「新規作成」とフォーム一覧が表示されますが、今回はすでに用意されているサンプルのフォームを編集して使用しますので、「コンタクトフォーム1」をクリックします。

(新たにフォームを作成したいときは「新規追加」から作成可能です)

 

お問い合わせフォームの編集

「コンタクトフォーム1」をクリックすると、編集画面が表示されます。

各番号の意味を解説します。

①フォーム名を変更する事が出来ます(フォーム名はユーザーには表示されませんので、管理しやすい名称にすると良いです)。

②フォームの項目を追加する事が出来ます。(今回は初期設定のまま使用しますので、何もしません)

③自動返信メールを設定しますので、こちらをクリックします。

 

フォームの自動返信メールの設定

自動返信メールは、サイト管理者宛てと、フォームに入力したユーザー宛ての2種類を設定します。

サイト管理者宛ての自動返信メールの設定

①送信先:自分宛てのメールですので、普段使用しているメールアドレスを入力します。

②送信元:送信元のメールアドレスは、ウェブサイトと同じドメインのメールアドレスを入力しないとエラーが表示されます。また、初期設定では@の前が「wordpress」となってますので、変更される事をお勧めします。

※[your-name] はユーザーが「お名前」の項目に入力した名前が表示されます。

③題名:自動返信メールのタイトルです。※[your-subject]にはユーザーが「題名」の項目に入力した題名が表示されます。

④追加ヘッダー:無くても大丈夫です。初期設定の意味は、送信されたメールに返信すると、宛先が[your-email](相手が「メールアドレス」に入力したアドレス)になるという意味です。

⑤メッセージ本文:メール本文です。 [your-name] [your-email][your-subject][your-message]にはそれぞれユーザーが入力した項目が表示されます。

⑥その他選択肢:どちらも使いません

⑦ファイル添付:使いません

ユーザー宛ての自動返信メールの設定

ユーザー宛ての自動返信メールの設定は、「メール(2)を使用」にチェックを入れると、設定画面が表示されます。

①送信先:相手宛てのメールなので、相手のアドレス[your-email]です。

②送信元:送信元のメールアドレスは、ウェブサイトと同じドメインのメールアドレスを入力しないとエラーが表示されます。また、初期設定では、@の前が「wordpress」となってますので、変更される事をお勧めします。

※[your-name] はユーザーが「お名前」の項目に入力した名前が表示されます。

③題名:メールのタイトルです。一般的には「お問い合わせいただき、ありがとうございます」等と書く場合が多いです。

④追加ヘッダー:無くても大丈夫です。Reply-Toの後ろにアドレスを入力すると、自動返信メールに返信した際、宛先メールアドレスを指定できます。

⑤メッセージ本文:メール本文です。 [your-name] [your-email][your-subject][your-message]にはそれぞれユーザーが入力した項目が表示されます。

⑥その他選択肢:どちらも使いません

⑦ファイル添付:使いません

 

フォームを表示させる

作成したフォームをウェブサイトに表示させます。表示させる方法は非常に簡単で、1行のショートコードをコピペするだけでフォームを表示させる事が出来ます。

フォームの管理画面に表示されている「ショートコード」を表示したいページにコピペするだけで、フォームが表示されます。

お問い合わせページを作成する

作成したフォームを表示させるため、「お問い合わせ」という名称の固定ページを作成します。

固定ページの作成は、
ダッシュボード>固定ページ>新規作成 を選択します。

ページ作成の流れは次の通りです。

①ページタイトルとパーマリンクを編集します。※パーマリンクは「inquiry」としましたが、「contact」でも何でも良いです。

②テキストをクリックしてテキストページを表示させます。※ビジュアルエディタのままでショートコードをコピペすると、[]の部分が文字化けし、ショートコードがきちんと反映されません。

③フォーム管理画面に記載されていたショートコードをコピペします。

④更新をクリックします。

これで、お問い合わせフォームの設置は完了です。

説明文の記載も可能

ショートコードの前後に文章を記載する事ができますので、お問い合わせに関する注意事項を記載する事ができます。

お問い合わせページをメニューに追加する

お問い合わせフォームの設定は一通り完了しましたが、メニューに追加しないとお問い合わせフォームはユーザーに表示されませんので、メニューに「お問い合わせ」という項目を追加します。

ダッシュボード>外観>メニュー を選択します。

①固定ページ蘭にある「お問い合わせ」にチェックを入れます。

②メニューに追加をクリックします。

右側のメニューに「お問い合わせ」が追加されます。

この後、「メニューを保存」をクリックすると、メニューに反映されますが、説明を追加したいので(メニューの下に表示される英字)、若干手を加えます。

①メニュー名の右側にある矢印(▼)をクリックします。

②説明欄に英文字を入力します。※今回の例では「inquiry」と入植しました。「contat」でも良いと思います。

入力後、「メニューを保存」をクリックすると設定終了です。

参考ページ:ナビゲーションメニューを作成し、メニュー表示を見やすくカスタマイズしよう

プレビューで確認してみよう

プレビューでお問い合わせフォームがきちんと反映されているか、メニューがきちんと表示されているか確認します。

きちんと表示されていますね。これで、お問い合わせフォームの設置は完了です。

Follow me!