WP ContactForm7 フォームをいい感じにカスタマイズするCSS

■概要
自身の経験では、エントリーフォームにこだわるよりも、エントリーしたくなる動機付けにこだわる方が成果が上がります。
しかし、成熟産業では、局部改善の総合により競争力を高めるという方法もあります。
ここでは、こだわり感を出したエントリーフォームを簡単に作る方法を紹介します。

■システム環境
Webシステム：ワードプレス
 プラグイン： ContactForm7
https://ja.wordpress.org/plugins/contact-form-7/

■制作内容
メールアドレスを登録するフォーム。
スパム防止にGoogle reCAPTCHAを追加。
登録したメールアドレス宛て本登録用のURLを送信。

■準備
ワードプレス、ContactForm7、Google reCAPTCHAをセットアップ。
ContactForm7にGoogle reCAPTCHAを設定。
これらのセットアップ方法は、このページで紹介していません。
検索すると丁寧で親切な紹介サイトがあります。

■ContactForm7
WP 左サイドメニュー「お問い合わせ」

・「フォーム」タブに記入
<label>メールアドレス
[email* customer-mail]</label>
 
[recaptcha]
 
[submit "送信"]
メールが送信されます。

---
・必須、任意を表示させる場合の例
必須 メールアドレス
[email* your-email]
必須 お名前
[text* your-name]
任意 題名
[text your-subject]
任意 メッセージ本文
[textarea your-message]
[submit "送信"]

・「メール」タブに記入
送信先： [customer-mail]
送信元： "○○会社 ○○事務局"<notification@*******.com>
題名： "○○会社 ○○お申込ページのご案内
追加ヘッダー： Reply-To: <******@*****.com>
メール本文：
この度は、○○をご希望いただき誠にありがとうございます。

こちらのリンクからお申込してください。
https://******************

お手続きの流れ
https://******************

今後とも○○会社をよろしくお願い申し上げます。

----
このメールは、ご登録メールアドレス宛に自動的に送信しています。
==========================================================================
○○会社
以下、定型のメールフッダー

・「メッセージ」タブに記入
メッセージが正常に送信された：
メールを送信しました。メールに記載されたリンク先の画面にて、お申し込みしてください。 ※1分以内にメールが届かない場合は、「迷惑メール」フォルダに振り分けられている可能性があります。
メッセージの送信に失敗した：
メッセージの送信に失敗しした。再度お試しください。
入力内容に不備が見つかった：
入力内容に問題があります。確認して再度お試しください。

WP 左サイドメニュー「お問い合わせ」
「インテグレーション」にGoogle reCAPTCHAを設定。

■CSS
WP 左サイドメニュー「外観」＞「カスタマイズ」＞「追加CSS」に以下をコピペ

/* ContactForm7のフォームをいい感じにするCSS */
/* CF7 入力欄のフォントの太さを指定 */
form p {
font-weight: bold;
}

/* CF7 フォームのデザイン */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
width: 100%;
margin-right: 10px;
margin-top: 8px;
border: 1px solid #d0d5d8;
border-radius: 3px;
font-size: 1.4em;
}
textarea.wpcf7-form-control.wpcf7-textarea {
height: 200px;
}

/* CF7 必須入力欄の背景を指定（黄色） */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
background: rgba(255, 255, 142, 0.46);
}

/* CF7 送信ボタンのデザイン */
input.wpcf7-submit {
width: 100%;
height: 80px;
background: #00bcd4;
color: #fff;
font-size: 1.3em;
font-weight: 600;
}

/* CF7 エラーメッセージのデザイン */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
color: red;
font-weight: 600;
}

/* CF7 必須マーク */
.must{
color: #fff;
margin-right: 10px;
padding: 6px 10px;
background: #F92931;
border-radius: 20px;
}

/* CF7 任意マーク */
.free {
color: #fff;
margin-right: 10px;
padding: 6px 10px;
background: #424242;
border-radius: 20px;
}

■固定ページ
1．固定ページを新規で作成します。
2．離脱防止のためサイドメニューとヘッダーメニューを非表示に設定。これは、使用テーマに依存します。固定ページ属性のテンプレートで変更します。
3．タイトル
・ロゴ画像を表示（ヘッダーメニュー非表示の場合）
タイトル入力箇所に画像を指定します。
<img src="https://********" width="" height="" />
画像のURLは、WPメディアから取得します。
・テキストを表示（ヘッダーメニュー表示の場合）
タイトル入力箇所に「登録」などを入力
4．本文欄、「テキスト」タブでHTMLを登録
[contact-form-7 *****]の箇所は、WP 左サイドメニュー「お問い合わせ」からContactForm7 作成フォームショートコードを適用してください。

○○○○
[contact-form-7 id="1" title="○○お申し込みフォームをメール"]

------------------------------
参考
https://manablog.org/contactform7/
https://manablog.org/contactform7-css/

WPメモ

WPの設定、実際に行った事のメモ。

WP ContactForm7 フォームをいい感じにカスタマイズするCSS