ContactForm7でお問合せ・予約・アンケートに使えるCSSデザインカスタマイズ【初心者向け】

2019年6月12日ContactForm7でおしゃれ&多機能カスタマイズ

フォームは見やすさ&わかりやすさが大切です。

どこに何を入力するのかがわかりにくいと、ユーザーが面倒な入力をせずにページを離れてしまいます。

見やすくわかりやすい基本を守りつつ、オシャレなフォームを作りましょう!

前回に紹介したコードで作ったContactForm7のフォームに、今回のCSSを適用させれば簡単にフォームが作れます。

今回のデザインカスタマイズのためのHTMLコードを紹介した記事

カスタマイズも簡単にできるようになっているので、オリジナルなフォームを作っていきましょう!

さやっと。では、紹介してるコピペCSSコードでどの{}内のCSSを書き換えればどこのデザインが変えられるかを解説しています。

変えたい部分の{}内のコードで赤色になっている部分(CSSプロパティ)をググると、解説記事が出ます。

CSSの知識がなくても、変えたい部分のプロパティを一つ一つ調べればカスタマイズ方法がわかります。

どのように書けばどんなデザインになるのかわかるので、コピペした元のコードも参考にしながらすぐ変えられる!

CSS プロパティ名で検索すると解説記事が見つかります。

CSS background

CSSカスタマイズの詳細はコチラ

フォームのデザイン

ContactForm7でカスタマイズをするなら自動整形を無効に

CSSカスタマイズを始める前に、ContactForm7で自動整形を無効にしましょう。

エディタで文を入力するとHTMLで段落や改行を出力してくれる便利なWordPressの自動整形機能ですが、自分でHTMLを書く場合は邪魔になります。

方法はこちらの記事を参照

dt/dd(定義リスト)を使ったフォームのCSSカスタマイズ

/**/
/*コンタクトフォームサンプル①*/
/**/

/* labelで囲まれた部分をすべて全幅に */
.wpcf7-form label{
width:100%;
}
/* 送信ボタン */
.wpcf7-form [type=submit]{
background-color:#ad8c5e;
color:#fff;
font-size:16px;
font-weight:bold;
width:100px;
margin-top:1em;
box-shadow:1px 1px 3px rgba(0,0,0,0.3);
border:1px solid #ad8c5e;
border-radius:0px;
}
/* 送信ボタン(ホバー) */
.wpcf7-form [type=submit]:hover{
background-color:#e5d7c7;
color:#ad8c5e;
}
/* */
/* コンタクトフォームサンプル① */
/* */

/* タイトル */
.contactform7 dt{
background-color: #ad8c5e;
color: #fff;
font-size: 18px;
font-weight:bold;
line-height:1.3em;
width: 100%;
padding: 0.4em;
margin:1.7em 0 1em;
border:none;
border-radius: 25px 0px 0px 25px;
}
/* タイトルにつけるマーク */
.contactform7 dt:before{
content: '●';
color: white;
}
/* 中身の左側スペースをタイトルに合わせる */
.contactform7 dd{
margin-left:22px;
border:none;
}
/* 必須マーク */
span.must{
display:inline-block;
background-color:#ff0055;
color:#fff;
font-size:14px;
line-height:1.7em;
padding:0 10px;
margin-left:5px;
border-radius:25px;
}
/* 自由回答マーク */
span.free{
display:inline-block;
background-color:#e5d7c7;
color:#fff;
font-size:14px;
line-height:1.7em;
border:2px solid;
padding:0 10px;
margin-left:5px;
border-radius:25px;
}
/* フォームラベル(項目名) */
.contactform7 label{
font-weight:bold;
width:100%;
margin-top:1em;
}
/* 半分幅のフォームラベル */
label.half{
display:inline-block;
width:calc(50% - 5px);
margin-right:5px;
margin-top:0.5em;
}
/* 四角い入力欄 */
.input-box,.input-box-mini{
border:1px solid #e5d7c7;
width:100%;
height:2.4em;
padding-left:0.5em;
}
/* テキストエリア */
textarea.input-box{
height:unset;
}
/* 2つのフォームを一列に並べる */
p.form-line{
margin:0.5em 0 0;
}
/* ラベルなしのフォームにつける項目名 */
p.form-title{
font-weight:bold;
border-bottom:1px solid #e5d7c7;
margin:1em 0 0.5em;
}
/* 説明文 */
p.explain{
margin-bottom:0;
}
/* ファイル送信の文字 */
input.contact-file{
font-weight:bold;
color:#ff6798;
line-height:1em;
margin-bottom:0.2em;
}
/* 承諾確認チェックのラベル */
.deal label{
font-size:18px;
}
/* ラジオボタンやチェックボックスの選択肢項目 */
span.wpcf7-list-item {
margin:0 2em 0 0em;
}
.wpcf7-list-item label{
margin-top:0;
}
/* □歳とつける入力項目 */
#age{
display:inline-block;
width:10em;
margin-right:0.5em;
}
/* 選択肢のその他の入力欄 */
span.has-free-text label{
display:inline-block;
width:unset;
}
input[type=text].wpcf7-free-text {
display:inline-block;
width:unset;
border:1px solid #e6d7c7;
background-color:#fff;
border-radius:0;
box-shadow:none;
height:1.8em;
}
/* 利用規約を入れたボックス */
.scroll-wrap-con#term{
display: block;
background-color: #e5d7c7;
height: 250px;
width: calc(100% + 2em);
margin:2em 0 1em -2em;
overflow-y: scroll;
border-radius: 25px;
}
/* 利用規約のスクロール部分 */
.scroll {
display: block;
background-color: #fff;
padding: 1em 1em 1em 2em;
margin: 2em 1em;
}
/* 送信ボタン */
.wpcf7-form [type=submit] {
background-color: #ad8c5e;
color: #fff;
width: 100%;
margin:1em 0;
}
/* ContactForm7のメッセージ */
div.wpcf7-response-output {
background-color:#ff6798;
color:#fff;
font-weight:bold;
text-align:center;
width:100%;
margin: 2em 0.5em 1em;
padding: 1em;
}
/* 送信完了メッセージ */
div.wpcf7-mail-sent-ok {
border: none;
}
/* スマホでの表示 */
@media screen and (max-width:575px){
/* 半分幅のフォームを全幅に */
label.half{
width:100%;
margin-right:0;
}
}

dt(タイトル)は左側だけborder-radius(角)を丸くし、マークを入れています。マークは文字で入力できるものならなんでも使えます。

文字の代わりにFont Awesomeも使えます。

文字のスタート位置を揃えてデザインがスッキリするように、中身の左側にスペースを入れています。

両側の角を丸くする・なくして左右均等にする場合は、中身の右側にも左側と同じスペースを入れるとバランスが取れます。

それぞれのフォーム項目のデザイン

テキストやドロップダウン、日付や数値などの四角い入力項目にラベル(項目名)がついているフォーム項目では、クラス.input-boxをつけて、デザインと高さを統一しています。

テキストエリアでは高さが必要なので、高さのCSSを無効にします。

ラジオボタンやチェックボックスでは項目名にp.form-titleを使って、下にラインを入れることで四角いボックスの入力項目とデザインを合わせています。

名前の項目では、名字と名前を横に並べるためにlabelにクラス.halfをつけてラベルの幅を半分にし、p.form-lineで囲んでmargin-top(ラベルの上のスペース)を他よりも小さくしています。

説明文では通常の段落のようにスペースを取ると不自然なので、margin-bottom(文の下のスペース)を無くしています。

ファイル送信の文字は見やすいように太くして色を変え、位置を調整しています。

承諾確認のラベルは見やすくするために文字を大きくしています。

labelのCSSはラジオボタンやチェックボックスの選択肢一つ一つにも適用てmarginなどが大きすぎてしまうので、見やすく選択しやすいスペースになるように調整しています。

利用規約を入れたボックスで見える幅を決め、中身のはみ出た部分をスクロールさせています。

ボックスで囲まれたフォームのCSSカスタマイズ

/* */
/* */
/* コンタクトフォームサンプル② */
/* */
/* */
/* フォームを囲むボックス */
div.contact-box{
background-color:#e5d7c7;
padding:3%;
margin:1.7em 0;
border-radius:25px;
}
/* ボックスのタイトル */
p.contact-box-title{
font-size:18px;
font-weight:bold;
color:#ad8c5e;
margin-bottom:0;
}
/* 必須マーク */
span.must{
background-color:#ff0055;
color:#fff;
padding:0 10px;
margin-left:5px;
border-radius:25px;
font-size:14px;
line-height:1.7em;
}
/* 自由回答マーク */
span.free{
background-color:#e5d7c7;
color:#fff;
border:2px solid;
padding:0 10px;
margin-left:5px;
border-radius:25px;
font-size:14px;
line-height:1.7em;
}
/* ボックスの中のラベル */
.contact-box label{
display:block;
font-size:16px;
font-weight:bold;
width:100%;
margin-top:1em;
}
/* 半分幅のラベル */
label.half{
display:inline-block;
width:calc(50% - 5px);
margin-right:5px;
margin-top:0.5em;
}
/* 四角い入力欄 */
.input-box,.input-box-mini{
display:block;
width:100%;
padding-left:0.5em;
box-shadow:1px 1px 3px inset #ad8c5e;
height:2.5em;
border-radius:5px;
border:1px solid #e5d7c7;
}
/* テキストエリア */
textarea.input-box{
height:unset;
}
/* 2つのフォームを一列に並べる */
p.form-line{
margin:0.5em 0 0;
}
/* ラベルなしのフォームにつける項目名 */
p.form-title{
font-weight:bold;
border-bottom:6px dotted #fff;
padding-bottom:0.2em;
margin:1em 0 0.7em;
}
/* ファイル送信の文字 */
input.contact-file{
font-weight:bold;
color:#ff6798;
line-height:1em;
margin-bottom:0.2em;
}
/* 承諾確認チェックのラベル */
.deal label{
font-size:18px;
}
/* ラジオボタンやチェックボックスの選択肢項目 */
span.wpcf7-list-item {
margin:0 2em 0 0em;
}
.wpcf7-list-item label{
margin-top:0;
}
/* 説明文 */
p.explain{
margin-bottom:0;
}
/* □歳とつける項目 */
#age{
display:inline-block;
width:10em;
margin-right:0.5em;
}
/* 選択肢のその他の入力欄 */
span.has-free-text label{
display:inline-block;
width:unset;
}
input[type=text].wpcf7-free-text {
display:inline-block;
background-color:#fff;
width:unset;
height:1.8em !important;
padding-left:0.5em;
box-shadow:1px 1px 3px inset #ad8c5e;
border-radius:5px;
border:1px solid #e5d7c7;
}
/* 利用規約を入れたボックス */
.scroll-wrap-con#term{
display: block;
height: 250px;
width:100%;
margin:1em 0;
overflow-y: scroll;
border-radius:0;
}
/* 利用規約のスクロール部分 */
.scroll{
display: block;
background-color: #fff;
padding: 1em 1em 1em 2em;
margin: 0;
}
/* 送信ボタン */
.wpcf7-form [type=submit] {
background-color: #ad8c5e;
color: #fff;
font-size:18px;
width: 100%;
margin:1em 0;
}
/* ContactForm7のメッセージ */
div.wpcf7-mail-sent-ok {
border: none;
}
/* 送信完了メッセージ */
div.wpcf7-response-output {
background-color:#ff6798;
color:#fff;
font-weight:bold;
text-align:center;
width:100%;
margin: 2em 0.5em 1em;
padding: 1em;
}
/* スマホでの表示 */
@media screen and (max-width:575px){
/* 半分のフォームを全幅に */
label.half{
width:100%;
margin-right:0;
}
}

/* */
/* */
/* ラジオボタン */
/* */
/* */
input[type=radio] {
-webkit-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #fff;
border: 2px solid #e4e4e4;
width: 25px;
height: 25px;
vertical-align: middle;
margin-right: .5em;
margin-bottom: 5px;
border-radius: 25px;
}
input[type=radio]:checked::before {
content: "";
position: absolute;
left: 0;
top: 0;
background-color: #ff6798;
border: 2px solid #fff;
width: 20px;
height: 20px;
border-radius: 25px;
}

入力する内容ごとにまとめてボックスで囲んで、マットなボックスに入力項目にinset(内側)の影を入れることで埋め込まれているようなデザインになっています。

ボックスは好きなデザインに変えられます。その場合、ボックスに合わせて四角い入力項目のデザインを変えたほうが良いでしょう。

それぞれのフォーム項目のデザイン

ここからファームサンプル①と同じなので読んだ方はスキップ

テキストやドロップダウン、日付や数値などの四角い入力項目にラベル(項目名)がついているフォーム項目では、クラス.input-boxをつけて、デザインと高さを統一しています。

テキストエリアでは高さが必要なので、高さのCSSを無効にします。

ラジオボタンやチェックボックスでは項目名にp.form-titleを使って、下にラインを入れることで四角いボックスの入力項目とデザインを合わせています。

名前の項目では、名字と名前を横に並べるためにlabelにクラス.halfをつけてラベルの幅を半分にし、p.form-lineで囲んでmargin-top(ラベルの上のスペース)を他よりも小さくしています。

説明文では通常の段落のようにスペースを取ると不自然なので、margin-bottom(文の下のスペース)を無くしています。

ファイル送信の文字は見やすいように太くして色を変え、位置を調整しています。

承諾確認のラベルは見やすくするために文字を大きくしています。

labelのCSSはラジオボタンやチェックボックスの選択肢一つ一つにも適用てmarginなどが大きすぎてしまうので、見やすく選択しやすいスペースになるように調整しています。

利用規約を入れたボックスで見える幅を決め、中身のはみ出た部分をスクロールさせています。

ラジオボタン・チェックボックスのカスタマイズ

/* */
/* */
/* ラジオボタン */
/* */
/* */
input[type=radio] {
-webkit-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #fff;
border: 2px solid #e4e4e4;
width: 25px;
height: 25px;
vertical-align: middle;
margin-right: .5em;
margin-bottom: 5px;
border-radius: 25px;
}
input[type=radio]:checked::before {
content: "";
position: absolute;
left: 0;
top: 0;
background-color: #ff6798;
border: 2px solid #fff;
width: 20px;
height: 20px;
border-radius: 25px;
}

ラジオボタンを大きくして見やすくし、ふちのあるフラットなデザインにしています。

:beforeを使って、ラジオボタンが選択されたら、一回り小さい色付きの●が付くようにしています。

/* */
/* */
/* チェックボックス */
/* */
/* */
input[type=checkbox] {
-webkit-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #fff;
border: 2px solid #e4e4e4;
width: 25px;
height: 25px;
vertical-align: middle;
margin-right: .5em;
margin-top: 0;
margin-bottom: 5px;
}
input[type=checkbox]:checked::before {
content: "";
position: absolute;
left: 0;
top: 0;
background-image: url(https://saya-to.com/wp-content/uploads/2019/06/0df0d688e8223d9a4f4cffc276c01f76.png);
background-size: 80%;
background-repeat: no-repeat;
width: 25px;
height: 25px;
}

チェックボックスを大きくして見やすくし、ふちのあるフラットなデザインにしています。

:beforeを使ってチェックされたときに中にチェックマークの画像が表示されるようにしています。

チェック

画像はメディアに追加し、画像のURLをbackground-image:url(ここ)にコピペしてください。

べつの画像を使いたいときは、フリー素材でチェックの画像を探してみましょう。

これでオリジナルのフォームが完成!

フォームがあるとユーザーからの信頼度も上がります。

お問合せだけでなく様々な用途に使えるので、覚えておくとサイト機能の幅が広がりますね!

ログインユーザーの情報を自動入力させる方法や、ページからフォームへ情報を渡す方法や、選択によって表示するフォーム項目を変える方法も紹介していきます。