【SWELL】Contact Form 7のカスタマイズ

WordPressテーマ「SWELL」のお問い合わせページ作成に使う定番プラグイン「Contact Form 7」のカスタマイズをご紹介します。

コピペ可能です。

Contact Form 7のカスタマイズ

仕上がりはこんな感じ

この記事のカスタマイズを行うとこんな感じの仕上がりになります。

レスポンシブ対応です。

PC表示の時は横並びですが、SP表示の時は左の項目が上に上がり縦表示となるようにしています。

※SWELL以外のテーマでも使用できますがテーマによっては全く同じ表示にならない場合がありますので、ご注意ください。

Contact Form 7のフォーム

<table class="contact-form">
<tr>
<th><span class="haveto">必須</span>お名前</th>
<td>[text* your-name]</td>
</tr>
<tr>
<th><span class="any">任意</span>電話番号</th>
<td>[tel tel]</td>
</tr>
<tr>
<th><span class="haveto">必須</span>メールアドレス</th>
<td>[email* your-email]</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td>[textarea message placeholder "お問い合わせ内容をご記入ください。"]</td>
</tr>
</table>

[submit class:form_button "送信"]

Contact Form 7のメールタブ内のメッセージ本文

差出人: [your-name] <[your-email]>

メッセージ本文:
電話番号<[tel]>
[message]

--

このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

css

/* コンタクトフォーム */
.contact-form{
width: 100%;
font-size: 14px;
margin-top: 40px;
}

/* テーブル左 */
.contact-form th{
text-align:left;
padding:3%;
width: 30%;
   vertical-align: middle;
box-sizing: border-box;
}

/* テーブル右 */
.contact-form td{
width: 70%;
vertical-align: middle;
padding-top: 2%;
padding-bottom:2%;
box-sizing: border-box;
}

/* お問い合わせ内容を書くボックス */
.contact-form input,textarea{
width: 100%;
padding: 5px;
box-sizing: border-box;
}

/* 送信ボタン*/
.form_button{
text-decoration: none;
padding: 10px;
text-align: center;
color: #ffffff;
background-color: #000;
border: none;
width: 200px;
margin: 40px auto 0;
display: block;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease 0s;
opacity: 1;
cursor: pointer;
-webkit-appearance: none;
}
.form_button:hover{
opacity: 0.8;
}

/* レスポンシブ */
@media (max-width: 768px){
.contact-form{
font-size: 12px;
}
.contact-form th{
width: 100%;
display: block;
}
.contact-form td{
width: 100%;
display: block;
}
.form_button{
margin: 25px auto 0;
font-size: 14px;
}
}

/* 送信ボタンを押した後のアクション */

body .wpcf7-not-valid{
background: #eee;
}

div.wpcf7-response-output{
border: none;
text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
border-color: #fff;
}

.wpcf7 form.sent .wpcf7-response-output {
background:#1354A1;
color:#fff;
}

.wpcf7 form.spam .wpcf7-response-output {
background:#f15b47;
border-color: #f15b47;
color:#fff;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
border: none;
background:#ffd900;
}

.wpcf7 .wpcf7-not-valid-tip{
margin-left:9px;
display: inline-block;
color: #000;
background-color:#ffd900;
}

/*必須の調整*/
.haveto{
font-size:7px;
padding:5px;
background:#b41818;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
/*任意の調整*/
.any{
font-size:7px;
padding:5px;
background:#202f55;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}