コピペでOK！「Contact Form 7」を使ったかっこいいお問い合わせフォームテンプレート集

すでに購入意欲を持ったユーザーが、入力フォームが使いづらいがために購入をやめてしまうこともあります。サイトへの流入はあるのに成果が上がらない、フォームPV数とコンバージョン数に差がある。そんな時には入力フォームを見直すべきかもしれません。

今回は「Contact Form 7」で使用できるコンタクトフォームのテンプレート集を作成しました。ぜひTCDテーマと合わせてご活用ください。

※テーマのカスタマイズはあくまで個人の責任の範囲でお願いします。万が一カスタマイズによって不具合が生じましても弊社及び弊サイトでは責任を負いかねます。カスタマイズの際は必ずバックアップをご用意の上、行ってください。

ContactForm7の導入の仕方はこちらをご覧ください。
お問い合わせフォームプラグイン「Contact Form 7」カスタマイズまとめ

テンプレート集

下記のそれぞれの用途に適するお問い合わせフォームのソースコードを公開しています。クリックして任意のフォームへジャンプしてみてください。そのままコピペしてお使いいただけます。

デフォルトフォーム
一般企業用のフォーム
採用情報用のフォーム
商品問い合わせフォーム
資料請求用のフォーム
メールマガジン用のフォーム
説明会用のコンタクトフォーム

デフォルトフォーム

一般的なフォームになります。必要最低限の情報を記載しました。

フォーム例

※実際には問い合わせできませんのでご注意ください。

フォームソースコード

<p>お名前 <span class="required" >(必須)</span><br />
    [TEXT* your-name watermark" 例）出座院プラス"] </p>

<p>ふりがな <span class="required" >(必須)</span><br />
    [TEXT* your-ruby watermark" 例）でざいんぷらす"]</p>

<p>メールアドレス <span class="required" >(必須)</span><br />
    [email* your-email watermark" メールアドレス <必須>" ] </p>

<p>郵便番号<span class="any" >(任意)</span><br />
[TEXT zip id:zip 10/ watermark" 郵便番号" ]</p>

<p>住所<span class="any" >(任意)</span><br />
[TEXT addr id:addr watermark" 住所" ]</p>

<p>題名<span class="any" >(任意)</span><br />
    [TEXT your-subject watermark" 題名"] </p>

<p >メッセージ本文<span class="any" >(任意)</span><br />
    [textarea your-message] </p>

<p>こちらの文字列を入力してください。 <span class="required" >(必須)</span></p>
[captchac captcha-170]
[captchar captcha-170 4/4]

[response]

<p>[submit "入力内容を送信する"]</p>

※TEXTはtextに変更しお使いください。

CSSソースコード

/* --- お問い合わせフォーム --- */
/* デザインカスタマイズ */
div.wpcf7 { background:#fafafa; border:1px solid #ddd; padding:0px; -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin:0 0 30px 0; }
div.wpcf7 p { padding:20px 20px 0; margin:0; font-size:11px; }
div.wpcf7 input, .wpcf7 textarea { border:1px solid #ccc; padding:8px; font-size:14px; }
div.wpcf7 textarea { width:97.5%; height:300px; }
div.wpcf7 input.wpcf7-submit {
   cursor:pointer; color:#fff; font-weight:bold; font-size:14px; width:200px; height:45px; margin:0 auto; display:block;
   -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
   background:#333; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), inset 0px 32px 0px -12px #808080; border:1px solid #666;
}
div.wpcf7 input.wpcf7-submit:hover { background:#006080; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), inset 0px 32px 0px -12px #007ea8; border:1px solid #006080; }
.wpcf7 input.wpcf7-submit:active { box-shadow:none; bottom:-2px; position:relative; }
.wpcf7 input:focus, .wpcf7 textarea:focus { border:1px solid #009de1; }
.wpcf7-captchac { border:1px solid #ccc; }


/* エラー個所をわかりやすく表示 */
.wpcf7 .wpcf7-not-valid { background: #ffb6c1; }
.wpcf7 span.wpcf7-not-valid-tip {font-size: 80%;}
.wpcf7 .wpcf7-response-output {margin: 10px 0 0; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.wpcf7 .wpcf7-validation-errors {color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7;}
.wpcf7 .wpcf7-mail-sent-ok {color: #3A87AD; background-color: #D9EDF7; border: 1px solid #BCE8F1;}

/* 必須赤色表示 */
.wpcf7 .required { color: #f00;}
/* 任意緑色表示 */
.wpcf7 .any{ color: #080;}

必須項目は「必須」と明記し赤色に変更！

必須画面

記入内容を必須項目にしたい場合には「*」をコマンドにつけてください。
また、ユーザビリティを考慮し、必須項目に色付けをしています。
※CSSのカスタマイズはどのスタイルシートでも構いませんが、お勧めはお使いのテーマのメインのスタイルシートです。プラグインのスタイルシートを編集するのはよくありません。プラグインがアップデートされたら変更内容が上書きされてしまうからです。テーマもアップデートされることがありますが、一般的にはテーマよりプラグインの方が頻繁にアップデートされます。
弊社ではstyle.cssのテーマを編集しています。

【form】

<span class="required" >(必須)</span>

【css】

.wpcf7 .required {
color: #ff0000;
}

エラー表示は一度で行い、訂正箇所が分かりやすいようにする

送信ボタンを押した際に記入ミスがある場合は訂正箇所をわかりやすく表示するようにしています。

【css】

.wpcf7 .wpcf7-not-valid {
    background: #ffb6c1;
}
.wpcf7 .wpcf7-response-output {
    margin: 10px 0 0;
    padding: 8px 35px 8px 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.wpcf7 .wpcf7-validation-errors {
        color: #B94A48;
        background-color: #F2DEDE;
        border: 1px solid #EED3D7;
    }
.wpcf7 .wpcf7-mail-sent-ok {
        color: #3A87AD;
        background-color: #D9EDF7;
        border: 1px solid #BCE8F1;
    }

応答メッセージの位置を変更する

[response]を追加する。
記載した位置にエラーメッセージが表示されるようになります。

例文を記載

入力がわかりやすいようにwatermarkを追加し、例文を表示しています。

<p>お名前 <span class="required" >(必須)</span><br />
    [TEXT* your-name watermark" 例）出座院プラス"] </p>

郵便番号からの自動入力機能

郵便番号から住所を自動入力するためにはスクリプト「ajaxzip3」を使用します。

head内に以下を追加してください。
【HTML】

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://ajaxzip3.github.io/ajaxzip3.js"></script><script type="text/javascript">
$(function(){
  $('#zip').keyup(function(event){
    AjaxZip3.zip2addr(this,'','addr','addr');
  })
})
</script>

フォーム部分は以下のように記載すると郵便番号から自動で住所が入力されるようになります。
【form】

<p>郵便番号[TEXT zip id:zip 10/  ]</p>
<p>住所[TEXT addr id:addr ]</p>

文字認証機能

ロボットからのスパムメールの回避のため
簡単な文字認証機能を追加しています。
「プラグイン」→「新規追加」→「プラグイン検索」
より「Really Simple CAPTCHA」を検索し、ダウンロードしてください。
有効化し、下記のようにフォームに記入すると使用可能です。
【form】

[captchac captcha-170]
[captchar captcha-170 4/4]

※TEXTはtextに変更しお使いください。

一般企業用のフォーム

コーポレートサイトなどでよくあるフォームです。

フォーム例

※実際には問い合わせできませんのでご注意ください。

フォームソースコード

<p>会社名/組織名 <span class="required" >(必須）</span><br />
    [TEXT* your-business  watermark" 例）株式会社デザインプラス"]</p>

<p>業種 <span class="required" >(必須）</span><br />
    [TEXT* your-industry watermark" 例）インターネットメディア事業"] </p>

<p>部署/支店名<span class="any" >(任意）</span><br />
    [TEXT your-store] </p>

<p>お名前 <span class="required" >(必須)</span><br />
    [TEXT* your-name watermark" お名前 <必須>"] </p>

<p>電話番号 <span class="required" >(必須)</span><br />
    [TEXT* your-tel] </p>

<p>FAX<span class="any" >(任意)</span><br />
    [TEXT your-fax] </p>

<p>メールアドレス <span class="required" >(必須)</span><br />
    [email* your-email watermark" メールアドレス <必須>" ] </p>

<p>URL<span class="any" >(任意)</span><br />
     [TEXT your-url] </p>

<p>郵便番号 <span class="required" >(必須）</span><br />
[TEXT* zip id:zip 10/ watermark" 郵便番号" ]</p>

<p>住所 <span class="required" >(必須）</span><br />
[TEXT* addr id:addr watermark" 住所" ]</p>

<p>題名<span class="any" >(任意)</span><br />
    [TEXT your-subject watermark" 題名"] </p>

<p>メッセージ本文 <span class="required" >(必須）</span><br />
    [textarea* your-message] </p>


<p>こちらの文字列を入力してください。 <span class="required" >(必須)</span></p>
[captchac captcha-170]
[captchar captcha-170 4/4]

[response]

<p>[submit "入力内容を送信する"]</p>

※TEXTはtextに変更しお使いください。

採用情報用のフォーム

採用申し込みで利用できるフォームです。

フォーム例

※実際には問い合わせできませんのでご注意ください。

フォームソースコード

新たに、ラジオボタン、ドロップボックスメニューを追加しています。

以下の項目にご記入頂き、内容を確認の後、メールをお送りください。
後日担当者よりご連絡差し上げます。必須項目には必ずご記入頂く様お願い致します。

<p>お名前 <span class="required" >(必須)</span><br />
    [TEXT* your-name watermark" 例）出座院プラス"] </p>

<p>ふりがな <span class="required" >(必須)</span><br />
    [TEXT* your-ruby watermark" 例）でざいんぷらす"]</p>

<p>生年月日 <span class="required" >(必須)</span><br />
    [TEXT* your-ruby watermark" 例）平成22年8月1日"]</p>

<p>電話番号 <span class="required" >(必須)</span><br />
    [TEXT* your-tel watermark" 電話番号 <必須>" ] </p>

<p>メールアドレス <span class="required" >(必須)</span><br />
    [email* your-email watermark" メールアドレス <必須>" ] </p>

<p>郵便番号 <span class="required" >(必須）</span><br />
[TEXT* zip id:zip 10/ watermark" 郵便番号" ]</p>

<p>住所 <span class="required" >(必須）</span><br />
[TEXT* addr id:addr watermark" 住所" ]</p>

<p>新卒・既卒どちらかお選びください <span class="required" >(必須）</span><br />
    [radio radio-business "新卒" "既卒"]</p>

<p>新卒の方は卒業年月をご入力ください<span class="any" >(任意)</span><br />
    [TEXT your-graduationdate watermark"  例）平成25年3月30日卒" ] </p>

<p>最終学歴<span class="any" >(任意)</span><br />
    [select menu-education "大学院卒" "大学卒" "高専卒" "高校卒" "専門学校卒" "その他"] </p>

<h4 style="margin:10px">職務経歴</h4>
<p>社名<span class="any" >(任意)</span><br />
    [TEXT your-company] </p>

<p>職務内容<span class="any" >(任意)</span><br />
    [textarea your-job] </p>


<p>お問合せ内容 <span class="required" >(必須）</span><br />
    [textarea* your-message] </p>

[response]

<p>[submit "入力内容を送信する"]</p>

※TEXTはtextに変更しお使いください。

【css】
ラジオボタンやチェックボックスを縦表示に変更しています。

/* ラジオボタン縦表示 */
.wpcf7-list-item {
    display: block;
}

商品問い合わせフォーム

ECサイトなどを制作の方は商品に対する問い合わせなどに活用ください。

フォーム例

※実際には問い合わせできませんのでご注意ください。

フォームソースコード

<h3 style="margin:10px">お客様の情報をご記入ください</h3>
<p>お名前 <span class="required" >(必須)</span><br />
    [TEXT* your-name watermark" 例）出座院プラス"] </p>

<p>ふりがな <span class="required" >(必須)</span><br />
    [TEXT* your-ruby watermark" 例）でざいんぷらす"]</p>

<p>メールアドレス <span class="required" >(必須)</span><br />
    [email* your-email watermark" メールアドレス <必須>" ] </p>

<h3 style="margin:10px">商品の情報をご記入ください</h3>
<p>商品名<span class="required" >(必須)</span><br />
    [TEXT* your-subject watermark" 例）スマートフォン"] </p>

<p>商品番号<span class="required" >(必須)</span><br />
    [TEXT* your-item watermark" 例）XX-XXX-XXX"] </p>

<p>ご購入価格<span class="any" >(任意)</span><br />
    [TEXT your-price]  </p>

<p>ご利用店舗<span class="any" >(任意)</span><br />
    [TEXT your-shop] </p>

<p>商品についての意見・要望など<span class="required" >(必須)</span><br />
    [textarea* your-message] </p>


<p>こちらの文字列を入力してください。 <span class="required" >(必須)</span></p>
[captchac captcha-170]
[captchar captcha-170 4/4]

[response]

<p>[submit "入力内容を送信する"]</p>

※TEXTはtextに変更しお使いください。

資料請求用のフォーム

資料請求用の問い合わせなどに活用ください。

※実際には問い合わせできませんのでご注意ください。

フォームソースコード

<h3 style="margin:10px">お客様の情報をご記入ください</h3>
<p>お名前 <span class="required" >(必須)</span><br />
    [TEXT* your-name watermark" 例）出座院プラス"] </p>

<p>ふりがな <span class="required" >(必須)</span><br />
    [TEXT* your-ruby watermark" 例）でざいんぷらす"]</p>

<p>電話番号 <span class="required" >(必須)</span><br />
    [TEXT* your-tel watermark" 電話番号 <必須>" ] </p>

<p>メールアドレス <span class="required" >(必須)</span><br />
    [email* your-email watermark" メールアドレス <必須>" ] </p>

<p>郵便番号 <span class="required" >(必須)</span><br />
[TEXT* zip id:zip 10/ watermark" 郵便番号" ]</p>

<p>住所 <span class="required" >(必須)</span><br />
[TEXT* addr id:addr watermark" 住所" ]</p>

<p>題名<span class="any" >(任意)</span><br />
    [TEXT your-subject watermark" 題名"] </p>

<p>ご相談やメッセージをご記入下さい<span class="any" >(任意)</span><br />
    [textarea your-message] </p>


<p>こちらの文字列を入力してください。 <span class="required" >(必須)</span></p>
[captchac captcha-170]
[captchar captcha-170 4/4]

[response]

<p>[submit "入力内容を送信する"]</p>

※TEXTはtextに変更しお使いください。

メールマガジン用のフォーム

メルマガなどの場合は必要最低限の情報に留めておくのがおすすめです。

※実際には問い合わせできませんのでご注意ください。

フォームソースコード

<p>最新情報やメルマガ会員限定の割引情報など<br />
メールで無料配信しています。この機会にぜひご登録ください。</p>

<p>お名前 <span class="required" >(必須)</span><br />
    [TEXT* your-name watermark" 例）出座院プラス"] </p>

<p>ふりがな <span class="required" >(必須)</span><br />
    [TEXT* your-ruby watermark" 例）でざいんぷらす"]</p>

<p>メールアドレス <span class="required" >(必須)</span><br />
    [email* your-email watermark" メールアドレス <必須>" ] </p>

<p>[checkbox* checkbox-331 "利用規約に同意する"]<br />
<a href="#" target="_self">利用規約こちら</a></p>

[response]

<p>[submit "入力内容を送信する"]</p>

※TEXTはtextに変更しお使いください。

説明会用のコンタクトフォーム

セミナーなどをされている方は活用できるかと思います。

※実際には問い合わせできませんのでご注意ください。

フォームソースコード

<p>お気軽に参加下さい。まずは、下記の項目を入力の上、ご応募ください。</p>
<h3 style="margin:10px">開催内容</h3>
<p>開催日程 <span class="required" >(必須)</span><br />
    [select* menu-403 "2015年10月10日" "2015年11月11日" "2015年12月12日"]</p>

<p>開催会場 <span class="required" >(必須)</span><br />
    [radio radio-813 "札幌" "仙台" "東京" "名古屋" "大阪" "広島" "福岡"]</p>

<p>参加コース <span class="required" >(必須)</span><br />
    [checkbox* checkbox-873 "初心者コース" "中級者コース" "上級者コース"]</p>


<h3 style="margin:10px">お客様の情報をご記入ください</h3>
<p>お名前 <span class="required" >(必須)</span><br />
    [TEXT* your-name watermark" 例）出座院プラス"] </p>

<p>ふりがな <span class="required" >(必須)</span><br />
    [TEXT* your-ruby watermark" 例）でざいんぷらす"]</p>

<p>電話番号 <span class="required" >(必須)</span><br />
    [TEXT* your-tel watermark" 電話番号 <必須>" ] </p>

<p>メールアドレス <span class="required" >(必須)</span><br />
    [email* your-email watermark" メールアドレス <必須>" ] </p>

<p>郵便番号 <span class="required" >(必須)</span><br />
[TEXT* zip id:zip 10/ watermark" 郵便番号" ]</p>

<p>住所 <span class="required" >(必須)</span><br />
[TEXT* addr id:addr watermark" 住所" ]</p>

<p>題名<span class="any" >(任意)</span><br />
    [TEXT your-subject watermark" 題名"] </p>

<p>要望やメッセージをご記入下さい<span class="any" >(任意)</span><br />
    [textarea your-message] </p>


<p>こちらの文字列を入力してください。 <span class="required" >(必須)</span></p>
[captchac captcha-170]
[captchar captcha-170 4/4]

[response]

<p>[submit "入力内容を送信する"]</p>

※TEXTはtextに変更しお使いください。

※弊社テンプレートでContact Form 7を使用する場合の注意点

弊社のTCDのテンプレートでcontact form 7 を追加した場合に、スライドが動かなくなるという現象が起きる場合があります。原因としては、contact form 7をインストールすると、ヘッダーのwp_headタグやフッターのwp_footerタグに、jsやcssが追加されますが、これがすべてのページで追加されるようになります。この時に、トップページで使用しているスライドのjqueryと、contact form7用のjsが干渉する場合があり、スライドが動かなくなる可能性があるためです。

この場合には、必要なページだけにjsやcssを読み込ませるようにすることで干渉を回避することができます。
wp-config.phpに記述
編集するファイル：wp-config.php
/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */
という一文よりも上に記述してください。

define ('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

ヘッダーに記述
「外観」→「テーマファイルの編集」より
編集するファイル：header.php
wp_head();よりも上に以下の記述してください。

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
wpcf7_enqueue_styles();}

例えば、固定ページのIDが5のページのみだけ読み込みたい場合は下記のように記述します。

if (is_page('5')) {
   if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
       wpcf7_enqueue_scripts();
       wpcf7_enqueue_styles();
   }
}

以上、「Contact Form 7」プラグインで使えるテンプレート集でした。

せっかくのホームページを制作したのであれば、エントリーフォームを改善し、今ある集客をより高い確率で売上に転換させる取り組みも同様に大切なことです。よろしければご活用ください。

最後に、テーマのカスタマイズはあくまで個人の責任の範囲でお願いします。万が一カスタマイズによって不具合が生じましても弊サイトでは責任を負いかねます。カスタマイズの際は必ずバックアップをご用意の上、行ってください。

コピペでOK！「Contact Form 7」を使ったかっこいいお問い合わせフォームテンプレート集

テンプレート集

デフォルトフォーム

フォーム例

フォームソースコード

CSSソースコード

必須項目は「必須」と明記し赤色に変更！

エラー表示は一度で行い、訂正箇所が分かりやすいようにする

応答メッセージの位置を変更する

例文を記載

郵便番号からの自動入力機能

文字認証機能

一般企業用のフォーム

フォーム例

フォームソースコード

採用情報用のフォーム

フォーム例

職務経歴

フォームソースコード

商品問い合わせフォーム

フォーム例

お客様の情報をご記入ください

商品の情報をご記入ください

フォームソースコード

資料請求用のフォーム

お客様の情報をご記入ください

フォームソースコード

メールマガジン用のフォーム

フォームソースコード

説明会用のコンタクトフォーム

開催内容

お客様の情報をご記入ください

フォームソースコード

TCD編集チーム

関連記事

Gutenberg（グーテンベルク）はどれくらいWordPressユーザーに使われているか

WordPressのブロックエディタ「Gutenberg（グーテンベルグ）」の使い方

カテゴリー/タグを一括変更&削除可能なWordPressプラグイン「Bulk Move」の使い方

全天球カメラ（THETA S）を活用した、新しいギャラリーページのすすめ

【WordPress】ブログのカテゴリーの整理方法と注意点

WordPressサイトでMinify圧縮を行う具体的な方法と注意点

人気テーマランキング

ブログカテゴリー