【WordPress】お問合せフォーム「Contact Form 7」カスタマイズ

目次
プラグイン「Contact Form 7」をインストール
プラグイン>新規プラグインを追加>プラグインの検索>Contact Form 7>今すぐインストール>有効化

メールフォームの項目を追加
お問い合わせ>新規追加>コンタクトフォームを追加でタイトル・フォームを入力
下記は当サイトと同じメールフォームの内容です。フォームの項目・補足文章は適宜調整して下さい。
<label>[text* your-name autocomplete:name placeholder"お名前"] </label>
<label>[email* your-email autocomplete:email placeholder"メールアドレス"]</label>
<label>[textarea* your-message x4 placeholder"お問合せ内容"]</label>
[checkbox* checkbox use_label_element "個人情報の取り扱い及び上記送信内容を確認したらチェックを入れてください。"]
[submit "送信"]
<div class="mailform-text">万一、数日経ってもこちらから返信がない場合は、大変お手数ですが再度「メールアドレス」宛までご連絡ください。</div>
<div class="mailform-text">返信メールをお受け取りいただけるよう、受信設定(迷惑メール設定)等をお確かめください。</div>CSSを “style.css” に追加
外観>テーマファイルエディタ>style.cssに下記の内容を追加
/* Contact Form 7 */
.wpcf7-form label {
font-weight: normal; /* テキストを太字 */
}
.wpcf7-form p {
margin-bottom: 0px; /* フォーム下の余白 */
}
/* フォームのカスタマイズ */
.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-textarea {
width: 100%;
background-color: #fff;
margin-top: 5px;
}
/* ボタンのカスタマイズ */
.wpcf7-submit, .wpcf7-previous {
display: inline-block;
width: 100%;
padding: 0.8em 1em;
border-radius: 5px;
background: #197a80; /* ボタン背景色 */
font-size: 16px; /* ボタン文字サイズ */
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1;
color: #fff !important;
margin-top: 10px;
margin-bottom: 0px;
}
/* フォーム以外の補足文章用 */
.mailform-text {
font-size: 14px;
line-height: 1.5;
}以上でWordPressプラグイン「Contact Form 7」のカスタマイズ方法となります。
引用元の「THE GOD OF BLOG」様のサイトにて詳しく丁寧に紹介されています。
引用元:THE GOD OF BLOG -SWELLお問い合わせフォームの作り方|Contact Form 7で簡単
