以前、下記記事でContactForm7のよく使うデザインカスタマイズを紹介しました。
あわせて読みたい
【コピペOK】Contact Form 7でよく使うデザインカスタマイズ
この記事ではContact form7を使ったお問い合わせフォームをカスタマイズするデザインテンプレを紹介します。コピペで簡単に実装できます。
この記事では、さらにシンプルで見やすいContactForm7のデザインカスタマイズを紹介します。
こちらが完成版です。
目次
HTML
下記がHTMLです。
<span class="must">必須</span> お名前
[text* your-name]
<span class="must">必須</span> メールアドレス
[email* your-email]
<span class="free">任意</span> お問い合わせ種別
[select contact-menu include_blank "記事について" "Webサイト制作について" "中の人について" "その他"]
<span class="free">任意</span> お問い合わせ内容
[textarea your-message]
<p>[acceptance accept-this-1 class:input2] スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。[/acceptance]</p>
[submit "送信"]今回のカスタマイズでは、必須項目には、下記を項目名の前に入れます。
<span class="must">必須</span>任意項目には、下記を項目名の前に入れます。
<span class="free">任意</span>このHTMLを次の項目のCSSでデザインを追加していきます。
CSS
下記がCSSとなります。
/************************************
** シンプルお問い合わせフォームの入力
************************************/
/* 必須マーク */
.must{
color: #fff;
margin-right: 10px;
padding: 6px 10px;
background: #F92931;
border-radius: 20px;
}
/* 任意マーク */
.free {
color: #fff;
margin-right: 10px;
padding: 6px 10px;
background: #424242;
border-radius: 20px;
}
/* 項目名を太字にする */
form p {
font-weight: 600;
margin-bottom: 2em;
}
/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea,.wpcf7-select {
width: 100%;
padding: 8px 15px;
margin-right: 10px;
margin-top: 10px;
border: 1px solid #d0d5d8;
border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
height: 200px;
}
/* 必須項目の入力欄の色を変える */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
background: rgba(255, 255, 142, 0.46);
}
/* 送信ボタンのデザイン */
input.wpcf7-submit {
display: block;
padding: 15px;
width: 350px;
background: #000;
color: #fff;
font-size: 18px;
font-weight: 700;
border-radius: 2px;
margin: 25px auto 0;
border: 2px solid #000;
transition: 0.7s
}
input.wpcf7-submit:hover {
background: #fff;
color: #000;
border: 2px solid #000
}
/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
color: red;
font-weight: 600;
}入力欄を見やすくする下記のCSSですが、このCSSでは今使っている
- 名前やメールアドレスなどのテキスト入力欄
- セレクトボックス
- 複数行入力のテキストエリア
のみにしか適応していません。
/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea,.wpcf7-select {
width: 100%;
padding: 8px 15px;
margin-right: 10px;
margin-top: 10px;
border: 1px solid #d0d5d8;
border-radius: 3px;
}必要に応じて、ラジオボタンやチェックボックスのwpcf7-○○をセレクタを追加してください。
メール設定
作成したお問い合わせフォームから送信されてくるメールの表示です。
メッセージ本文には下記をそのまま使えます。
お問い合わせされた方： [your-name] <[your-email]>
名前：[your-name]
メールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ内容： [contact-menu]
お問い合わせ内容詳細
[your-message]
作成したフォームは、ショートコードやブロックエディターのブロックの追加でページに埋め込みましょう。
Coment