Contact Form 7(コンタクトフォーム7)でお問い合わせページを作るとき、もっと簡単に、オシャレにカスタマイズできるようにテンプレートを作ってみました。お問い合わせフォームのカスタマイズって、慣れていないと結構時間がかかって面倒なんですよね。しかもプラグインを使うとHTMLも特殊になるので余計に時間がかかるという。
Javascriptを使えばもっとリッチな表現が出来たりしますが、ここではあえてCSSだけでカスタマイズしてお問い合わせフォームテンプレートを作ってみました。気に入ったものがあればコピペして使ってください!
※対象ブラウザは2019年10月時点の各最新ブラウザを前提にしてます。
テンプレート利用の準備
共通のHTMLコードをコピペ
まず、テンプレート用の共通HTMLコードを「Contact Form 7」の「お問い合わせ」作成ページのフォーム作成画面(下図参照)でコピペします。

テンプレート用の共通HTMLコード
コピペするコードはこちらです。必須項目にしたいフィールドには、”form__label”に”is-required”のクラスを追加して、フォームタグにも「*」を忘れずにつけてくださいね。
- コードをみる
-
123456789101112131415161718192021222324252627282930313233343536<div class="form__wrap"><div class="form__row row-name"><p class="form__label is-required"><label for="your-name">お名前</label></p><p class="form__body">[text* your-name id:your-name placeholder "お名前"]</p></div><div class="form__row row-tel"><p class="form__label is-required"><label for="tel">電話番号</label></p><p class="form__body">[tel* tel id:tel placeholder "03-1234-1234"]</p></div><div class="form__row row-email"><p class="form__label is-required"><label for="email">メールアドレス</label></p><p class="form__body">[email* email id:email placeholder "sample@sample.com"]</p></div><div class="form__row row-checkbox"><p class="form__label"><label>チェックボックス</label></p><p class="form__body">[checkbox checkbox id:checkbox use_label_element "選択肢1" "選択肢2" "選択肢3"]</p></div><div class="form__row row-radio"><p class="form__label"><label>ラジオボタン</label></p><p class="form__body">[radio radio id:radio use_label_element default:1 "選択肢1" "選択肢2" "選択肢3"]</p></div><div class="form__row row-select"><p class="form__label"><label for="select">ドロップダウンメニュー</label></p><p class="form__body"><span class="select-wrap">[select select id:select include_blank "選択肢1" "選択肢2" "選択肢3"]</span></p></div><div class="form__row row-message"><p class="form__label is-required"><label for="message">お問い合わせ内容</label></p><p class="form__body">[textarea* message id:message placeholder "お問い合わせ内容"]</p></div><div class="form__row row-privacy"><p class="form__body">[acceptance acceptance] <a href="#" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>に同意する [/acceptance]</p></div><div class="form__row row-submit"><div class="submit-btn">[submit id:submit "送 信"]<div class="submit-bg"></div></div></div></div>
テンプレート[1] シンプルな縦並びのフォーム
一見普通のフォームですが、どのブラウザでも出来るだけ同じに見えるように地味に工夫してあります。フィールドの枠線の色はもちろん、チェックボックスのチェックの色、ラジオボタンの色などを自由に変えられるのでカスタマイズ性は抜群です。
サンプル画像

デモページ
チェックボックスなどの実際の動きは下記のデモページで触ってみてください。デモなので送信ボタンを押しても何も送信されません。
このページについて 当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[1]のデモページ[…]
テンプレート[1]を使う準備
先程コピペした共通のHTMLコードの一番上の行を次のように変更します。
1 |
<div class="form__wrap template01"> |
テンプレート[1] のCSSコード
次のCSSをスタイルシートにコピペします。
- コードをみる
-
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346/* template01 */.form__wrap {width: 100%;max-width: 900px;/*フォームの最大幅*/margin-right: auto;margin-left: auto;}.wpcf7 .template01 {color: #333;font-size: 16px;}.wpcf7 .template01 a {margin: 0;padding: 0;text-decoration: underline;color: inherit;transition: opacity .25s;}.wpcf7 .template01 a:hover {opacity: .5;transition: opacity .25s;}.wpcf7 .template01 div.form__row {margin: 0;padding: 0;margin-top: 2em;}.wpcf7 .template01 div.form__row.row-privacy {margin-top: 3.5em;text-align: center;}.wpcf7 .template01 div.form__row.row-submit {margin-top: 3em;text-align: center;}.wpcf7 .template01 p.form__label,.wpcf7 .template01 p.form__body {margin: 0;margin-bottom: .5em;padding: 0;box-sizing: border-box;}.wpcf7 .template01 p.form__label label {position: relative;margin: 0;padding: 0;box-sizing: border-box;}.wpcf7 .template01 p.form__label.is-required label {padding-right: 40px;}.wpcf7 .template01 p.form__label.is-required label::after {content: "必須";display: block;position: absolute;top: 0;right: 0;width: 36px;padding: 0 5px;background-color: #eb1919;color: #fff;font-size: 11px;text-align: center;box-sizing: border-box;}/* テキストフィールド */.wpcf7 .template01 input[type=text],.wpcf7 .template01 input[type=tel],.wpcf7 .template01 input[type=email],.wpcf7 .template01 input[type=url],.wpcf7 .template01 input[type=date],.wpcf7 .template01 input[type=number],.wpcf7 .template01 textarea {width: 100%;margin: 0;padding: .5em 1em;border: 1px solid #ccc;border-radius: 0;box-shadow: none;background-color: #fff;color: inherit;font-family: inherit;font-weight: inherit;font-size: inherit;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;appearance: none;}/* テキストフィールド placeholder */.wpcf7 .template01 input[type=text]::placeholder,.wpcf7 .template01 input[type=tel]::placeholder,.wpcf7 .template01 input[type=email]::placeholder,.wpcf7 .template01 input[type=url]::placeholder,.wpcf7 .template01 input[type=date]::placeholder,.wpcf7 .template01 input[type=number]::placeholder,.wpcf7 .template01 textarea::placeholder {color: #ccc;}.wpcf7 .template01 input[type=text]:-ms-input-placeholder,.wpcf7 .template01 input[type=tel]:-ms-input-placeholder,.wpcf7 .template01 input[type=email]:-ms-input-placeholder,.wpcf7 .template01 input[type=url]:-ms-input-placeholder,.wpcf7 .template01 input[type=date]:-ms-input-placeholder,.wpcf7 .template01 input[type=number]:-ms-input-placeholder,.wpcf7 .template01 textarea:-ms-input-placeholder {color: #ccc;}.wpcf7 .template01 input[type=text]::-ms-input-placeholder,.wpcf7 .template01 input[type=tel]::-ms-input-placeholder,.wpcf7 .template01 input[type=email]::-ms-input-placeholder,.wpcf7 .template01 input[type=url]::-ms-input-placeholder,.wpcf7 .template01 input[type=date]::-ms-input-placeholder,.wpcf7 .template01 input[type=number]::-ms-input-placeholder,.wpcf7 .template01 textarea::-ms-input-placeholder {color: #ccc;}/* テキストフィールド フォーカス時 */.wpcf7 .template01 input[type=text]:focus,.wpcf7 .template01 input[type=tel]:focus,.wpcf7 .template01 input[type=email]:focus,.wpcf7 .template01 input[type=url]:focus,.wpcf7 .template01 input[type=date]:focus,.wpcf7 .template01 input[type=number]:focus,.wpcf7 .template01 textarea:focus {outline: 0;border: 1px #080808 solid;}/* チェックボックス */.wpcf7 .template01 input[type=checkbox] {display: none;}.wpcf7 .template01 input[type=checkbox] + span {cursor: pointer;position: relative;margin: 0;padding: 0 1em 0 1.8em;font-size: inherit;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template01 input[type=checkbox] + span::before {content: "";opacity: 1;display: block;position: absolute;top: 0;left: 0;width: 1.24em;height: 1.24em;border: 1px solid #ccc;border-radius: 0;background-color: #fff;box-sizing: border-box;transition: opacity .25s ease;z-index: 1;}.wpcf7 .template01 input[type=checkbox] + span::after {content: "";opacity: 0;display: block;position: absolute;top: 0.15em;left: 0.44em;width: 0.4em;height: .8em;border-bottom: 3px solid #000;border-right: 3px solid #000;box-sizing: border-box;transform: rotate(40deg);transition: opacity .25s ease;z-index: 10;}.wpcf7 .template01 input[type=checkbox]:checked + span {color: #306ad4;transition: all .25s ease;}.wpcf7 .template01 input[type=checkbox]:checked + span::before {opacity: 1;transition: opacity .25s ease;}.wpcf7 .template01 input[type=checkbox]:checked + span::after {opacity: 1;border-bottom: 2px solid #306ad4;border-right: 2px solid #306ad4;transition: opacity .25s ease;}/* ラジオボタン */.wpcf7 .template01 input[type=radio] {display: none;}.wpcf7 .template01 input[type=radio] + span {cursor: pointer;position: relative;margin: 0;padding: 0 1em 0 1.8em;font-size: inherit;transition: opacity .25s ease;}.wpcf7 .template01 input[type=radio] + span::before {content: "";display: block;position: absolute;top: 0;left: 0;width: 1em;height: 1em;border: 1px solid #ccc;border-radius: 50%;background-color: #fff;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template01 input[type=radio] + span::after {content: "";display: block;opacity: 0;position: absolute;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template01 input[type=radio]:checked + span {color: #306ad4;transition: opacity .25s ease;}.wpcf7 .template01 input[type=radio]:checked + span::after {opacity: 1;top: .2em;left: .2em;width: .6em;height: .6em;background-color: #306ad4;border-radius: 50%;box-sizing: border-box;transition: opacity .25s ease;}/* セレクト */.wpcf7 .template01 span.select-wrap {position: relative;width: 250px;margin: 0;padding: 0;}.wpcf7 .template01 select {cursor: pointer;width: 250px;max-width: 100%;margin: 0;padding: .5em 2.5em .5em 1em;border: 1px solid #ccc;border-radius: 4px;box-shadow: none;background-color: #fff;color: inherit;font-size: inherit;line-height: 1;box-sizing: border-box;transition: border-color 0.2s ease, outline 0.2s ease;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.wpcf7 .template01 select::-ms-expand {display: none;}.wpcf7 .template01 span.select-wrap::after {content: "";pointer-events: none;position: absolute;display: block;width: .6em;height: .6em;top: 50%;right: 1em;margin-top: -3px;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;transform: rotate(45deg) translateY(-50%);transform-origin: 50% 0;box-sizing: border-box;}.wpcf7 .template01 select:focus {outline: 0;border: 1px #080808 solid;}.wpcf7 .template01 span.select-wrap:focus-within::after {border-bottom: 1px solid #080808;border-right: 1px solid #080808;}/* 送信ボタン */.wpcf7 .template01 .submit-btn {position: relative;width: 320px;height: 65px;max-width: 100%;margin: 0;padding: 0;margin-left: auto;margin-right: auto;}.wpcf7 .template01 input[type="submit"] {cursor: pointer;width: 320px;max-width: 100%;padding: 18px;border-radius: 0;box-shadow: none;border: 1px solid #000;background-color: #000;color: #fff;font-size: 18px;text-align: center;box-sizing: border-box;transition: opacity .25s;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.wpcf7 .template01 input[type="submit"]:disabled {cursor: not-allowed;box-shadow: none!important;border: 1px solid #f8f8f8!important;background-color: #f8f8f8!important;color: #999!important;}.wpcf7 .template01 input[type="submit"]:hover {border: 1px solid #000;background-color: #fff;color: #000;transition: opacity .25s, background-color .25s;}.wpcf7 .template01 input[type="submit"]:focus {outline: 1px #eee solid;border: 1px #080808 solid;}.wpcf7 .template01 span.wpcf7-list-item {margin: 0 1em .2em 0;}.wpcf7 .template01 .ajax-loader {display: block;}@media only screen and (max-width: 768px) {.wpcf7 .template01 span.wpcf7-list-item {display: block;}}
テンプレート[2] ラベルとフィールドが左右横並び(柔らかいイメージ)
PCではラベルとフィールドが横並びで、768px以下で縦並びになります。女性向けの柔らかい感じのデザインにしてみました。
サンプル画像

デモページ
このページについて 当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[2]のデモページ[…]
テンプレート[2]を使う準備
先程コピペした共通のHTMLコードの一番上の行を次のように変更します。
1 |
<div class="form__wrap template02"> |
テンプレート[2] のCSSコード
次のCSSをスタイルシートにコピペします。
- コードをみる
-
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382/* template02 */.form__wrap {width: 100%;max-width: 900px;/*フォームの最大幅*/margin-right: auto;margin-left: auto;}.wpcf7 .template02 {color: #666;font-size: 16px;}.wpcf7 .template02 a {margin: 0;padding: 0;text-decoration: underline;color: inherit;transition: opacity .25s;}.wpcf7 .template02 a:hover {opacity: .5;transition: opacity .25s;}.wpcf7 .template02 div.form__row {display: flex;margin: 0;padding: 0;border-top: 1px solid #efe8e5;}.wpcf7 .template02 div.form__row.row-privacy,.wpcf7 .template02 div.form__row.row-submit {display: block;border-top: 0;margin-top: 1em;text-align: center;}.wpcf7 .template02 p.form__label,.wpcf7 .template02 p.form__body {margin: 0;padding: 0;box-sizing: border-box;}.wpcf7 .template02 p.form__label {width: 36%;padding: 1.5em 1em;}.wpcf7 .template02 p.form__body {width: 64%;padding: 1.5em 1em;}.wpcf7 .template02 div.form__row.row-privacy .form__body,.wpcf7 .template02 div.form__row.row-submit .form__body {width: 100%;}.wpcf7 .template02 p.form__label label {position: relative;margin: 0;padding: 0;padding-left: 44px;box-sizing: border-box;}.wpcf7 .template02 p.form__label label::after {content: "任意";display: block;position: absolute;top: 0;left: 0;width: 36px;margin: 0;padding: 0 5px;border-radius: 2px;background-color: #f1f1f1;color: #929292;font-size: 11px;text-align: center;box-sizing: border-box;}.wpcf7 .template02 p.form__label.is-required label {position: relative;}.wpcf7 .template02 p.form__label.is-required label::after {content: "必須";display: block;position: absolute;top: 0;right: 0;width: 36px;padding: 0 5px;background-color: #6c5c2f;color: #fff;font-size: 11px;text-align: center;}/* テキストフィールド */.wpcf7 .template02 input[type=text],.wpcf7 .template02 input[type=tel],.wpcf7 .template02 input[type=email],.wpcf7 .template02 textarea {width: 100%;margin: 0;padding: .5em 1em;border: 1px solid #c4bbb8;border-radius: 4px;box-shadow: none;background-color: #fefefe;color: inherit;font-family: inherit;font-weight: inherit;font-size: 16px;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;appearance: none;}/* テキストフィールド placeholder */.wpcf7 .template01 input[type=text]::placeholder,.wpcf7 .template01 input[type=tel]::placeholder,.wpcf7 .template01 input[type=email]::placeholder,.wpcf7 .template01 input[type=url]::placeholder,.wpcf7 .template01 input[type=date]::placeholder,.wpcf7 .template01 input[type=number]::placeholder,.wpcf7 .template01 textarea::placeholder {color: #ccc;}.wpcf7 .template01 input[type=text]:-ms-input-placeholder,.wpcf7 .template01 input[type=tel]:-ms-input-placeholder,.wpcf7 .template01 input[type=email]:-ms-input-placeholder,.wpcf7 .template01 input[type=url]:-ms-input-placeholder,.wpcf7 .template01 input[type=date]:-ms-input-placeholder,.wpcf7 .template01 input[type=number]:-ms-input-placeholder,.wpcf7 .template01 textarea:-ms-input-placeholder {color: #ccc;}.wpcf7 .template01 input[type=text]::-ms-input-placeholder,.wpcf7 .template01 input[type=tel]::-ms-input-placeholder,.wpcf7 .template01 input[type=email]::-ms-input-placeholder,.wpcf7 .template01 input[type=url]::-ms-input-placeholder,.wpcf7 .template01 input[type=date]::-ms-input-placeholder,.wpcf7 .template01 input[type=number]::-ms-input-placeholder,.wpcf7 .template01 textarea::-ms-input-placeholder {color: #ccc;}/* テキストフィールド フォーカス時 */.wpcf7 .template01 input[type=text]:focus,.wpcf7 .template01 input[type=tel]:focus,.wpcf7 .template01 input[type=email]:focus,.wpcf7 .template01 input[type=url]:focus,.wpcf7 .template01 input[type=date]:focus,.wpcf7 .template01 input[type=number]:focus,.wpcf7 .template01 textarea:focus {outline: 0;border: 1px #6c5d2f solid;box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);}/* チェックボックス */.wpcf7 .template02 input[type=checkbox] {display: none;}.wpcf7 .template02 input[type=checkbox] + span {cursor: pointer;position: relative;margin: 0;padding: 0 1em 0 1.8em;font-size: inherit;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template02 input[type=checkbox] + span::before {content: "";display: block;position: absolute;top: 0;left: 0;width: 1.24em;height: 1.24em;border: 1px solid #c4bbb8;border-radius: 4px;background-color: #fefefe;box-sizing: border-box;}.wpcf7 .template02 input[type=checkbox] + span::after {content: "";opacity: 0;display: block;position: absolute;top: 0.15em;left: 0.44em;width: 0.4em;height: .8em;border-bottom: 3px solid #000;border-right: 3px solid #000;box-sizing: border-box;transform: rotate(40deg);transition: opacity .25s ease;}.wpcf7 .template02 input[type=checkbox]:checked + span {color: #6c5d2f;transition: all .25s ease;}.wpcf7 .template02 input[type=checkbox]:checked + span::before {opacity: 1;border: 1px solid #6c5d2f;box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);background-color: #6c5d2f;transition: opacity .25s ease;}.wpcf7 .template02 input[type=checkbox]:checked + span::after {opacity: 1;border-bottom: 3px solid #fff;border-right: 3px solid #fff;transition: opacity .25s ease;}/* ラジオボタン */.wpcf7 .template02 input[type=radio] {display: none;}.wpcf7 .template02 input[type=radio] + span {cursor: pointer;position: relative;margin: 0;padding: 0 1em 0 1.8em;font-size: inherit;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template02 input[type=radio] + span::before {content: "";display: block;position: absolute;top: 0;left: 0;width: 1em;height: 1em;border: 1px solid #c4bbb8;border-radius: 50%;background-color: #fefefe;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template02 input[type=radio] + span::after {content: "";display: block;opacity: 0;position: absolute;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template02 input[type=radio]:checked + span {color: #6c5d2f;}.wpcf7 .template02 input[type=radio]:checked + span::before {box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);}.wpcf7 .template02 input[type=radio]:checked + span::after {opacity: 1;top: 0;left: 0;width: 1em;height: 1em;background-color: #6c5d2f;border-radius: 50%;box-sizing: border-box;transition: opacity .25s ease;}/* セレクト */.wpcf7 .template02 span.select-wrap {position: relative;width: 250px;margin: 0;padding: 0;box-sizing: border-box;}.wpcf7 .template02 select {cursor: pointer;width: 250px;max-width: 100%;margin: 0;padding: .5em 3.5em .5em 1em;border: 1px solid #c4bbb8;border-radius: 4px;box-shadow: none;background-color: #fefefe;background-image: linear-gradient(90deg, #d4cbb2, #d4cbb2);background-position: 100% 0;background-size: 2em 3.5em;background-repeat: no-repeat;color: inherit;font-size: inherit;line-height: 1;box-sizing: border-box;transition: border-color 0.2s ease, outline 0.2s ease;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.wpcf7 .template02 select::-ms-expand {display: none;}.wpcf7 .template02 span.select-wrap::after {content: "";pointer-events: none;position: absolute;display: block;width: .6em;height: .6em;top: 50%;right: .8em;margin-top: -3px;border-bottom: 1px solid #6c5d2f;border-right: 1px solid #6c5d2f;transform: rotate(45deg) translateY(-50%);transform-origin: 50% 0;box-sizing: border-box;}.wpcf7 .template02 select:focus {outline: 0;border: 1px #6c5d2f solid;box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);}.wpcf7 .template02 span.select-wrap:focus-within::after {border-bottom: 1px solid #6c5d2f;border-right: 1px solid #6c5d2f;}/* 送信ボタン */.wpcf7 .template02 .submit-btn {position: relative;width: 320px;height: 65px;max-width: 100%;margin: 0;padding: 0;margin-left: auto;margin-right: auto;}.wpcf7 .template02 input[type="submit"] {cursor: pointer;width: 320px;max-width: 100%;padding: 18px;box-shadow: none;border: 1px #6c5d2f solid;border-radius: 8px;background-color: #6c5d2f;color: #fff;font-size: 18px;text-align: center;box-sizing: border-box;transition: all .25s;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.wpcf7 .template02 input[type="submit"]:disabled {cursor: not-allowed;box-shadow: none!important;border: 1px solid #f8f8f8!important;background-color: #f8f8f8!important;color: #929292!important;}.wpcf7 .template02 input[type="submit"]:hover {box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);background-color: #fff;color: #6c5d2f;transition: all .25s;}.wpcf7 .template02 input[type="submit"]:focus {outline: 0;border: 1px #6c5d2f solid;box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);}@media only screen and (max-width: 768px) {.wpcf7 .template02 div.form__row {display: block;}.wpcf7 .template02 p.form__label {width: 100%;padding: 1.5em 1em 0;}.wpcf7 .template02 p.form__body {width: 100%;padding: 1em 1em 1.5em;}}
テンプレート[3] ラベルとフィールドが左右横並び(かっこいいイメージ)
PCではラベルとフィールドが横並びで、768px以下で縦並びになります。チェックボックスの動きなどに少しこだわってるので、デモを触ってみてください!
サンプル画像

デモページ
このページについて 当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[3]のデモページ[…]
テンプレート[3]を使う準備
先程コピペした共通のHTMLコードの一番上の行を次のように変更します。
1 |
<div class="form__wrap template03"> |
テンプレート[3] のCSSコード
次のCSSをスタイルシートにコピペします。
- コードをみる
-
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418/* template03 */.form__wrap {width: 100%;max-width: 900px;/*フォームの最大幅*/margin-right: auto;margin-left: auto;}.wpcf7 .template03 {color: #333;font-size: 14px;}.wpcf7 .template03 a {margin: 0;padding: 0;text-decoration: underline;color: inherit;transition: opacity .25s;}.wpcf7 .template03 a:hover {opacity: .5;transition: opacity .25s;}.wpcf7 .template03 div.form__row {display: flex;align-items: center;margin: 0;}.wpcf7 .template03 div.form__row.row-privacy,.wpcf7 .template03 div.form__row.row-submit {display: block;margin-top: 1em;text-align: center;}.wpcf7 .template03 div.form__row.row-privacy .form__body,.wpcf7 .template03 div.form__row.row-submit .form__body {width: 100%;}.wpcf7 .template03 div.form__row.row-message {align-items: flex-start;}.wpcf7 p.form__label,.wpcf7 p.form__body {margin: 0;box-sizing: border-box;}.wpcf7 .template03 p.form__label {width: 36%;padding: 1em;}.wpcf7 .template03 p.form__body {width: 64%;padding: 1em;}.wpcf7 .template03 p.form__label label {position: relative;padding-left: 44px;}.wpcf7 .template03 p.form__label label::after {content: "任意";display: block;position: absolute;top: 0;left: 0;width: 36px;margin: 0;padding: 0 5px;border-radius: 0;background-color: #f6f6f6;color: #999;font-size: 11px;text-align: center;box-sizing: border-box;}.wpcf7 .template03 p.form__label.is-required label {position: relative;}.wpcf7 .template03 p.form__label.is-required label::after {content: "必須";display: block;position: absolute;width: 36px;margin: 0;padding: 0 5px;border: 1px solid #e00022;background-color: #fff;color: #e00022;font-size: 11px;text-align: center;box-sizing: border-box;}/* テキストフィールド */.wpcf7 .template03 input[type=text],.wpcf7 .template03 input[type=tel],.wpcf7 .template03 input[type=email],.wpcf7 .template03 textarea {width: 100%;margin: 0;padding: .5em 1em;border: 1px solid #333;border-left: 4px solid #333;border-radius: 0;box-shadow: none;background-color: #fff;color: inherit;font-family: inherit;font-weight: inherit;font-size: inherit;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;appearance: none;}/* テキストフィールド placeholder */.wpcf7 .template03 input[type=text]::placeholder,.wpcf7 .template03 input[type=tel]::placeholder,.wpcf7 .template03 input[type=email]::placeholder,.wpcf7 .template03 input[type=url]::placeholder,.wpcf7 .template03 input[type=date]::placeholder,.wpcf7 .template03 input[type=number]::placeholder,.wpcf7 .template03 textarea::placeholder {color: #ccc;}.wpcf7 .template03 input[type=text]:-ms-input-placeholder,.wpcf7 .template03 input[type=tel]:-ms-input-placeholder,.wpcf7 .template03 input[type=email]:-ms-input-placeholder,.wpcf7 .template03 input[type=url]:-ms-input-placeholder,.wpcf7 .template03 input[type=date]:-ms-input-placeholder,.wpcf7 .template03 input[type=number]:-ms-input-placeholder,.wpcf7 .template03 textarea:-ms-input-placeholder {color: #ccc;}.wpcf7 .template03 input[type=text]::-ms-input-placeholder,.wpcf7 .template03 input[type=tel]::-ms-input-placeholder,.wpcf7 .template03 input[type=email]::-ms-input-placeholder,.wpcf7 .template03 input[type=url]::-ms-input-placeholder,.wpcf7 .template03 input[type=date]::-ms-input-placeholder,.wpcf7 .template03 input[type=number]::-ms-input-placeholder,.wpcf7 .template03 textarea::-ms-input-placeholder {color: #ccc;}/* テキストフィールド フォーカス時 */.wpcf7 .template03 input[type=text]:focus,.wpcf7 .template03 input[type=tel]:focus,.wpcf7 .template03 input[type=email]:focus,.wpcf7 .template03 input[type=url]:focus,.wpcf7 .template03 input[type=date]:focus,.wpcf7 .template03 input[type=number]:focus,.wpcf7 .template03 textarea:focus {outline: 0;box-shadow: 2px 3px 2px 1px rgba(205,205,205,.7);}/* チェックボックス */.wpcf7 .template03 input[type=checkbox] {display: none;}.wpcf7 .template03 input[type=checkbox] + span {cursor: pointer;position: relative;margin: 0;padding: 0 1em 0 1.8em;font-size: inherit;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template03 input[type=checkbox] + span::before {content: "";opacity: 1;display: block;position: absolute;top: 0;left: 0;width: 1.24em;height: 1.24em;border: 1px solid #333;border-radius: 0;background-color: #fff;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template03 input[type=checkbox] + span::after {content: "";opacity: 0;display: block;position: absolute;top: 0.15em;left: 0.44em;width: 0.4em;height: .8em;border-bottom: 3px solid #000;border-right: 3px solid #000;box-sizing: border-box;transform: rotate(40deg);transition: all .25s;}.wpcf7 .template03 input[type=checkbox]:checked + span {color: #333;transition: all .25s ease;}.wpcf7 .template03 input[type=checkbox]:checked + span::before {opacity: 0;}.wpcf7 .template03 input[type=checkbox]:checked + span::after {opacity: 1;border-bottom: 2px solid #333;border-right: 2px solid #333;transform: rotate(400deg);transition: all .25s;}/* ラジオボタン */.wpcf7 .template03 input[type=radio] {display: none;}.wpcf7 .template03 input[type=radio] + span {cursor: pointer;position: relative;padding: 0 1em 0 1.8em;font-size: inherit;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template03 input[type=radio] + span::before {content: "";display: block;position: absolute;top: 0;left: 0;width: 1em;height: 1em;border: 1px solid #ccc;border-radius: 50%;background-color: #fff;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template03 input[type=radio] + span::after {content: "";display: block;opacity: 0;position: absolute;border: 1px solid #ccc;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template03 input[type=radio]:checked + span {color: #333;transition: all .25s ease;}.wpcf7 .template03 input[type=radio]:checked + span::before {background-color: transparent;}.wpcf7 .template03 input[type=radio]:checked + span::after {opacity: 1;top: 0;left: 0;width: 1em;height: 1em;border: 2px solid #333;border-radius: 50%;background-color: transparent;animation-name: border-circle;animation-duration: .25s;transition: opacity .25s ease;}/* セレクト */.wpcf7 .template03 span.select-wrap {position: relative;width: 250px;margin: 0;}.wpcf7 .template03 select {cursor: pointer;width: 250px;max-width: 100%;margin: 0;padding: .5em 1.8em .5em 1em;border: 1px solid #333;border-left: 4px solid #333;border-radius: 0;box-shadow: none;background-color: #fff;color: inherit;font-size: inherit;line-height: 1;box-sizing: border-box;transition: border-color 0.2s ease, outline 0.2s ease;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.wpcf7 .template03 select::-ms-expand {display: none;}.wpcf7 .template03 span.select-wrap::after {content: "";pointer-events: none;position: absolute;display: block;width: .4em;height: .4em;top: calc(50% + .1em);right: .8em;margin-top: -3px;border-bottom: 1px solid #b3b3b3;border-right: 1px solid #b3b3b3;transform: rotate(45deg) translateY(-50%);transform-origin: 50% 0;box-sizing: border-box;}.wpcf7 .template03 select:focus {outline: 0;box-shadow: 2px 3px 2px 1px rgba(205,205,205,.7);}.wpcf7 .template03 span.select-wrap:focus-within::after {border-bottom: 1px solid #080808;border-right: 1px solid #080808;}/* 送信ボタン */.wpcf7 .template03 .submit-btn {overflow: hidden;position: relative;width: 320px;height: 65px;max-width: 100%;margin: 0;padding: 0;margin-left: auto;margin-right: auto;}.wpcf7 .template03 input[type="submit"] {cursor: pointer;position: relative;width: 320px;height: 65px;max-width: 100%;padding: 18px;border-radius: 0;box-shadow: none;border: 1px solid #000;background-color: transparent;color: #fff;font-size: 18px;text-align: center;box-sizing: border-box;transition: opacity .25s;-webkit-appearance: none;-moz-appearance: none;appearance: none;z-index: 10;}.wpcf7 .template03 input[type="submit"] ~ div.submit-bg {position: absolute;top: 0;left: 0;margin: 0;padding: 0;width: 200%;height: 65px;background-color: #fff;background-image: linear-gradient(90deg, #333, #333);background-position: 100% 0;background-size: 50% 100%;background-repeat: no-repeat;box-sizing: border-box;transform: translateX(-50%);transition: transform .25s;z-index: 1;}.wpcf7 .template03 input[type="submit"]:hover {color: #333;}.wpcf7 .template03 input[type="submit"]:hover ~ div.submit-bg {transform: translateX(-4px);transition: transform .25s;}.wpcf7 .template03 input[type="submit"]:focus {outline: 0;}.wpcf7 .template03 input[type="submit"]:disabled {cursor: not-allowed;box-shadow: none!important;border: 1px solid #f8f8f8!important;background-color: #f8f8f8!important;color: #999!important;}.wpcf7 .template03 span.wpcf7-list-item {margin: 0 1em .2em 0;}.wpcf7 .template03 .ajax-loader {display: block;}@keyframes border-circle {0% {width: 0;height: 0;transform: translate(.5em, .5em);}100% {width: 1em;height: 1em;transform: translate(0, 0);}}@media only screen and (max-width: 768px) {.wpcf7 .template03 span.wpcf7-list-item {display: block;}.wpcf7 .template03 div.form__row {display: block;}.wpcf7 .template03 p.form__label {width: 100%;padding: 1.5em 1em 0;}.wpcf7 .template03 p.form__body {width: 100%;padding: 1em 1em 1.5em;}}
テンプレート[4] ゲストブック風
ゲストブック(芳名帳)のような、ノートのようなデザインのフォームです。
サンプル画像

デモページ
このページについて 当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[4]のデモページ[…]
テンプレート[4]を使う準備
先程コピペした共通のHTMLコードの一番上の行を次のように変更します。
1 |
<div class="form__wrap template04"> |
テンプレート[4] のCSSコード
次のCSSをスタイルシートにコピペします。
- コードをみる
-
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405/* template04 */.form__wrap {width: 100%;max-width: 900px;/*フォームの最大幅*/margin-right: auto;margin-left: auto;}.wpcf7 .template04 {display: flex;flex-wrap: wrap;justify-content: space-between;color: #252525;font-size: 14px;}.wpcf7 .template04 a {margin: 0;padding: 0;text-decoration: underline;color: inherit;transition: opacity .25s;}.wpcf7 .template04 a:hover {opacity: .5;transition: opacity .25s;}.wpcf7 .template04 div.form__row {position: relative;margin: 0;padding: 0;margin-top: 2em;}.wpcf7 .template04 div.form__row.row-name,.wpcf7 .template04 div.form__row.row-email,.wpcf7 .template04 div.form__row.row-tel,.wpcf7 .template04 div.form__row.row-url {width: calc(50% - 10px);}.wpcf7 .template04 div.form__row.row-message {width: 100%;}.wpcf7 .template04 div.form__row.row-checkbox,.wpcf7 .template04 div.form__row.row-radio,.wpcf7 .template04 div.form__row.row-select {display: flex;align-items: center;width: 100%;}.wpcf7 .template04 div.form__row.row-select {width: 100%;}.wpcf7 .template04 div.form__row.row-privacy {width: 100%;margin-top: 3.5em;text-align: center;}.wpcf7 .template04 div.form__row.row-submit {width: 100%;margin-top: 3em;text-align: center;}.wpcf7 .template04 p.form__label {flex-shrink: 0;min-width: 146px;margin: 0 0 .3em 0;padding: 0;box-sizing: border-box;}.wpcf7 .template04 p.form__body {width: 100%;margin: 0;padding: 0;box-sizing: border-box;}.wpcf7 .template04 div.form__row.row-checkbox p.form__body,.wpcf7 .template04 div.form__row.row-radio p.form__body,.wpcf7 .template04 div.form__row.row-select p.form__body {margin: 0 0 .3em 2em;}.wpcf7 .template04 p.form__label label {position: relative;margin: 0;padding: 0;color: #2a7e72;font-size: .95em;box-sizing: border-box;}.wpcf7 .template04 p.form__label.is-required label {margin-right: 1em;}.wpcf7 .template04 p.form__label.is-required label::after {content: "*";display: block;position: absolute;top: -.3em;right: -.5em;color: #b74c4c;box-sizing: border-box;}/* テキストフィールド */.wpcf7 .template04 input[type=text],.wpcf7 .template04 input[type=tel],.wpcf7 .template04 input[type=email],.wpcf7 .template04 input[type=url],.wpcf7 .template04 input[type=date],.wpcf7 .template04 input[type=number] {width: 100%;margin: 0;padding: .2em 0;border: 0;border-bottom: 1px solid #ababab;border-radius: 0;box-shadow: none;background-color: transparent;color: inherit;font-family: inherit;font-weight: inherit;font-size: inherit;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.wpcf7 .template04 textarea {width: 100%;height: 60px;margin: 0;padding: .2em 0;border: 0;border-bottom: 1px solid #ababab;border-radius: 0;box-shadow: none;background-color: transparent;color: inherit;font-family: inherit;font-weight: inherit;font-size: inherit;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;appearance: none;}/* テキストフィールド placeholder */.wpcf7 .template04 input[type=text]::placeholder,.wpcf7 .template04 input[type=tel]::placeholder,.wpcf7 .template04 input[type=email]::placeholder,.wpcf7 .template04 input[type=url]::placeholder,.wpcf7 .template04 input[type=date]::placeholder,.wpcf7 .template04 input[type=number]::placeholder,.wpcf7 .template04 textarea::placeholder {opacity: 0;display: none;}.wpcf7 .template04 input[type=text]:-ms-input-placeholder,.wpcf7 .template04 input[type=tel]:-ms-input-placeholder,.wpcf7 .template04 input[type=email]:-ms-input-placeholder,.wpcf7 .template04 input[type=url]:-ms-input-placeholder,.wpcf7 .template04 input[type=date]:-ms-input-placeholder,.wpcf7 .template04 input[type=number]:-ms-input-placeholder,.wpcf7 .template04 textarea:-ms-input-placeholder {opacity: 0;display: none;}.wpcf7 .template04 input[type=text]::-ms-input-placeholder,.wpcf7 .template04 input[type=tel]::-ms-input-placeholder,.wpcf7 .template04 input[type=email]::-ms-input-placeholder,.wpcf7 .template04 input[type=url]::-ms-input-placeholder,.wpcf7 .template04 input[type=date]::-ms-input-placeholder,.wpcf7 .template04 input[type=number]::-ms-input-placeholder,.wpcf7 .template04 textarea::-ms-input-placeholder {opacity: 0;display: none;}/* テキストフィールド フォーカス時 */.wpcf7 .template04 input[type=text]:focus,.wpcf7 .template04 input[type=tel]:focus,.wpcf7 .template04 input[type=email]:focus,.wpcf7 .template04 input[type=url]:focus,.wpcf7 .template04 input[type=date]:focus,.wpcf7 .template04 input[type=number]:focus,.wpcf7 .template04 textarea:focus {outline: 1px solid transparent;}/* チェックボックス */.wpcf7 .template04 input[type=checkbox] {display: none;}.wpcf7 .template04 input[type=checkbox] + span {cursor: pointer;position: relative;margin: 0;padding: 0 1em 0 1.8em;font-size: inherit;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template04 input[type=checkbox] + span::before {content: "";opacity: 1;display: block;position: absolute;top: 0;left: 0;width: 1.24em;height: 1.24em;border: 1px solid #ababab;border-radius: 0;background-color: transparent;box-sizing: border-box;transition: opacity .25s ease;z-index: 1;}.wpcf7 .template04 input[type=checkbox] + span::after {content: "";opacity: 0;display: block;position: absolute;top: 0.13em;left: 0.5em;width: 0.3em;height: .85em;border-bottom: 1px solid #252525;border-right: 1px solid #252525;box-sizing: border-box;transform: rotate(40deg);transition: opacity .25s ease;z-index: 10;}.wpcf7 .template04 input[type=checkbox]:checked + span {color: inherit;transition: all .25s ease;}.wpcf7 .template04 input[type=checkbox]:checked + span::before {opacity: 1;transition: opacity .25s ease;}.wpcf7 .template04 input[type=checkbox]:checked + span::after {opacity: 1;transition: opacity .25s ease;}/* ラジオボタン */.wpcf7 .template04 input[type=radio] {display: none;}.wpcf7 .template04 input[type=radio] + span {cursor: pointer;position: relative;margin: 0;padding: 0 1em 0 1.8em;font-size: inherit;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template04 input[type=radio] + span::before {content: "";display: block;position: absolute;top: 0;left: 0;width: 1em;height: 1em;border: 1px solid #ababab;border-radius: 50%;background-color: transparent;box-sizing: border-box;transition: opacity .25s ease;}.wpcf7 .template04 input[type=radio] + span::after {content: "";opacity: 0;display: block;position: absolute;top: -0.1em;left: 0.5em;width: 0.3em;height: .85em;border-bottom: 1px solid #252525;border-right: 1px solid #252525;box-sizing: border-box;transform: rotate(40deg);transition: opacity .25s ease;z-index: 10;}.wpcf7 .template04 input[type=radio]:checked + span {color: inherit;transition: opacity .25s ease;}.wpcf7 .template04 input[type=radio]:checked + span::after {opacity: 1;transition: opacity .25s ease;}/* セレクト */.wpcf7 .template04 span.select-wrap {position: relative;width: 100%;margin: 0;padding: 0;}.wpcf7 .template04 select {cursor: pointer;width: 100%;max-width: 100%;margin: 0;padding: .5em 2.5em .5em 1em;border: 0;border-bottom: 1px solid #ababab;border-radius: 0;box-shadow: none;background-color: transparent;color: inherit;font-size: inherit;line-height: 1;box-sizing: border-box;transition: border-color 0.2s ease, outline 0.2s ease;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.wpcf7 .template04 select::-ms-expand {display: none;}.wpcf7 .template04 span.select-wrap::after {content: "";pointer-events: none;position: absolute;display: block;width: .6em;height: .6em;top: 50%;right: 1em;margin-top: -3px;border-bottom: 1px solid #ababab;border-right: 1px solid #ababab;transform: rotate(45deg) translateY(-50%);transform-origin: 50% 0;box-sizing: border-box;}.wpcf7 .template04 select:focus {outline: 0;}/* 送信ボタン */.wpcf7 .template04 .submit-btn {position: relative;width: 320px;height: 65px;max-width: 100%;margin: 0;padding: 0;margin-left: auto;margin-right: auto;}.wpcf7 .template04 input[type="submit"] {cursor: pointer;width: 320px;max-width: 100%;padding: 18px;border-radius: 0;box-shadow: none;border: 1px #10554b solid;background-color: #2a7e72;color: #fff;font-size: 18px;text-align: center;box-sizing: border-box;transition: opacity .25s;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.wpcf7 .template04 input[type="submit"]:disabled {cursor: not-allowed;box-shadow: none!important;border: 1px solid #f8f8f8!important;background-color: #f8f8f8!important;color: #999!important;}.wpcf7 .template04 input[type="submit"]:hover {background-color: #fff;color: #10554b;transition: opacity .25s, background-color .25s;}.wpcf7 .template04 input[type="submit"]:focus {outline: 1px #eee solid;border: 1px #080808 solid;}.wpcf7 .template04 span.wpcf7-list-item {margin: 0 1em .2em 0;}.wpcf7 .template04 div.wpcf7 .ajax-loader {display: block;}@media only screen and (max-width: 768px) {.wpcf7 .template04 div.form__row.row-checkbox,.wpcf7 .template04 div.form__row.row-radio,.wpcf7 .template04 div.form__row.row-select {display: block;}.wpcf7 .template04 div.form__row.row-checkbox p.form__body,.wpcf7 .template04 div.form__row.row-radio p.form__body,.wpcf7 .template04 div.form__row.row-select p.form__body {margin-left: 0;}.wpcf7 .template04 span.wpcf7-list-item {display: block;}}
さいごに
2021.03023追記
多くの方にこちらのテンプレートをご利用いただき、大変嬉しく思っています!
ご活用いただきどうもありがとうございます。
残念なことに、こちらのページからのスパムコメントがとても多い為コメント蘭を非表示とさせていただきました。また、個別の質問には対応することができないことを深くお詫び申し上げます。
「必須」の文字を表示させたいときは
フォームタグに*をつけるだけでは「必須」文字は表示されません。
下記のコード例のように、ラベル箇所のpタグに”is-required“のクラスが付いているかをご確認ください。
1 2 |
<p class="form__label is-required"><label for="your-name">お名前</label></p> <p class="form__body">[text* your-name id:your-name placeholder "お名前"]</p> |