メールフォームのデザイン

賢威8にあらかじめ用意されているさまざまなパーツを利用して、メールフォームを装飾することができます。
プラグインなどでお問い合わせフォームを実装される際の例として、ご利用いただけると幸いです。

なお、以下のサンプルはメールを送信できるようにはなっていませんので、ご注意ください。
メールの送信ができるようにするには、別途プログラムの追加が必要になりますので、たとえば、WordPressでメールフォームを作る場合は、プラグインなどを使ってご対応いただくと比較的導入が簡単です。

入力画面

お名前必須	例：賢威太郎
メールアドレス	例：support@seo-keni.jp
ラジオボタン	ラジオボタン選択項目名１ラジオボタン選択項目名２ラジオボタン選択項目名３ラジオボタン選択項目名４ラジオボタン選択項目名５
チェックボックス	チェックボックス選択項目名１チェックボックス選択項目名２チェックボックス選択項目名３チェックボックス選択項目名４チェックボックス選択項目名５
プルダウン
お問い合わせ内容

<table class="table-block">
<tbody>

<tr>
<th class="vl-t">お名前<span class="required m5-l">必須</span></th>
<td>
<input class="w60" type="text" value=""><br>
<small>例：賢威太郎</small>
</td>
</tr>

<tr>
<th class="vl-t">メールアドレス</th>
<td>
<input class="w60" type="email"><br>
<small>例：&#115;&#117;&#112;&#112;&#111;&#114;&#116;&#64;&#115;&#101;&#111;&#45;&#107;&#101;&#110;&#105;&#46;&#106;&#112;</small>
</td>
</tr>

<tr>
<th class="vl-t">ラジオボタン</th>
<td>
<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名１</label><br>
<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名２</label><br>
<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名３</label><br>
<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名４</label><br>
<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名５</label>
</td>
</tr>

<tr>
<th class="vl-t">チェックボックス</th>
<td>
<label><input type="checkbox" value=""> チェックボックス選択項目名１</label><br>
<label><input type="checkbox" value=""> チェックボックス選択項目名２</label><br>
<label><input type="checkbox" value=""> チェックボックス選択項目名３</label><br>
<label><input type="checkbox" value=""> チェックボックス選択項目名４</label><br>
<label><input type="checkbox" value=""> チェックボックス選択項目名５</label>
</td>
</tr>

<tr>
<th class="vl-t">プルダウン</th>
<td>
<select>
<option value="" selected>都道府県を選択</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</td>
</tr>

<tr>
<th class="vl-t">お問い合わせ内容</th>
<td>
<textarea cols="30" rows="10"></textarea>
</td>
</tr>

</tbody>
</table>
<div class="al-c">
<button class="btn btn-form01 dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span> 送信内容を確認する</button>
</div>

<div class="al-c">
<button class="btn btn-form01 dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span> 送信内容を確認する確認する確認する確認する</button>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

<tbody>

<tr>

<td>

</td>

</tr>

<tr>

<th class="vl-t">メールアドレス</th>

<td>

<small>例：support@seo-keni.jp</small>

</td>

</tr>

<tr>

<th class="vl-t">ラジオボタン</th>

<td>

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名１</label><br>

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名２</label><br>

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名３</label><br>

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名４</label><br>

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名５</label>

</td>

</tr>

<tr>

<th class="vl-t">チェックボックス</th>

<td>

<label><input type="checkbox" value=""> チェックボックス選択項目名１</label><br>

<label><input type="checkbox" value=""> チェックボックス選択項目名２</label><br>

<label><input type="checkbox" value=""> チェックボックス選択項目名３</label><br>

<label><input type="checkbox" value=""> チェックボックス選択項目名４</label><br>

<label><input type="checkbox" value=""> チェックボックス選択項目名５</label>

</td>

</tr>

<tr>

<th class="vl-t">プルダウン</th>

<td>

<option value="" selected>都道府県を選択</option>

</select>

</td>

</tr>

<tr>

<th class="vl-t">お問い合わせ内容</th>

<td>

</td>

</tr>

</tbody>

</table>

<button class="btn btn-form01 dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span> 送信内容を確認する</button>

</div>

<button class="btn btn-form01 dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span> 送信内容を確認する確認する確認する確認する</button>

</div>

テキストボックス

例：賢威太郎

<input class="w60" type="text" value=""><br>
<small>例：賢威太郎</small>

1 2	<input class="w60" type="text" value=""><br> <small>例：賢威太郎</small>

メールアドレス

例：support@seo-keni.jp

<input class="w60" type="email"><br>
<small>例：&#115;&#117;&#112;&#112;&#111;&#114;&#116;&#64;&#115;&#101;&#111;&#45;&#107;&#101;&#110;&#105;&#46;&#106;&#112;</small>

1 2	<input class="w60" type="email"><br> <small>例：support@seo-keni.jp</small>

ラジオボタン

ラジオボタン選択項目名１
ラジオボタン選択項目名２
ラジオボタン選択項目名３
ラジオボタン選択項目名４
ラジオボタン選択項目名５

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名１</label><br>
<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名２</label><br>
<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名３</label><br>
<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名４</label><br>
<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名５</label>

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名１</label><br>

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名２</label><br>

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名３</label><br>

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名４</label><br>

<label><input type="radio" name="radio1" value=""> ラジオボタン選択項目名５</label>

チェックボックス

チェックボックス選択項目名１
チェックボックス選択項目名２
チェックボックス選択項目名３
チェックボックス選択項目名４
チェックボックス選択項目名５

<label><input type="checkbox" value=""> チェックボックス選択項目名１</label><br>
<label><input type="checkbox" value=""> チェックボックス選択項目名２</label><br>
<label><input type="checkbox" value=""> チェックボックス選択項目名３</label><br>
<label><input type="checkbox" value=""> チェックボックス選択項目名４</label><br>
<label><input type="checkbox" value=""> チェックボックス選択項目名５</label>

<label><input type="checkbox" value=""> チェックボックス選択項目名１</label><br>

<label><input type="checkbox" value=""> チェックボックス選択項目名２</label><br>

<label><input type="checkbox" value=""> チェックボックス選択項目名３</label><br>

<label><input type="checkbox" value=""> チェックボックス選択項目名４</label><br>

<label><input type="checkbox" value=""> チェックボックス選択項目名５</label>

プルダウン

<select>
<option value="" selected>都道府県を選択</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>

<option value="" selected>都道府県を選択</option>

</select>

テキストエリア

<textarea cols="30" rows="10"></textarea>

1	<textarea cols="30" rows="10"></textarea>

送信内容確認画面

お名前	賢威太郎
メールアドレス	support@seo-keni.jp
ラジオボタン	ラジオボタン選択項目名１
チェックボックス	チェックボックス選択項目名１
プルダウン	京都府
お問い合わせ内容	お問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入ります

<table class="table-block">
<tbody>

<tr>
<th class="vl-t">お名前</th>
<td>
賢威太郎
</td>
</tr>

<tr>
<th class="vl-t">メールアドレス</th>
<td>
&#115;&#117;&#112;&#112;&#111;&#114;&#116;&#64;&#115;&#101;&#111;&#45;&#107;&#101;&#110;&#105;&#46;&#106;&#112;
</td>
</tr>

<tr>
<th class="vl-t">ラジオボタン</th>
<td>
ラジオボタン選択項目名１
</td>
</tr>

<tr>
<th class="vl-t">チェックボックス</th>
<td>
チェックボックス選択項目名１
</td>
</tr>

<tr>
<th class="vl-t">プルダウン</th>
<td>
京都府
</td>
</tr>

<tr>
<th class="vl-t">お問い合わせ内容</th>
<td>
お問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入ります
</td>
</tr>

</tbody>
</table>

<div class="btn-area">
<button class="btn dir-arw_r btn-area_r btn_style03"><span class="icon_arrow_s_right"></span>送信する</button><button class="btn dir-arw_l btn-area_l btn_gray"><span class="icon_arrow_s_left"></span>前に戻る</button>
</div>

<tbody>

<tr>

<td>

賢威太郎

</td>

</tr>

<tr>

<th class="vl-t">メールアドレス</th>

<td>

support@seo-keni.jp

</td>

</tr>

<tr>

<th class="vl-t">ラジオボタン</th>

<td>

ラジオボタン選択項目名１

</td>

</tr>

<tr>

<th class="vl-t">チェックボックス</th>

<td>

チェックボックス選択項目名１

</td>

</tr>

<tr>

<th class="vl-t">プルダウン</th>

<td>

京都府

</td>

</tr>

<tr>

<th class="vl-t">お問い合わせ内容</th>

<td>

お問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入ります

</td>

</tr>

</tbody>

</table>

</div>

送信完了画面

お問い合わせありがとうございました。
送信完了に関する文章が入ります送信完了に関する文章が入ります送信完了に関する文章が入ります送信完了に関する文章が入ります。

トップページに戻る

<p>お問い合わせありがとうございました。<br>
送信完了に関する文章が入ります送信完了に関する文章が入ります送信完了に関する文章が入ります送信完了に関する文章が入ります。</p>

<div class="al-c">
<a href="#" class="btn dir-arw_r btn_gray"><span class="icon_arrow_s_right"></span>トップページに戻る</a>
</div>