【Contact form 7】CSSでデザインカスタマイズ！コピペで簡単プロ級

<div class=”cf7-item”>
<div class=”cf7-q”><label>氏名<span class=”cf7-req”>必須</span></label></div>
<div class=”cf7-a”>[text* your-name placeholder “例：佐藤 太郎”]</div>
</div>

<div class=”cf7-item”>
<div class=”cf7-q”><label>メールアドレス<span class=”cf7-req”>必須</span></label></div>
<div class=”cf7-a”>[email* your-email placeholder “例：〇〇〇@gmail.com”]</div>
</div>

<div class=”cf7-item”>
<div class=”cf7-q”><label>電話番号（任意）</label></div>
<div class=”cf7-a”>[tel* your-tel placeholder “例：03-1234-1234″]</div>
</div>

<div class=”cf7-item”>
<div class=”cf7-q”><label>返信の要・不要<span class=”cf7-req”>必須</span></label></div>
<div class=”cf7-a”>[radio your-reply default:1 “要” “不要”]</div>
</div>

<div class=”cf7-item”>
<div class=”cf7-q”><label>弊社を何で知りましたか（任意）</label> </div>
<div class=”cf7-a”>[checkbox your-route “公式サイト” “Web” “SNS” “チラシ” “その他”]</div>
</div>

<div class=”cf7-item”>
<div class=”cf7-q”><label>メッセージ本文<span class=”cf7-req”>必須</span></label></div>
<div class=”cf7-a”>[textarea* your-message placeholder “お問い合わせ内容を記載してください。”]</div>
</div>

<div class=”cf7-accept-check”>[acceptance your-accept] プライバシポリシーに同意する [/acceptance]</div>
<div class=”cf7-submit”>[submit “この内容で送信する”]</div>

</div>

/*　フォーム全体　*/
#cf7-area {
width:100%;
margin: 0 auto;
font-family: “遊ゴシック”,”ヒラギノ角ゴ”,”メイリオ”,”MS Pゴシック”,sans-serif;
}

.cf7-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 1.75em;
}

.cf7-q {
width: 30%;
margin: 0 0 0 10px;
}

.cf7-a {
width: 60%;
}

/*　見出し　*/
.form-heading
{
width: 100%;
background-color: #191970;
border-left: 1em solid #6495ED;
border-radius: 2px;
color: #ffffff;
font-weight: bold;
padding: 1em .8em;
margin: 0 0 2em;
}

.form-heading p {
margin: 0;
}

/* 各項目共通 */
#cf7-area label{
font-weight:bold;
}

#cf7-area input[type=”text”],#cf7-area input[type=”email”],#cf7-area input[type=”tel”],#cf7-area textarea {
background: #F0F8FF;
width:500px;
margin-left:10px;
}

#cf7-area input[type=”text”]:focus,#cf7-area input[type=”email”]:focus,#cf7-area input[type=”tel”]:focus,#cf7-area textarea:focus {
background: #FFE4E1;
border: 2px solid #FF1493;
outline: 0;
}

#cf7-area input[type=”checkbox”], #cf7-area input[type=”radio”]{
appearance: auto;
}

#cf7-area .wpcf7-list-item {
display: block;
}

#cf7-area textarea{
height:200px;
padding: 0.625em 0.4375em;
}

.cf7-accept-check{
text-align: center;
margin: 50px auto;
}

.cf7-submit {
width: 40%;
margin: 0 auto;
text-align: center;
}

#cf7-area input[type=”submit”]
{
width: 100%;
background-color: #191970;
color: #ffffff;
border-radius: 5px;
font-size: 1.2em;
padding: 1em 10px;
}

#cf7-area input[type=”submit”]:hover
{
background-color:#ffffff;
border: 2px solid #191970;
color:#191970;
}

.cf7-btn{
width: 40%;
margin: 0 auto;
text-align: center;
}

/*　必須ラベル　*/
.cf7-req{
font-size:.8em;
padding: 4px 6px;
background: #eb2a2a;
color: #ffffff;
margin-left: 10px;
display:inline-block;
}

@media screen and (max-width:768px){
.cf7-item {
display: block;
}

#cf7-area label{
display: block;
margin-bottom: 10px;
}

.cf7-q {
width: 100%;
margin: 0;
}

.cf7-a {
width: 100%;
}

#cf7-area input[type=”text”], #cf7-area input[type=”email”], #cf7-area input[type=”tel”], #cf7-area textarea{
margin-left: 0;
}

.cf7-submit{
width: 90%;
}
}