（コンタクトフォーム３）
コンタクトフォーム第1希望～第３希望入力HTML
<table class="mousikomi">
<tbody><tr>
<td class="yoyaku">
<p><span class="sankou">必 須</span><span class="b">お名前</span>
</p>
</td>
<td>
<p><span class="wpcf7-form-control-wrap" data-name="your-name"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="例：美容 藍子" value="" type="text" name="your-name"></span>
</p>
</td>
</tr>
<tr>
<td class="yoyaku">
<p><span class="sankou">必 須</span><span class="b">メールアドレス</span>
</p>
</td>
<td>
<p><span class="wpcf7-form-control-wrap" data-name="your-email"><input size="40" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="例：sample@gmail.com" value="" type="email" name="your-email"></span>
</p>
</td>
</tr>
<tr>
<td class="yoyaku">
<p><span class="sankou">必 須</span><span class="b">TEL</span>
</p>
</td>
<td>
<p><span class="wpcf7-form-control-wrap" data-name="your-tel"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="例：000-0000-0000" value="" type="text" name="your-tel"></span>
</p>
</td>
</tr>
<tr>
<td class="yoyaku">
<p><span class="sankou">必 須</span><span class="b">ご希望の日時</span>
</p>
</td>
<td>
<p>第1希望：<span class="wpcf7-form-control-wrap" data-name="menu-month"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="menu-month"><option value="">---</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></span>月<span class="wpcf7-form-control-wrap" data-name="menu-day"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="menu-day"><option value="">---</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></span>日<span class="wpcf7-form-control-wrap" data-name="menu-time"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="menu-time"><option value="">---</option><option value="09：30">09：30</option><option value="10：00">10：00</option><option value="13：30">13：30</option><option value="18：30">18：30</option><option value="19：00">19：00</option></select></span>～<br>
第2希望：<span class="wpcf7-form-control-wrap" data-name="menu-month2"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="menu-month2"><option value="">---</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></span>月<span class="wpcf7-form-control-wrap" data-name="menu-day2"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="menu-day2"><option value="">---</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></span>日<span class="wpcf7-form-control-wrap" data-name="menu-time2"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="menu-time2"><option value="">---</option><option value="09：30">09：30</option><option value="10：00">10：00</option><option value="13：30">13：30</option><option value="18：30">18：30</option><option value="19：00">19：00</option></select></span>～<br>
第3希望：<span class="wpcf7-form-control-wrap" data-name="menu-month3"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="menu-month3"><option value="">---</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></span>月<span class="wpcf7-form-control-wrap" data-name="menu-day2"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="menu-day2"><option value="">---</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></span>日<span class="wpcf7-form-control-wrap" data-name="menu-time2"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="menu-time2"><option value="">---</option><option value="09：30">09：30</option><option value="10：00">10：00</option><option value="13：30">13：30</option><option value="18：30">18：30</option><option value="19：00">19：00</option></select></span>～
</p>
</td>
</tr>
<tr>
<td class="yoyaku">
<p><span class="sankou">必 須</span><span class="b">ご希望施術部位</span>
</p>
</td>
<td>
<p><span class="wpcf7-form-control-wrap" data-name="checkbox-895"><span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required"><span class="wpcf7-list-item first"><label><input type="checkbox" name="checkbox-895[]" value="眉毛（毛並み）"><span class="wpcf7-list-item-label">眉毛（毛並み）</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-895[]" value="眉毛（パウダー）"><span class="wpcf7-list-item-label">眉毛（パウダー）</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-895[]" value="リップ"><span class="wpcf7-list-item-label">リップ</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-895[]" value="アイライン"><span class="wpcf7-list-item-label">アイライン</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-895[]" value="ヘアライン"><span class="wpcf7-list-item-label">ヘアライン</span></label></span><span class="wpcf7-list-item last"><label><input type="checkbox" name="checkbox-895[]" value="ほくろその他"><span class="wpcf7-list-item-label">ほくろその他</span></label></span></span></span>
</p>
</td>
</tr>
<tr>
<td class="yoyaku">
<p><span class="sankou">必 須</span><span class="b">ご希望の都道府県</span>
</p>
</td>
<td>
<p><span class="wpcf7-form-control-wrap" data-name="text-555"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="text-555"></span>
</p>
</td>
</tr>
<tr>
<td class="yoyaku">
<p><span class="sankou">必 須</span><span class="b">ご希望施術場所</span>
</p>
</td>
<td>
<p><span class="wpcf7-form-control-wrap" data-name="text-965"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" value="" type="text" name="text-965"></span>
</p>
</td>
</tr>
<tr>
<td class="yoyaku">
<p><span class="sankou">必 須</span><span class="b">ご希望のアーティスト</span>
</p>
</td>
<td>
<p><span class="wpcf7-form-control-wrap" data-name="a-name-text-349"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" value="" type="text" name="a-name-text-349"></span>
</p>
</td>
</tr>
<tr>
<td class="yoyaku">
<p><span class="sankou blue">任 意</span><span class="b">フリーメッセージ</span>
</p>
</td>
<td>
<p>ご相談・連絡事項などございましたらお書きください。<span class="wpcf7-form-control-wrap" data-name="textarea-788"><textarea cols="40" rows="7" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="こちらにご自由にご記入下さい。ごく簡単でも結構です。" name="textarea-788"></textarea></span>
</p>
</td>
</tr>
</tbody></table>
<span class="b">[submit id:mail_submit2 "この内容で予約する"]</span>
CSS
/* フォーム入力項目 */
.wpcf7-form .mousikomi select {
display: inline;
width: 60px;
height: 30px;
margin: 0px 5px 15px 8px;
padding: 4px;
}
.wpcf7-form .mousikomi select[name="menu-time"], .wpcf7-form .mousikomi select[name="menu-time2"], .wpcf7-form .mousikomi select[name="menu-time3"] {
width: 88px;
}
.wpcf7-list-item-label {
margin-left:5px;
}
.wpcf7-radio span.wpcf7-list-item {
display: block;
}
#mail_submit2 {
background: FF96B8;
color: #ffffff;
font-size: 18px;
font-weight: normal;
margin: 18px 0 5px;
padding: 10px 18px;
text-decoration: none;
width:100%;
}
#mail_submit2:hover {
background: #f6adc6;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}
.sankou {
font-size:12px;
background-color:#e888a7;
color:#fff;
padding:5px 10px;
margin:0 5px;
border: 1px solid #ddd;
border-radius: 5px;
white-space: nowrap;
}
.sankou.blue { background-color:#999; }
.mousikomi { margin-top:20px; }
/* テーブル */
.yoyaku {
background:#ececec;
color: #333333;
font-size: 90%;
width: 30%;
vertical-align: middle;
}
.mousikomi td {
padding-left: 10px;
vertical-align: middle;
}
table .mousikomi { width: 100%;}
@media only screen and (max-width:420px){
.mousikomi tbody tr{
display: block;
border: none;
margin-bottom: 0.8em;
}
.mousikomi tbody td{
display: block;
border: none;
padding: 10px;
}
.wpcf7-textarea {width: 100%; }
.mousikomi table tr td,
.mousikomi {border: none; }
.mousikomi td { width: auto;}
#mail_submit2 {
margin: -15px 0 5px;
}
}
