超簡単！お問い合わせフォームの設置手順

こんにちは。

Webサイトを作るうえで必要となるのが「お問合せフォーム」。

お問い合わせフォームの作り方をネットで調べて、ContactForm7というプラグインにたどり着いた方は多いのではないでしょうか。

ContactForm7でお問い合わせページを設置することはできたけど、もう少しかっこよくしたいと思ってもなかなかうまくいきません。

そこで、今回はWordpressの定番プラグイン「Contact Form 7」を使って、お問い合わせページの設置手順をスクリーンショット付きで解説していきます。

完成イメージ

当サイトの「お問合せフォーム」と同じものを作っていきます。

完成イメージはこんな感じ。

入力項目は、

その他の仕様は、

という感じになります。

お問い合わせフォームの作成

固定ページの作成

では、いよいよ制作に入ります。

まずはじめに、お問い合わせ画面を表示するための固定ページを作成します。

この時点では、本文は空っぽでかまいません。

ページのタイトルとパーマリンク設定だけ行って保存してください。

ここでは、ページタイトルを「お問い合わせ」、パーマリンクを「contactus」としています。

これでいったん保存して、次はフォームの作成にはいります。

フォームの作成

コンタクトフォームの新規追加

コンタクトフォームの新規追加を行うと次のような画面が開きます。

まずは、フォームのタイトルを入力します。ここは任意でかまいません（ページタイトルではないのでページにも表示されません）

フォームの設定

次にフォームを作っていきます。

コンタクトフォームを新規追加するとデフォルトでサンプルコードが入力されていますが、これを全て削除して、以下のコードをコピペします。

 フォームのコード
<table class="class-contact-form">
<!- お名前 ->
<tr>
<th>
<span class="required">必須</span><span>お名前</span>
</th>
<td>
[text* your-name class:textsp placeholder""]
</td>
</tr>
<!- 会社名->
<tr>
<th>
<span class="optional">任意</span><span>会社名</span>
</th>
<td>
[text your-company class:textsp placeholder"株式会社〇〇"]
</td>
</tr>
<!- メールアドレス->
<tr>
<th>
<span class="required">必須</span><span>メールアドレス</span>
</th>
<td>[email* your-email class:mailsp placeholder"abc@example.com"]</td>
</tr>
<!- 題名 ->
<tr>
<th>
<span class="optional">任意</span><span>件名</span>
</th>
<td>
[text your-subject class:textsp ]
</td>
</tr>
<!- 内容->
<tr>
<th>
<span class="required">必須</span>
<span>内容</span>
</th>
<td>
[textarea* your-message class:content ]
</td>
</tr>
</table>
<p style="text-align: center;"><span style="font-size: 70%;">
<a href="URLを入力" target="_blank" rel="noopener">当社のプライバシーポリシーはこちら</a></span></p>
[submit id:formbtn "上記の内容で送信する"]
require __DIR__ . '/wordpress/wp-blog-header.php';

コピペしたら「保存」ボタンを押して完了です。

メールの設定

次にコンタクトフォームのメールタブを開きます。

ContactForm7は、サイトの訪問者がお問い合わせフォームに内容を入力して送信すると、Wordpressから自分宛にメールが届く仕組みになっています。

ここではそのためのメールの設定を行います。

送信先：
メールの送り先です。通常は自分が普段使っているメールアドレスを設定します。複数のアドレスを指定したい場合は、カンマ区切りでメールアドレスを追記しましょう。

送信元：
メールの発信元アドレスになります。サイトドメインと同じアドレスを使用しましょう（ContactForm7の仕様上、他のサイトドメインのアドレスを使うと正常に動作しない可能性があるとのこと）ちなみに当サイトのドメインは、「rmcoffice.com」ですので、送信元に設定するメールアドレスは、「〇〇〇@rmcoffice.com」ということになります。

題名：
送られてくるメールの題名です。ここは任意ですが、送られてきたメールを見落とすことのないように【問い合わせメール】とか【ホームページから問合せがありました】といったわかりやすいタイトルにすることをお勧めします。

また、サイト訪問者が入力した題名をメールの件名にも表示させたい場合は、"[your-subject]"と入力しておきます。

ちなみに、[your-subject]はフォームに記入したコードで定義した件名の名前です（下記コードのピンク部分）

 フォーム題名
<tr>
<th>
<span class="optional">任意</span><span>件名</span>
</th>
<td>
[text* your-subject class:textsp ]
</td>
</tr>

追加ヘッダー：

ここはデフォルト設定のままで結構です。

デフォルト設定では、メールに返信した際の送信先のアドレスをサイト訪問者が入力したアドレスに返信するように設定されています。

設定を完了したら「保存」を押します。

お問い合わせページへのフォーム設置

「保存」すると、下の図のようにコンタクトフォームのショートコードが表示されますので、コードをお問い合わせページにコピペします。

こんな感じで貼り付けます。

お問い合わせページにフォーム以外に説明文などを追加したい場合は、固定ページの中に追記すればOKです。

この時点でお問い合わせページを表示して、下のような画面が表示されればOKです。

次にお問い合わせフォームのフォームデザインを整えていきます。

フォームデザインのカスタマイズ

デザインのカスタマイズは、CSSの追加で行います。

CSSを追記する場所は、カスタマイズ→追加CSSでエディタが開くので、そこに追記しましょう。

ここに以下のコードをコピペすればOKです。

サイトの雰囲気に合わせて色やフォントサイズなどを変えたい場合は、ピンクの箇所を自分で変更してみてください。

 cssカスタマイズ
/*Contact Form 7カスタマイズ*/
/*PC表示*/
/*見出し列*/
.class-contact-form th{
width:30%;
text-align:left;
font-size:14px;
color:#292929;
padding-right:5px;
background:#F5FBFF;
border:solid 1px #EBEBEB;
}
/*入力フォーム*/
.class-contact-form td{
font-size:12px;
border:solid 1px #EBEBEB;
}
/*横の方向の罫線*/
.entry-content .class-contact-form tr{
border:solid 1px #EBEBEB;
}
/*テーブル全体の罫線*/
.entry-content table{
border:solid 1px #EBEBEB;
}
/*「必須」ラベルの調整*/
.required{
font-size:7px;
padding:5px;
background:#FC768E;
color:#FFFFFF;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
/*「任意」ラベルの調整*/
.optional{
font-size:7px;
padding:5px;
background:#88E6FD;
color:#FFFFFF;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
/*スマートフォン表示*/
@media(max-width:500px){
.class-contact-form th,.class-contact-form td {
display:block!important;
width:100%!important;
border-top:none!important;
-webkit-box-sizing:border-box!important;
-moz-box-sizing:border-box!important;
box-sizing:border-box!important;
}
.class-contact-form tr:first-child th{
border-top:1px solid #d7d7d7!important;
}
/* 「必須」のフォントサイズ */
.class-contact-form .required {
font-size:10px;
}
/* 「任意」のフォントサイズ */
.class-contact-form .optional {
font-size:10px;
}}

コピペが終わったら、「公開」ボタンを押して、フォームデザインが変わっていることを確認しましょう。

あとは、色やフォントサイズなどのパラメータ（上記CSSコードのピンク文字部分）を変えながら、自分のイメージに合うデザインに仕上げてください。