今回はContact Form 7で作ったお問い合わせページをCSSで綺麗なレイアウトにカスタマイズしてみましたので、そのCSSの内容を公開します。
全てコピペでも使用できるので、考えるのがめんどくさい方はコピペで使ってもらって大丈夫です。
Contact Form 7の基礎は以下の記事を参照して下さい。
今回の記事はContact Form 7の基本的な使い方は理解している前提で書いていきます。
お問い合わせページのHTML
まずは以下のHTMLをContact Form 7の編集画面から直接記述して下さい。
<table class="tbl-r02">
<tr>
<th>お名前<span class="requied">必須</span></th>
<td>[text* your-name] </td>
</tr>
<tr>
<th>メールアドレス<span class="requied">必須</span></th>
<td>[email* your-email]</td>
</tr>
<tr>
<th> 題名 </th>
<td>[text your-subject]</td>
</tr>
<tr>
<th class="last"> メッセージ本文 </th>
<td>[textarea your-message x4]</td>
</tr>
<tr>
<th class="empty"> </th>
<td>[submit "送信"]</td>
</tr>
</table>上記のHTMLの記述が終わり、ページをプレビューしてみると以下の様に、左に寄っている簡素なデザインのお問い合わせページが完成します。
ただこれだと少し寂しいので、次にCSSで見た目を調整していきます。
お問い合わせページをCSSで調整
テーブルを中央に寄せて、スマホ時には縦にレイアウトする様にしてます。
「送信」ボタンに色を付けて、マウスホバー時のアクションを付けてます。
必須項目の横に「＊」マークを付けています。
p {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 60px auto 40px;
}
table {
margin: 20px auto;
}
.tbl-r02 th {
background: #aaa;
border: solid 1px #ccc;
color: #fff;
padding: 10px;
}
.tbl-r02 td {
border: solid 1px #ccc;
padding: 10px;
}
/*必須項目の「*」マーク*/
.requied::before {
content: " *";
color: red;
}
/*送信ボタン*/
.wpcf7-form-control.wpcf7-submit {
width: 100%;
background: #4e92df;
color: #fff;
}
.wpcf7-form-control.wpcf7-submit:hover {
background: #fff;
color: #4e92df;
cursor: pointer;
}
/*スマホは縦にレイアウト*/
@media screen and (max-width: 640px) {
.last td:last-child {
border-bottom: solid 1px #ccc;
width: 90%;
}
.tbl-r02 {
width: 90%;
}
.tbl-r02 th, .tbl-r02 td {
border-bottom: none;
display: inline-block;
width: 87%;
}
th.empty {
display: none;
}
}
@media screen and (max-width: 375px) {
.tbl-r02 th, .tbl-r02 td {
width: 79%;
}
}
@media screen and (max-width: 320px) {
.tbl-r02 th, .tbl-r02 td {
width: 68%;
}
}
以上が「Contact Form 7のお問い合わせページをCSSで綺麗な見た目にカスタム」でした。
参考になったら幸いです。
Contact Form 7はデフォルトだとサイト内の全てのページでCSSを読み込んでしまうので、ページスピードに影響が出てしまいます。以下の記事ではそれをなくす方法を書いているので合わせて実装しておくことをお勧めします。
