お問い合わせフォームはプラグインを使えば簡単に作れます。
今回はお問い合わせフォームのプラグインでは一番有名だと思われるContact Form 7 を使った方法をご紹介していきます。
効率よくWordPress制作したい人はこちら
Contact Form 7の使い方
Contact Form 7はデザインを変更する必要がなければコードを書くことなく設置可能です。
流れとしては、
- プラグインをインストールして有効化
- お問い合わせフォームを作成
- 自動返信メールを作成
- サンクスページを作成（必要に応じて）
- フォームを表示させたいページにショートコードを貼る
このようになります。
サンクスページに関してはContact Form 7の機能にはなく、自作する必要があります。
サンクスページの作り方については以下の記事を参照してください。
Contact Form 7でフォームごとにサンクスページを振り分ける方法
インストール～有効化
まずはプラグインをインストールします。
管理画面左のプラグイン→新規追加をクリックします。
そして「Contact Form 7」と検索すると富士山のイラストが描いてあるプラグインが表示されるので、これをインストールします。
インストールしたらボタンが有効化という表示に変わるので、そのままクリックして有効化して下さい。
すると管理画面左に「お問い合わせ」という項目が増えているのが分かります。
ここでコンタクトフォームを選択すると、現在作成されているフォームが確認出来ます（下の画像に表示されている「コンタクトフォーム1」はデフォルトで用意されている物です）
フォームを作成
続いてフォームを作成していきます。
元々あるフォームを編集しても構いませんが今回は新規作成してみましょう。
新規作成で表示される画面がこちらです。
タイトルの「お問い合わせ」は自分が記入した物ですが、フォームの中身は元から記入されています（デフォルトで用意されているフォームと同じ内容です）
今回はこのデフォルトの状態で進めていきたいと思います。
他の項目（ドロップダウンメニューやラジオボタン）については別の記事にまとめる予定ですm(__)m
自動返信メールの設定（管理者宛て）
お問い合わせフォームには自動返信が欲しいと思います。
自動返信メールの設定にはフォームの隣にあるメールというタブを選択します。
すると自動返信の内容が表示されます。
1つずつ見てみます。
送信先
メールを受信したい管理者のメールアドレスを設定します。
初期値はWordPressをインストールした時に設定したメールアドレスになっています。
送信元
送信元のメールアドレスを設定します。
初期値は「サイト名：wordpress@ドメイン名」となっています。
ここのドメイン名はサイトのドメイン名でないといけません（初期値は自動で反映されます）
ここで一旦フォーム画面と見比べてみます。
左がフォーム画面で右が自動返信メールの内容になります。
例えばフォームの赤枠で囲った「your-name」に入力された内容は、自動返信メールでは差出人の所に反映されます。
このようにフォームの [ ] 内にある名前と自動返信メールの名前を同じにすることで、フォームで入力した内容が自動返信メールに反映されます。
ただし自動返信メールの文章はサイトによって編集するのが良いかと思います。
例えば題名は初期値だと「サイト名：入力された題名」ですが、「ホームページからのお問い合わせ」としたり、メッセージ本文も「ホームページからお問い合わせがありました。」と追記するのもありかと思います。
※メッセージ本文は全部自由に書き換えてOKですが、[your-name]や[your-subject]など入力項目を書いておかないと入力内容が分からないメールが届きます。
メッセージ本文のデフォルトはこちら
差出人: [your-name] <[your-email]>
題名: [your-subject]
メッセージ本文:
[your-message]
--
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されましたこれをこのように変更してもOKです
ホームページからお問い合わせがありました
題名：[your-subject]
氏名：[your-name] 様
メールアドレス：[your-email]
メッセージ本文：
[your-message]
自動返信メール（お問い合わせ相手宛て）
先ほどの自動返信メールはホームページにお問い合わせがあった時に管理者に通知されるメールでしたが、お問い合わせをした相手にも自動返信メールは送りたいと思います。
その場合は先ほどのメールタブを開いて下の方にスクロールしていくと、メール(2)というチェック項目があります。
メール(2)ってなんだ？と思うかも知れませんが、これがお問い合わせメールを送った相手に対する自動返信メールとなります。
ここにチェックを入れると先ほどの管理者宛ての自動返信メールの入力画面と同じような画面が表示されます（チェックを入れる前は隠れています）
ここの [your-email] はお問い合わせフォームに入力されたメールアドレスですね。
なので万が一お問い合わせした方がメールアドレスを間違って入力していたら当然返信出来ません。
ここも題名やメッセージ本文など、デフォルトのままだと味気ないので題名は「お問い合わせありがとうございました」、メッセージ本文には、
「このたびはお問い合わせありがとうございます。
ご入力された内容は下記のとおりです。
追って担当者より確認のご返信をいたしますのでもう少々お待ちください。」
など、文章を変える事も出来ます。
サンクスページの作り方
Contact Form 7にはサンクスページの機能はないので、固定ページで自作してメールを送信後にそのページに飛ぶように設定する必要があります。
その方法については冒頭でもご紹介しましたが、以下の記事に書いています。
お問い合わせフォームが複数あり、サンクスページも複数ある場合についての記事ですが、1つしかない場合についても書いてあります。
Contact Form 7でフォームごとにサンクスページを振り分ける方法
フォームの設置
これでフォームは完成したので、あとはフォームを設置するだけです。
フォームを設置するにはお問い合わせフォームの編集画面に書いてあるショートコードを使います。
このコードを表示させたいページに貼ります。
例えばHOMEとタイトルを付けたトップページに貼り付けてみます。
するとトップページではこのように表示されます（WordPressのデフォルトテーマのTwenty Twenty-Oneの場合）
オリジナルテーマでテンプレートに貼り付ける場合
先ほどは固定ページのテキストエディタに直接貼りましたが、オリジナルテーマの場合はテンプレートに貼り付ける事が多いと思います。
その場合はフォームを表示させたい箇所に以下のようにして貼ります。
<?php echo do_shortcode('ショートコード'); ?>ショートコードだけでは駄目なのでご注意下さい。
今回は以上になります。
フォームの入力方法については1つ1つ解説していくと長くなるので、また別の記事にまとめたいと思いますm(__)m
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
WordPress案件の単価と作業効率を上げる！
（平均スコア）
