ContactForm7でお問合せ・予約・アンケートに使えるHTMLコードと機能の解説(住所自動入力付き)

2019年6月1日2019年12月23日ContactForm7カスタマイズ

ContactForm7ではフォームを作成できますが、使いやすくおしゃれなデザインにするには自分でHTMLとCSSを書かないといけません。

本格的なフォームを作りたいけど、プログラミングの知識がない方のために、サンプルコードを作りました。

フォームの中身HTMLとデザインCSSを、完全初心者でもカスタマイズできるように解説していきます。

コピペでできるお問合せ・予約・アンケートに使えるフォームのサンプルはこちら↓↓

ContactForm7で作る！お問合せ・予約・アンケートに使えるフォームサンプル①

ContactForm7で作る！お問合せ・予約・アンケートに使えるフォームサンプル②

フォームでは左側に項目名、右側に入力などのレイアウトもよくありますが、スマホで表示しきれず別のデザインをすることになってしまうため面倒が多いのでわたしは使いません。

目線の流れもスムーズになるため、縦に並べたほうがUX(ユーザーエクスペリエンス)も良いです。

シンプルなデザインのContactForm7フォームのコードサンプル①

シンプルなサンプルです。コピペして不要な部分を削除したり、同じようなフォーム項目を増やして使用できます。

<dl class="contactform7">
<dt>お名前</dt>
<dd>
<p class="form-line"><label class="half">姓<span class="must">必須</span>[text* your-lastname id:your-lastname class:input-box-mini]</label><label class="half">名<span class="must">必須</span>[text* your-firstname id:your-firstname class:input-box-mini]</label></p>
<p class="form-line"><label class="half">フリガナ（姓）<span class="must">必須</span>
[text* your-lastname-kana id:text-lastname-kana class:input-box-mini]</label><label class="half">フリガナ（名）<span class="must">必須</span>
[text* your-firstname-kana id:text-firstname-kana class:input-box-mini]</label></p>
</dd>
<dt>ご住所</dt>
<dd><label>郵便番号（ハイフン無し）<span class="must">必須</span>
[text* zipcode class:input-box]</label>
<label>都道府県<span class="must">必須</span>
[select* address1 class:input-box include_blank "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]</label>
<label>市区町村<span class="must">必須</span>
[text* address2 class:input-box]</label>
<label>番地・建物名<span class="must">必須</span>
[text* address3 class:input-box]</label></dd>
<dt>ご連絡先</dt>
<dd><label>電話番号（ハイフン無し）<span class="must">必須</span>
[tel* your-tel id:your-tel class:input-box]</label>
<label>メールアドレス<span class="must">必須</span>
[email* your-email id:email class:input-box]</label>
<label>メールアドレス（確認用）<span class="must">必須</span>
[email* your-email-2 id:your-email-2 class:input-box]</label></p>
<p class="explain">確認のため再度ご入力ください。</p>
<p><label>ウェブサイト<span class="free">自由回答</span>
[url your-website id:your-website class:input-box placeholder "URL"]</label></dd>
<dt>プロフィール</dt>
<dd class="contactfform7">
<p class="form-title">性別<span class="must">必須</span></p>
<p>[radio sex id:sex class:contact-radio use_label_element default:1 "男性" "女性"]
<label>生年月日<span class="must">必須</span>
[date* birthday min:1900-01-01 max:today id:birthday class:input-box]</label>
<label>年齢<span class="must">必須</span>
[number* age min:0 max:130 id:age class:input-box]歳</label>
<label>職業<span class="must">必須</span>
[select* job-select id:job-select class:input-box include_blank "会社員" "自営業" "自由業" "パート・アルバイト" "学生" "主婦" "無職" "その他"]</label>
<label>職業<span class="free">自由回答</span>
[text job-text id:job-text class:input-box placeholder "職業を入力"]</label></p>
<p class="form-title">プロフィール画像</p>
<p class="form-line">[file profile-picture limit:1024kb filetypes:gif|png|jpg|jpeg id:profile class:contact-file]</p>
<p class="explain">ファイルの形式はgif・png・pg・jpegが利用可能です。ファイルサイズの上限は1024KBまでです。</p>
</dd>
<dt>見学予約</dt>
<dd><label class="date">第１希望日時[date visit-date1 min:today max:today+10month id:visit-date1 class:input-box]</label>[checkbox visit-time1 id:visit-time1 class:time use_label_element "午前" "午後" "夕方"]<label class="form-title">第２希望日時[date visit-date2 id:visit-date2 class:input-box]</label>[checkbox visit-time2 min:today max:today+10month id:visit-time2 class:date use_label_element "午前" "午後" "夕方"]</dd>
<dt>アンケート</dt>
<dd class="contactfform7">
<p class="form-title">このサイトをどこで知りましたか？<span class="free">自由回答</span></p>
<p>[checkbox check-answer id:check-answer class:form-select use_label_element free_text "ウェブ検索" "Facebook" "twitter" "他のサイト" "口コミ" "その他"]
<label>ご満足度<span class="free">自由回答</span>[select review id:review class:input-box include_blank "★" "★★" "★★★" "★★★★" "★★★★★"]</label></dd>
<dt>お問い合わせ内容</dt>
<dd>[textarea message id:massage class:input-box]</dd>
<dt>利用規約</dt>
<dd>
<div id="term" class="scroll-wrap-con">
<div class="scroll">
<h3>さやっと。利用規約</h3>
<p>本利用規約（以下「本規約」と言います。）には、当ウェブサイトの利用条件、本サービスの提供条件及び当ウェブサイトと利用者の皆様との間の権利義務関係が定められています。本サービスの利用に際しては、本規約の全文をお読みいただいたうえで、本規約に同意いただく必要があります。</p>
<p><strong>第１条（適用）</strong></p>
<ol>
<li>本規約は、本サービスの提供条件及び本サービスの利用に関する当ウェブサイトと利用者との間の権利義務関係を定めることを目的とし、利用者と当ウェブサイトとの間の本サービスの利用に関わる一切の関係に適用されます。</li>
<li>本規約の内容とその他の本規約外における本サービスの説明等とが異なる場合は、本規約の規定が優先して適用されるものとします。</li>
</ol>
<p><strong>第２条（定義）</strong></p>
・
・
・以下省略
・
・
<ol>
<li>本規約及びサービス利用契約の準拠法は日本法とします。なお、本サービスにおいて物品の売買が発生する場合であっても、国際物品売買契約に関する国際連合条約の適用を排除することに合意します。</li>
<li>本規約またはサービス利用契約に起因し、または関連する一切の紛争については、横浜地方裁判所を第一審の専属的合意管轄裁判所とします。</li>
</ol>
<p>【2019年6月01日制定】</p>
<p>【2019年6月01日改定】</p>
</div>
</div>
[acceptance deal id:deal class:checkbox] 利用規約に同意します。 [/acceptance]
<p class="form-title">クイズの答えを入力<span class="must">必須</span></p>
[quiz confirm-quiz id:confirm-quiz class:input-box "日本の首都は？|東京"]
<p class="explain">スパムでないことの確認のためご入力ください。</p>
[submit id:contact-submit-btn class:submit-btn "送信"]</dd>
</dl>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
jQuery(function( $ ) {
    jQuery( 'input[name="zipcode"]' ).keyup( function( e ) {
        AjaxZip3.zip2addr('zipcode','','address1','address2');
    } )
} );
</script>

フォーム全体は<dl></dl>(定義リスト)で囲まれています。

定義リストとは

このように用語などとその解説を表示するために使われます。

<dt></dt>で囲まれているのが見出しです。

見出しで区切られた中身全体を<dd></dd>で囲みます。

ボックスで区切られたデザインのContactForm7フォームのコードサンプル②

<div class="contact-box">
<p class="contact-box-title">お名前</p>
<p class="form-line"><label class="half">姓<span class="must">必須</span>[text* your-lastname id:your-lastname class:input-box-mini]</label><label class="half">名<span class="must">必須</span>[text* your-firstname id:your-firstname class:input-box-mini]</label></p>
<p class="form-line"><label class="half">フリガナ（姓）<span class="must">必須</span>
[text* your-lastname-kana id:text-lastname-kana class:input-box-mini]</label><label class="half">フリガナ（名）<span class="must">必須</span>
[text* your-firstname-kana id:text-firstname-kana class:input-box-mini]</label></p>

</div>
<div class="contact-box">
<p class="contact-box-title"> ご住所</p><label>郵便番号（ハイフン無し）<span class="must">必須</span>
[text* zipcode class:input-box]</label><label>都道府県<span class="must">必須</span>[select* address1 class:input-box include_blank "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]</label>
<label>市区町村<span class="must">必須</span>
    [text* address2 class:input-box]</label>
<label>番地・建物名<span class="must">必須</span>
    [text* address3 class:input-box]</label>
</div>
<div class="contact-box">
<p class="contact-box-title">ご連絡先</p>
<label>電話番号（ハイフン無し）<span class="must">必須</span>
[tel* your-tel id:your-tel class:input-box]</label>
<label>メールアドレス<span class="must">必須</span>
[email* your-email id:email class:input-box]</label>
<label>メールアドレス（確認用）<span class="must">必須</span>
[email* your-email-2 id:your-email-2 class:input-box]</label>
<p class="explain">確認のため再度ご入力ください。</p>
<label>ウェブサイト<span class="free">自由回答</span>
[url your-website id:your-website class:input-box placeholder "URL"]</label>
</div>
<div class="contact-box">
<p class="contact-box-title">プロフィール</p>
<p class="form-title">性別<span class="must">必須</span></p>
[radio sex id:sex class:contact-radio use_label_element default:1 "男性" "女性"]
<label>生年月日<span class="must">必須</span>
[date* birthday min:1900-01-01 max:today id:birthday class:input-box]</label>
<label>年齢<span class="must">必須</span><br>
[number* age min:0 max:130 id:age class:input-box]歳</label>
<label>職業<span class="must">必須</span>
[select* job-select id:job-select class:input-box include_blank "会社員" "自営業" "自由業" "パート・アルバイト" "学生" "主婦" "無職" "その他"]</label>
<label>職業<span class="free">自由回答</span>
[text job-text id:job-text class:input-box placeholder "職業を入力"]</label>
<p class="form-title">プロフィール画像</p>
<p class="form-line">[file profile-picture limit:1024kb filetypes:gif|png|jpg|jpeg id:profile class:contact-file]</p>
<p class="explain">ファイルの形式はgif・png・pg・jpegが利用可能です。ファイルサイズの上限は1024KBまでです。</p>

</div>
<div class="contact-box">
<p class="contact-box-title">見学予約</p>
<label class="date">第１希望日時[date visit-date1 min:today max:today+10month id:visit-date1 class:input-box]</label>[checkbox visit-time1 id:visit-time1 class:time use_label_element "午前" "午後" "夕方"]<label class="form-title">第２希望日時[date visit-date2 min:today max:today+10month id:visit-date2 class:input-box]</label>[checkbox visit-time2 id:visit-time2 class:date use_label_element "午前" "午後" "夕方"]
</div>
<div class="contact-box">
<p class="contact-box-title">アンケート</p>
<p class="form-title">このサイトをどこで知りましたか？<span class="free">自由回答</span></p>
[checkbox check-answer id:check-answer class:form-select use_label_element free_text "ウェブ検索" "Facebook" "twitter" "他のサイト" "口コミ" "その他"]
<label>ご満足度<span class="free">自由回答</span>[select review id:review class:input-box include_blank "★" "★★" "★★★" "★★★★" "★★★★★"]</label>
</div>
<div class="contact-box">
<p class="contact-box-title">お問い合わせ内容</p>
[textarea message id:massage class:input-box]
</div>
<div class="contact-box">
<p class="contact-box-title">利用規約</p>
<div class="scroll-wrap-con" id="term">
<div class="scroll">
<h3>さやっと。利用規約</h3>
<h3>さやっと。利用規約</h3>
<p>本利用規約（以下「本規約」と言います。）には、当ウェブサイトの利用条件、本サービスの提供条件及び当ウェブサイトと利用者の皆様との間の権利義務関係が定められています。本サービスの利用に際しては、本規約の全文をお読みいただいたうえで、本規約に同意いただく必要があります。</p>
<p><strong>第１条（適用）</strong></p>
<ol>
<li>本規約は、本サービスの提供条件及び本サービスの利用に関する当ウェブサイトと利用者との間の権利義務関係を定めることを目的とし、利用者と当ウェブサイトとの間の本サービスの利用に関わる一切の関係に適用されます。</li>
<li>本規約の内容とその他の本規約外における本サービスの説明等とが異なる場合は、本規約の規定が優先して適用されるものとします。</li>
</ol>
<p><strong>第２条（定義）</strong></p>
・
・
・以下省略
・
・
<ol>
<li>本規約及びサービス利用契約の準拠法は日本法とします。なお、本サービスにおいて物品の売買が発生する場合であっても、国際物品売買契約に関する国際連合条約の適用を排除することに合意します。</li>
<li>本規約またはサービス利用契約に起因し、または関連する一切の紛争については、横浜地方裁判所を第一審の専属的合意管轄裁判所とします。</li>
</ol>
<p>【2019年6月01日制定】</p>
<p>【2019年6月01日改定】</p>
</div>
</div>
[acceptance deal id:deal class:checkbox] 利用規約に同意します。 [/acceptance]
</div>
<div class="contact-box">

<p class="form-title">クイズの答えを入力<span class="must">必須</span></p>
<p class="form-line">[quiz confirm-quiz id:confirm-quiz class:input-box "日本の首都は？|東京"]</p>
<p class="explain">スパムでないことの確認のためご入力ください。</p>
</div>
[confirm id:confirm-page class:confirm-btn "入力内容を確認する"][back id:confirm-return class:confirm-btn "入力内容を変更する"]
[submit id:contact-submit-btn class:submit-btn "送信"]

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
jQuery(function( $ ) {
    jQuery( 'input[name="zipcode"]' ).keyup( function( e ) {
        AjaxZip3.zip2addr('zipcode','','address1','address2');
    } )
} );
</script>

ひとつのかたまりとして<div class="contact-box"></div>で囲まれています。

タイトルは<p class="contact-box-title"></p>で囲まれています。

フォームの入力項目のHTMLの構造

一つ一つの入力項目は、テキストやドロップダウンなどの四角い入力項目は

ラジオボタンやファイルの送信などそれ以外の入力項目は

という形になっています。

入力項目を増やすときはその範囲でコピペしてください。

ただし、見学予約の時間帯の部分や、利用規約の同意確認などの入力項目名がついていない部分は[ContactForm7のショートコード]のみです。

お名前の項目は<label>に幅を半分にするためのクラスを付けて<label class="half">にしてあります。

また、１列に並べて調整するために<p class="form-line"></p>で囲んであります。

入力項目の下の説明文は<p class="explain"></p>で囲みます。

必須マークか自由回答マークかを変えるには<span class="must">必須</span>か<span class="free">自由回答</span>を入れ替えます。

住所の項目は、フォームの下にあるjavaScriptで自動入力しているため、項目名を変えたり一つにまとめると動作しなくなります。

利用規約は<div class="scroll-wrap-con" id="term"><div class="scroll">利用規約のHTML</div></div>で囲まれています。

ちなみに、利用規約のHTMLを書くのは面倒なので、一回通常のエディタで利用規約を作ったあとデベロッパーツールでソースを表示してコピペすると良いです。

カスタマイズ＆同じような項目を増やす方法とContactForm7でできることを紹介

上記のコードで増やしたいフォーム項目の部分をコピペして、必要な部分を書き換えることで同じようなフォームをつくれます。

フォーム項目の名前を書き換えたら、ContactForm7のショートコードの値を変更します。

text＝入力の種類。テキストやテキストエリア、ドロップダウン、チェックリストなど。必須項目はtext*、自由回答なら*を外す。

your-name＝項目名。すべて違う項目名をつける

id=項目名をそのまま使う。すべて違うidをつける

class=ボックスで囲まれたフォームには、input-boxと入力。同じデザインにするため。

placeholder=入力項目内にテキストを表示する。これを消すと""の中身がデフォルト値になる。

“名前を入力してください"＝入力項目内に表示するテキスト。不要なら消す。

コピペして項目を増やすときは、項目名とidを書き換えて、必須かどうかでアスタリスク*を着脱、placeholderやその他の値を書き換えたり消します。

ドロップダウン・ラジオボタン・チェックボックスの値のカスタマイズ

include_blankを追加すると、一番上(初期値)を空白(未選択)の状態にできます。不要な場合は削除。

free_textを追加すると、最後の項目を選択したときに入力項目にテキストを入力できるようになります。

さらにlabel_firstを追加すると、チェックボックスを文字の後に表示できます。チェックリストのようなものを作る場合に使えます。

メッセージなどのテキストエリアのカスタマイズ

[shortcord-tag]textarea message id:massage class:input-box placeholder [double-quot]こちらに本文を入力してください。[/double-quot][/shortcord-tag]

minlength:200を追加すると最小文字数、maxlength:2000を追加すると最大文字数を設定できます。

このようにすると、複数行のplaceholderを表示できます。

生年月日や予約日時、年齢などの日付項目・数値の最大値・最小値のカスタマイズ

min:(選択できる一番古い日時) max:(選択できる一番未来の日時)

min:1900-01-01となっている部分で、それよりも以前の日にちを選択できないようになっています。

max:todayとしていると、今日よりも未来の日付を選択できないようになります。

today+1day(今日から１日後)、today-2month(今日の２か月前)などと今日から何日・何カ月・何年後／前という形でも設定できます。

数値項目ではmin:10、max:1000などで同じように設定できます。

さらにstep:5などの記述を追加すると、5の倍数しか入力できなくなります。

step:3とすると、3を１単位として3の倍数しか入力できなくなるため、3個ずつで料金が決まっている場合の個数の選択などで使えますね。

(でもわかりにくいので、3個～300個まで選べるなどよほど選択肢が多い場合以外は、ドロップダウンで作成したほうがよさそうです。)

３個を最小個数として、3,6,9,12,15,…..,30個まで選択できる。

メールフォームの作成

メールのフィールドの入力では、使用できるタグ一覧を使って、自分が見やすいようにメールを作成します。

打ち間違いなどがないよう、使用できるタグがすべて使われていることを確認します。

ユーザーへの確認メールであるメール(2)を使用する場合のテンプレート例はこちらです。

フォームができたら、自分のサイトに合わせたデザインをカスタマイズ

これでフォームが作成できました。

次の記事で、CSSデザインのカスタマイズを行っていきます。