コンタクトフォームのデザイン（拾ったもの）
HTML

必須会社名
[text* your-company class:textsp placeholder”個人の方は「個人」と記載ください。”]
必須氏名
[text* your-name class:textsp placeholder”山田　太郎”]
必須メールアドレス
[email* your-email class:mailsp placeholder”xxxxx@gmail.com”]
任意電話番号
[tel your-tel class:tel placeholder”090-0000-0000″]
任意住所
[text* your-place class:textsp placeholder”東京都〇〇区”]
必須お問い合わせ種別
[select* contact-menu include_blank “●●●●” ” ●●●● ” ” ●●●● ” ” ●●●● “]
必須お問い合わせ内容
[textarea* your-message class:content placeholder “具体的なお問い合わせ内容をご記入ください”]


[acceptance accept-this-1 class:input2]プライバシーポリシーを確認いただき、同意の上で送信ください。[/acceptance]

[submit id:formbtn “上記の内容で送信する”]


2～3営業日以内に、担当よりメールにてご返信いたします。フォーム送信後すぐに受信確認の自動送信メールが届きますのでご確認お願いいたします。
確認メールが届かない場合は、お手数ですが再度上記フォームより送信ください。


このサイトはreCAPTCHAによって保護されています。Googleのプライバシーポリシーと利用規約が適用されます。

CSS

@media(max-width:500px){
.inquiry th,.inquiry td {
display:block!important;
width:100%!important;
border-top:none!important;
-webkit-box-sizing:border-box!important;
-moz-box-sizing:border-box!important;
box-sizing:border-box!important;
}
.inquiry tr:first-child th{
border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 / .inquiry .haveto,.inquiry .any { font-size:10px; }} /見出し欄/ .inquiry th{ text-align:left; font-size:14px; color:#444; padding-right:5px; width:30%; background:#f7f7f7; border:solid 1px #d7d7d7; } /通常欄/ .inquiry td{ font-size:13px; border:solid 1px #d7d7d7; } /横の行とテーブル全体/ .entry-content .inquiry tr,.entry-content table{ border:solid 1px #d7d7d7; } /必須の調整/ .haveto{ font-size:7px; padding:5px; background:#A50021; color:#fff; border-radius:2px; margin-right:5px; position:relative; bottom:1px; } /任意の調整/ .any{ font-size:7px; padding:5px; background:#000066; color:#fff; border-radius:2px; margin-right:5px; position:relative; bottom:1px; } /ラジオボタンを縦並び指定/ .verticallist .wpcf7-list-item{ display:block; } /送信ボタンのデザイン変更*/
formbtn{
display: block;
padding:1em 0;
margin-top:30px;
width:100%;
background:#3e3a3a;
color:#ffffff;
font-size:18px;
font-weight:bold;
border-radius:2px;
border: 2px solid #3e3a3a;
}
/送信ボタンマウスホバー時/
formbtn:hover{
background:#f8f8f8;
color:#3e3a3a;
border:2px solid #3e3a3a;
opacity:0.8;
}