プラグイン:Contactform7を使って問い合わせフォームを作る【自社で使っているコード付き】

こんにちは。㈱シンラウンド代表の中島 達(@NakajimaSatoru)です。

WordPressのサイトにお問い合わせフォームを作る際に、多くの方が使っている「Contactform7」

このプラグインを利用する事で、簡単に問い合わせフォームを作る事が出来ます。
(少しコードの様なものを書かなければいけないため、苦手意識を持つ方もいらっしゃるかもしれませんが…)

そこで、今回は「Contactform7のインストールから設定まで」をご紹介いたします。

また、ウチのコーポレートサイトで使っている問い合わせフォームのHTMLとCSSも掲載しておきますので、よければ参考にしてください。
(そのままコピペで利用してもらっても大丈夫です。)

プラグイン:Contact form 7の使い方

プラグイン:Contact form 7のインストール&有効化

管理画面にログインし、[プラグイン]-[新規追加]をクリック

検索窓に「contact form 7」と入力

「contact form 7」を「今すぐインストール」⇛「有効化」を実施

プラグイン:Contact form 7での問い合わせフォーム作成

左メニュー[お問い合わせ]-[新規追加]をクリック

[タイトル]と[フォーム]を入力の上、保存

緑の枠の画像がサイトで表示した時の画面です。

メニューより追加したい項目をクリック

項目を入力し、[タグを挿入]をクリック

[必須入力]にチェックを入れる事で、その項目を必須入力にする事が出来ます。

[デフォルト値]に入力を行い、[このテキストを項目のプレースホルダーとして使用する]にチェックを入れる事で、入力例を作る事が出来ます。

表示イメージ

フォームの追加が完了したら、[保存]の上で、[ショートコードをコピー]

フォームを追加するページに先程コピーしたショートコードを貼り付ける

問い合わせがあった際のメール転送の設定

[メール]のタブをクリック

必要な項目を入力

  • 送信先:
    問い合わせがあった際のメール送信先
  • 送信元:
    メール送信元ですが、自分から自分に送る形になるので、適当なメールアドレスを設定してください。
  • 題名:メール題名
  • 追加ヘッダー:
    CcやBccを追加する時に利用します。(今回は無しで大丈夫です。)
  • メッセージ本文:
    入力項目の番号と紐付いていますので、フォームにあわせて追加してください。

お客様にも自動返信する場合には

[メール (2) を使用]にチェックを入れ、同様にメール転送設定を行ってください。

問い合わせフォーム設定における注意事項

お問い合わせフォームの作成や、フォームの変更を行った際には、

  • お問い合わせが動作するか?
  • 入力された項目がきちんとメールに反映しているか?

を必ず送信のテストを行いましょう。

設定ミスをしていると、大きな機会損失になってしまいます。

まとめ

今回は、Contact form 7を利用したお問い合わせフォームの設定方法に関して、ご紹介させて頂きました。

お問い合わせなどのフォームに関しては、改善による効果が非常に高くなります。
そのため、項目を追加・削除などを行いながら、PDCAを回してください。

お問い合わせフォームなどの改善の事をEFO(Entry Form Optimization, 入力フォーム最適化)と言います。

参考:ウチのコーポレートサイトで利用しているHTML+CSS

ウチのコーポレートサイトで利用しているHTML+CSSを掲載させて頂きますので、参考にしてください。
そのままコピペで利用してもらっても大丈夫です。
※テーマの環境などによっては、同様の表示にならない場合もあります。ご了承ください。

問い合わせフォーム画像

HTML

<table class="table-res-form">

<tr>
<th>会社名・事務所名<span class="requied">必須</span></th>
<td>[text* text-761]</td>
</tr>

<tr>
<th>担当者名<span class="requied">必須</span></th>
<td>[text* your-name] </td>
</tr>

<tr>
<th>メールアドレス<span class="requied">必須</span>
</th>
<td>[email* your-email] </td>
</tr>

<tr>
<th>電話番号<span class="requied">必須</span>
</th>
<td>[tel* tel-190]</td>
</tr>

<tr>
<th>相談内容<span class="requied">必須</span></th>
<td>[checkbox* checkbox-304 "「お客様の声」動画制作" "メールマガジンでの動画配信サポート" "Webサイト制作・修正" "コンサルティング" "運用・保守サポート" "その他"]</td>
</tr>

<tr>
<th>相談内容詳細<span class="requied">必須</span></th>
<td>[textarea your-message x4]</td>
</tr>
</table>

<div class="contact-submit">
[submit "送信する"]

</div>

CSS

.table-res-form {
	width: 80%;
	margin:0 auto;
	margin-top:50px;
	border:none;
}

.table-res-form th, td {
	border: none!important;
	padding: 1.5em;
	text-align: center;
	background-color:#fff;
}

.table-res-form th {
	width: 30%;
	text-align: right;
}

.table-res-form .requied {
	font-size: 0.3em;
	color: #FFF;
	display: inline-block;
	margin:0 0 0 1em;
	padding: 0.1em 0.3em 0.1em;
	background: red;
}

.table-res-form input[type="text"], input[type="email"], input[type="tel"],textarea {
	padding: 0.5em;
	width: 100%;
}

input[type="text"]:focus,input[type="tel"]:focus,textarea:focus, input[type="email"]:focus {
	outline: solid 2px #007130!important;
}

/*送信ボタン*/

.contact-submit{
	text-align:center;
	margin-top:10px;
}

.contact-submit
 input[type="submit"] {
	border: 1px #007130 solid;
	padding: 1em 4em;
	background: #007130;
	box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
	font-weight: bold;
	margin:0 auto;
}

/*送信ボタン・マウスオーバー時*/

.contact-submit input[type="submit"]:hover {
	background: #fff;
	box-shadow: none;
	color:#007130!important;
}


/*問い合わせフォーム-リストを縦並び*/

.wpcf7-list-item {
	text-align: left;
	margin-top:10px;
	display: block!important;
}


/*ここからspの指定*/

@media only screen and (max-width: 480px) {
	
	.contact-page-text{
	width: 100%;
	margin:0 auto;
}


.table-res-form {
	width: 100%;
	margin:0 auto;
}

/*thとtdをブロック化して幅100%にして、縦積み*/
.table-res-form th, td {
	width: 100%;
	display: block;
	padding: 1.0em;
}

/*th(項目名)欄の不要な余白削除・テキスト左寄せ*/
.table-res-form th {
	padding-bottom: 0;
	text-align: left;
}
/*不要な最終行の左のthを非表示にする*/
.table-res-form .empty {
	display: none;
}

}

投稿者プロフィール

中島 達(Nakajima Satoru)
中島 達(Nakajima Satoru)
株式会社Synround 代表取締役

「続ける。 」をコンセプトに、Webマーケティングにおける戦略立案/サイト制作/システム保守/コンテンツ制作を実施。

web、動画は作っただけでは意味が無くて、そこから育てて行く物。ただ、中小企業、小規模税理士事務所では人や費用により続けることが難しいため、続けるための環境作りをしてます。

過去の事業:Webサービス×2、レンタルスペース5店舗

ABOUTこの記事をかいた人

株式会社Synround 代表取締役 「続ける。 」をコンセプトに、Webマーケティングにおける戦略立案/サイト制作/システム保守/コンテンツ制作を実施。 web、動画は作っただけでは意味が無くて、そこから育てて行く物。ただ、中小企業、小規模税理士事務所では人や費用により続けることが難しいため、続けるための環境作りをしてます。 過去の事業:Webサービス×2、レンタルスペース5店舗