WordPressではデフォルトではお問い合わせフォームはありません。
そこで私がメインで使っている無料のプラグイン「Contactform7」の使い方について解説していきます。
ここではデフォルトのまんまではなく、以下のような２カラムに分かれたテーブル形式のフォームを作りますよ。
当サイトのお問い合わせフォームも同様の形になっていますので実際に見てみたい方はこちらからご確認ください。
momoコピペして使えるコードを記載しておきますのでぜひ利用してください！
なぜContactform7を使うのか
他にもいくつかプラグインはありますが、これのおすすめポイントとして
- 日本の制作者が作っていて翻訳の必要がない
- 細かいアップデートが行われていて安心
- gmailでも迷惑メールになりにくい【地味に重要】
他のプラグインは、gmailを送受信先にした際、迷惑メールに入りやすく、受け取りミスが増えるんですよね。
これはContactform7の利用者が増えたことで、「このプラグインから送信されたメールは迷惑メールじゃないですよ」という情報が増えてきたおかげかと思います。
なので、基本的にはこれを使用しています。
デメリットとしてHTMLのスキルがない人にはカスタマイズが限られてくる
Contactform7のデフォルトの入力欄は、必要最低限のことしか書かれていません。
初心者の方には項目を増やすのも一苦労ですよね。
というわけで、この記事内にコピペ用のコードを記載しますので、ぜひ使ってください。
1）プラグインをインストールする
今すぐインストールボタンを押してしばらくすると、インストールが完了し、「有効化」というボタンに変わりますので、クリックして有効化します。
これでインストールは完了です。
２）実際にお問い合わせフォームを作ろう
今回はデフォルトのままではなく、このようなテーブル（表）になっているお問い合わせフォームを作ります。
そうするとフォームの一覧画面が表示されます。既にサンプルが用意されていますのでそれを使いましょう。
「コンタクトフォーム１」という名前をクリックします。
まずデフォルトでは画像のようになっていますが、これですと形がシンプルすぎるので、今回はテーブル形式にします。以下のコードを丸々コピペして、フォーム入力画面にペーストしてください。
入力欄はオーソドックスな項目のみとなっています。初心者の方はまずこのまま進めてください。
<section class="contact-form">
<table>
<tr>
<th>お名前 <span class="red">*</span></th>
<td>[text* your-name autocomplete:name]</td>
</tr>
<tr>
<th>電話番号 <span class="red">*</span></th>
<td>[tel* tel-001]</td>
</tr>
<tr>
<th>メールアドレス <span class="red">*</span></th>
<td>[email* your-email autocomplete:email]</td>
</tr>
<tr>
<th>お問い合わせ内容 <span class="red">*</span></th>
<td>[textarea* your-message] </td>
</tr>
</table>
<div class="center">
[submit "送 信"]
</div>
</section>送信されたメールを自分で受け取るための設定をします。
「メール」タブをクリックすると、以下の画面になります。
各項目に記入すること
| 送信先 | 受け取りたいメールアドレスをここに記述します。 デフォルトではWordpressの設定の際に指定したメールアドレスですが、変更したい場合はメアドのみ記述してください（[]は不要） 例）info@hogehoge.com |
| 送信元 | デフォルトでは「サイト名」「Wordpress」が表示されますが、ここも上記のメールアドレスに変更しましょう。 例）〇〇公式サイト <info@hogehoge.com> |
| 題名 | 受け取るメールのタイトルです。 例）サイトよりお問い合わせがありました。 |
| 追加ヘッダー | ここはCCやBCCなどを入れたい場合に記入します。不要の場合はこのままで大丈夫です。 例）Bcc: sample@hogehoge.net |
| メッセージ本文 | 送られてきた内容を表示するための欄です。フォームで使用した項目を全て入れます。先ほどコピペしたフォーム用の雛形を以下に掲載しますのでコピーしてください。 |
| 添付ファイル | デフォルトでは空欄でOKです。 |
メッセージ本文用のテキストはこちら（コピペしてね）
Webサイトよりお問い合わせがありました。
お名前： [your-name]
電話番号： [tel-001]
メールアドレス： [your-email]
お問い合わせ内容：
[your-message]
以上
お問い合わせフォームを利用した方に向けて自動返信メールを設定しましょう。
画面下にある「メール（２）を使用」にチェックを入れます。
そうするとさっき自分宛のメール設定と同じフォーマットが出現しますので、以下を参考に入力してください。
| 送信先 | ここは送信者が入力したメアドになるよう[your-email]のままでOK |
| 送信元 | デフォルトでは「サイト名」「Wordpress」が表示されますが、ここは自分のメールアドレスに変更しましょう。 例）〇〇公式サイト <info@hogehoge.com> |
| 題名 | 送信者が受け取るメールのタイトルです。パッとみてどこから届いたのか分かりやすいように頭にサイト名を入れましょう。 例）【〇〇公式サイト】お問い合わせを受け付けました。 |
| 追加ヘッダー | 送信者さんがこのメールに返信する際に、どこに届くようにするかを設定できます。問題なければデフォルトのままでOKです。指定する際は自分が受け取りたいメアドを書きましょう。 例）Reply-To: sample@hogehoge.net |
| メッセージ本文 | どんな内容を送ったのかの確認ようです。こちらも、用意したコピペできるフォーム用の雛形を以下に掲載しますのでコピーしてください。 |
| 添付ファイル | デフォルトでは空欄でOKです。 |
自動返信メッセージ本文用のテキストはこちら（コピペしてね）
[your-name] 様
この度は当サイトへのお問い合わせありがとうございます。
以下の内容で受け付けましたので、ご確認ください。
追って担当者よりご連絡差し上げますので、今しばらくお待ちください。
【受付内容】
お名前： [your-name]
電話番号： [tel-001]
メールアドレス： [your-email]
お問い合わせ内容：
[your-message]
================
〇〇サイト名
https://サイトのURL
※住所など必要な情報を最後に記入します
ページ下部の「保存」ボタンを押して、保存しましょう。
３）「お問い合わせ」ページを作る
さて、お問い合わせフォーム自体の設定が済んだら、今度はそのフォームを設置するための「お問い合わせページ」を作ります。
ここではブロックエディタでの使い方を説明します。
固定ページを新規で作成し、そのタイトルを「お問い合わせ」や「Contact」などに設定してください。
ブロック一覧が表示されますので、検索窓に「Contact form7」と入力します。
そうすると以下の富士山アイコンのContact Form7が出てきますので、クリックします。
先ほど作成した「コンタクトフォーム１」を選択します。
ここまで出来たら公開ボタンを押して実際のページをチェックしてみましょう！
４）CSSで見た目を調整する
では、実際に設置できたフォームを確認してみましょう。
あれ、なんか地味ですよね・・・笑
この状態でも使えないことはありませんが、必須マークの*と、送信ボタンを整えましょう。
また、スマホで見ると入力欄が見にくいので、縦並びにもしたいですね。
以下のコードをコピーして、外観＞「カスタマイズ」＞「追加CSS」にペーストしてください。
/*お問い合わせフォーム用*/
.contact-form .red{
color: #AA1C1E;
}
.contact-form .center{
text-align: center;
}
.contact-form .center input[type="submit"]{
background: #145EA7; /*背景色*/
color: #FFF; /*文字色*/
margin: 15px auto;
padding: 10px 25px;
}
.contact-form .wpcf7-spinner{
position: absolute;
}
@media screen and (max-width: 600px){
.contact-form {
width: 100%;
}
.contact-form th,.contact-form td{
display: block;
border-bottom: 0;
}
.contact-form input,.contact-form textarea{
width: 100%;
}
.contact-form .center input[type="submit"]{
width: 65%;
margin: 15px auto;
text-align: center;
}
}これでモバイルではフォームが縦になって入力しやすくなります！
ボタンの色はお好みで変更してくださいね。
これでフォームが完成！
表示確認ができたら、ご自分で送受信のテストをしてみてください。
うまくメールが送信されていたら完成です！
オプション：迷惑メール対策をしましょう
WordPressのお問い合わせフォームは狙われやすく、迷惑メールやスパムが届くことが多いので、対策しましょう！googleが提供してくれているreCAPTCHAという対策ツールを使用します。
難しそうですが全然簡単にできるので、ぜひやっておきましょう。
こちらの記事で説明しています
プライバシーポリシーも忘れずに
こちらの記事で説明しています
お問い合わせフォームを設置する場合は個人情報の取り扱い方法を記載する必要がありますので、上記の記事を参考にプライバシーポリシーページも作ってくださいね。
思っていたより長くなってしまいましたが、これを読みながら作ってもらったらご自身でフォームができると思いますので、ぜひ挑戦してみてください！
お問い合わせフォームが作れるだけでサイト制作のクオリティ・レベルがグッと上がりますよ。
わからないところがありましたら是非コメントなどで教えてください！
コメント