Contact Form7 フォームのデザインをいい感じに改良したい【CSS】

WordPress(ワードプレス)

2023.05.012023.05.03

Contact Form7は、WordPressで最も広く使用されているフォームプラグインの1つです。デフォルトのデザインは単純であるため、改良することは可能です。

フォームのHTMLコードを確認する
CSSファイルを作成する
CSSスタイルを適用する
カスタムCSSを作成する
まとめ

フォームのHTMLコードを確認する

まず、Contact Form7のフォームのHTMLコードを確認します。これには、フォームのフィールド（テキストフィールド、チェックボックス、ラジオボタンなど）が含まれます。

テンプレートの状態だと下記のようになっています。

<label> 氏名
    [text* your-name autocomplete:name] </label>

<label> メールアドレス
    [email* your-email autocomplete:email] </label>

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]

CSSファイルを作成する

例えば、下記のようなCSSを準備します。

/* フォーム全体の背景色を変更する */
.wpcf7-form {
background-color: #f0f0f0;
}

/* フォーム全体の余白を変更する */
.wpcf7-form {
margin: 20px;
padding:20px;
}

テキストフィールドのスタイル
/* テキストフィールドの背景色を変更する */
.wpcf7-form input[type="text"] {
background-color: #ffffff;
}

/* テキストフィールドのボーダーを変更する */
.wpcf7-form input[type="text"] {
border: 2px solid #cccccc;
}

/* テキストフィールドのフォントサイズを変更する */
.wpcf7-form input[type="text"] {
font-size: 16px;
}

チェックボックスのスタイル
/* チェックボックスの背景色を変更する */
.wpcf7-form input[type="checkbox"] {
background-color: #ffffff;
}

/* チェックボックスのチェックマークの色を変更する */
.wpcf7-form input[type="checkbox"]:checked:before {
color: #ff0000;
}

/* チェックボックスの余白を変更する */
.wpcf7-form input[type="checkbox"] {
margin-right: 10px;
}

ラジオボタンのスタイル
/* ラジオボタンの背景色を変更する */
.wpcf7-form input[type="radio"] {
background-color: #ffffff;
}

/* ラジオボタンの選択状態の色を変更する */
.wpcf7-form input[type="radio"]:checked:before {
background-color: #ff0000;
}

/* ラジオボタンの余白を変更する */
.wpcf7-form input[type="radio"] {
margin-right: 10px;
}

背景色や余白の調整を行っています。