2021/2/19

2021/10/5

5148 views

WorPressのお問い合わせプラグインでいつもお世話になっている「コンタクトフォーム７（Contact Form7）」。
とても使いやすくありがたいプラグインです。

もともとのデザインがちょっといまいち・・

ただ、デフォルトのままだと送信完了時の枠で囲われたテキストや未入力項目があるときのエラーテキストのデザインがちょっとサイトに調和せず気になります。

デフォルトのキャプチャ画像

スタイルシートでデザインを変える

このデザインは、コンタクトフォーム７のスタイルシートから読み込まれているので、以下のようにstyle.cssで上書きすれば変更可能です。
下記をそのままコピペで記述すればデザインが変わります。
色などはお好みで変えてください。

style.css

.wpcf7 form.sent .wpcf7-response-output {/* 送信ボタン下完了時 */
    border-color: #8cebe5;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {/* 送信ボタン下未入力警告 */
    border-color: #f88;
}
.wpcf7-not-valid-tip {/* 必須未入力項目下の文章 */
    color: #f88;
    font-size: 12px;
}

修正後キャプチャ画像

 

まとめ

以上です。
コピペ用としてご活用ください。