【Contact Form 7】きれいに変身させるCSSカスタマイズ術
この記事では、Contact Form7を見栄え良くするCSSの解説記事です。もちろんコピペOK！
contact form7って導入しただけでは超ダサいレイアウトに😂
これでは、入力する気が失せるよね😤もう少しかっこよくしていこう！
コツコツ頑張ろうな👍#駆け出しエンジニアと繋がりたい pic.twitter.com/n9jT0nQ82K— moridai@エンジニア (@MoridaiEngineer) December 22, 2023
Contents
【Contact Form 7】きれいに変身させるCSSカスタマイズ術
Contact Form 7のCSSカスタマイズメリット
Contact Form 7は、デフォルトではあまり装飾されていないため、適用されているテーマによってデザインが異なります。しかし、CSSを使ってフォームの外観をカスタマイズすることで、次のようなメリットが得られます。
デザインの改善
サイトのテーマカラーやスタイルに合わせてフォームの見た目を整えることができます。必須項目の強調や色の調整など、個々のデザインニーズに合わせたカスタマイズが可能です。
一貫性の確保
サイト全体のデザインとフォームのデザインが一致しないと、ユーザーにとって違和感を生むことがあります。統一感のあるデザインでサイト全体を調和させましょう。
コンバージョン率の向上
見やすく理解しやすいフォームは、離脱率を下げてコンバージョン率を高める助けになります。ユーザーにとって親切なフォームは、入力のハードルを下げ、成果への導線を強化します。
フォームの改善は、ユーザーが最終的な目標（コンバージョン）に到達する確率を高めることにつながります。フォームの使いやすさを高め、ユーザーの不便や混乱を軽減することで、成果を生みやすくなるのです。
Contact Form 7 デフォルトのデザイン
左に寄っているし、味気ないデザインで入力する気が失せるよね。
このデザインのせいで、作者のイメージがガタ落ち。
Contact Form 7 完成イメージ（カスタマイズ後）
このCSSをstyle.cssや追加cssへぶち込むだけ！
超簡単に、使いやすいお問い合わせフォームが完成するよ。
/* フォーム全体のスタイル */
.wpcf7-form {
max-width: 500px; /* フォームの幅 */
margin: 0 auto; /* 中央揃え */
background-color: #f9f9f9; /* フォームの背景色 */
padding: 20px;
border-radius: 8px; /* 角丸 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影 */
}
/* ラベルのスタイル */
.wpcf7-form p label {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: #333; /* ラベルのテキスト色 */
}
/* 入力フィールドのスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
padding: 12px 20px;
background-color: #007bff; /* ボタンの背景色 */
color: #fff; /* ボタンのテキスト色 */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.wpcf7-form input[type="submit"]:hover {
background-color: #0056b3; /* ボタンのホバー時の背景色 */
}
contact form7で作ったファームは下記のようなHTMLの構造になっています。それぞれのclassに該当する部分のCSSでデザインしていくイメージになります。
<form action="/your-action-url" method="post" class="wpcf7-form">
<p>
<label>氏名<br>
<span class="wpcf7-form-control-wrap" data-name="your-name">
<input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" autocomplete="name" aria-required="true" aria-invalid="false" value="" type="text" name="your-name">
</span>
</label>
</p>
<p>
<label>メールアドレス<br>
<span class="wpcf7-form-control-wrap" data-name="your-email">
<input size="40" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" autocomplete="email" aria-required="true" aria-invalid="false" value="" type="email" name="your-email">
</span>
</label>
</p>
<p>
<label>題名<br>
<span class="wpcf7-form-control-wrap" data-name="your-subject">
<input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" value="" type="text" name="your-subject">
</span>
</label>
</p>
<p>
<label>メッセージ本文 (任意)<br>
<span class="wpcf7-form-control-wrap" data-name="your-message">
<textarea cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" name="your-message"></textarea>
</span>
</label>
</p>
<p>
<input class="wpcf7-form-control wpcf7-submit" type="submit" value="送信">
</p>
</form>
では、少しだけ勉強していきましょう。上記のCSSを細かく解説していきます。
1. `.wpcf7-form`:
– フォーム全体に適用されるスタイルです。
– `max-width`: フォームの最大幅を設定し、コンテンツが大きすぎないように制限します。
– `margin`: 上下左右の余白を自動的に調整して、フォームを中央に配置します。
– `background-color`: フォームの背景色を設定します。
– `padding`: フォーム内のコンテンツとフォームの境界との間のスペースを設定します。
– `border-radius`: 角丸にします。
– `box-shadow`: フォームに影を付けます。
2. `.wpcf7-form p label`:
– ラベルに適用されるスタイルです。
– `display: block`: ラベルをブロック要素として表示し、独立した行に配置します。
– `margin-bottom`: ラベル間の間隔を設定します。
– `font-weight`: テキストの太さを設定します。
– `color`: ラベルのテキスト色を指定します。
3. `.wpcf7-form input[type=”text”], .wpcf7-form input[type=”email”], .wpcf7-form textarea`:
– 入力フィールドとテキストエリアに適用されるスタイルです。
– `width`: フィールドの幅を100%にして、フォーム全体の幅いっぱいに広げます。
– `padding`: フィールド内のテキストとフィールドの境界との間のスペースを設定します。
– `margin-bottom`: フィールド間の間隔を設定します。
– `border`: フィールドの境界線を設定します。
– `border-radius`: フィールドの角を丸くします。
4. `.wpcf7-form input[type=”submit”]`:
– 送信ボタンに適用されるスタイルです。
– `padding`: ボタン内のテキストとボタンの境界との間のスペースを設定します。
– `background-color`: ボタンの背景色を設定します。
– `color`: ボタンのテキスト色を指定します。
– `border`: ボタンの境界線を設定します。
– `border-radius`: ボタンの角を丸くします。
– `cursor`: マウスポインタがボタンの上にあるときの形状を設定します。
– `transition`: ホバー時のアニメーション効果を追加します。
まとめ
Contact Form 7のデフォルトデザインは地味で、サイトになじまないことがありますよね。でも、CSSを使えばフォームのデザインを一新できます！
「デザインをアップグレード」
自分のサイトに合ったカスタムデザインを実現できます。色やスタイルを調整して、魅力的なフォームに変身させましょう。
「サイト全体との一貫性」
フォームのデザインを統一することで、サイト全体のイメージを整えられます。違和感なく統一感のあるデザインにしましょう。
「使いやすさとコンバージョン率」
わかりやすく見やすいフォームは、ユーザーの利用意欲を高めます。ユーザーフレンドリーなフォームで、コンバージョン率を向上させましょう！
このCSSを使って、魅力的なお問い合わせフォームを手に入れましょう！