- Contact Form7のお問い合わせフォームをおしゃれにしたい！
- コピペでプロ級のお問い合わせフォームを作りたい！
Contact Form7（コンタクトフォーム7）は、WordPressでお問い合わせフォームが作れる人気のプラグインですが、初期設定だとシンプルで味気ないですよね。
そこで今回は、コピペするだけで、おしゃれでプロっぽいデザインにカスタマイズできるように、コードをそのまま公開しています。
ご自由にお使いください。
今回使っているテーマは、「AFFINGER」です。テーマによっては使えなかったり、デザインが崩れたりする可能性もありますので、ご了承ください。
お問い合わせフォームの基本的な使い方が知りたい方は、さきに「【初級編】WordPressでお問い合わせフォームをつくる！Contact Form7の使い方を画像付きで解説」の記事をご確認ください。
それでは、本編をどうぞ！
Contact Form7のデザインサンプル
今回は、Contact Form7のデザインサンプルを2つ用意しました。
どちらもコピペだけでカスタマイズできます。
デザインサンプル１
まず1つ目のサンプルは、次の画像の通りです。これはインターネットビジネスラボでも使っているお問い合わせフォームです。
各見出しの前に、枠をつけて「必須」「任意」の文字をいれて目立たせています。
インターネットビジネスラボは、お問い合わせ内容、お名前、メールアドレス、お問い合わせ内容の4項目に絞っていますが、電話番号や住所なども同様に増やしていけます。
このサンプルの作り方は、次の章で解説します。
デザインサンプル２
2つ目のサンプルは、表形式のデザインで次の画像のとおりです。
こちらも「必須」「任意」のボタンを付けていますが無しにすることもできます。
また、お名前やメールアドレスなどを中央に寄せていますが、左に寄せることもできます。
Contact Form7のデザインを変える方法
Contact Form7のデザインを変えるには、Contact Form7のフォームのデザインを変えるには、「Contact Form7のフォーム」と「CSS」の2つを編集する必要があります。
Contact Form7のフォーム
次の画面の赤枠のように、Contact Form7の編集を行う領域が「フォーム」です。
初期状態だと、上記のようなシンプルな画面ですが、デザインを変更すると以下のように複雑になります。
コピペして設定するだけなので、コードの意味を理解しなくても大丈夫だよ！
CSS
CSSとは、サイトのデザインを設定するためのプログラムです。
WordPressでCSSを編集する方法はいくつかありますが、もっとも簡単なのがWordPress管理画面の「外観」→「カスタマイズ」から編集できる「追加CSS」の項目を編集することです。
WordPressテーマによっては、「追加CSS」という名称ではないかもしれません。しかし、「カスタマイズ」画面にCSSを編集できるメニューはほとんどのテーマであるはずです。（私は20近いテーマを使ってきましたが、CSSが設定できないテーマを見たことがありません。）
CSSを編集することで、カラー、サイズ、配置などが編集できます。
こちらもコードの意味を覚えると大変なので、Contact Form7をキレイにしたいだけなら、何も考えずコピペでOKです。
【コピペOK】お問い合わせフォームとCSSコード
Contact Form7とCSSのコードを載せておきますので、コピペでそのままお使いください。
デザインサンプル１のコード
デザインサンプル1は、Contact Form7のコードだけで実現できます。
ただし、「AFFINGER」のテーマを使わないとサンプル１は使えません。AFFINGER以外の方はサンプル２を使うといいでしょう。
CSSをいじる必要が無いので、超簡単に実装できますよ。
Contact Form7のコードは次の通りです。右上のボタンをクリックするとコピーできるので、そのままContact Form7のフォームに貼り付けてください。
<pre><p><span class="st-marumozi" style="background:#FFB74D;color:#fff;border-radius: 30px;margin: 0 10px 10px 0;font-size:100%;padding:1px 10px;">必須</span><strong>お問い合わせ内容</strong>
[radio inquiry use_label_element "掲載内容について" "取材" "そのほか"]
<p><span class="st-marumozi" style="background:#FFB74D;color:#fff;border-radius: 30px;margin: 0 10px 10px 0;font-size:100%;padding:1px 10px;">必須</span><strong>お名前</strong>
[text* your-name akismet:author placeholder "例：佐藤 次郎"]</p>
<p><span class="st-marumozi" style="background:#FFB74D;color:#fff;border-radius: 30px;margin: 0 10px 10px 0;font-size:100%;padding:1px 10px;">必須</span><strong>メールアドレス</strong>
[email* your-email akismet:author_email] </p>
<p><span class="st-marumozi" style="background:#FFB74D;color:#fff;border-radius: 30px;margin: 0 10px 10px 0;font-size:100%;padding:1px 10px;">必須</span><strong>お問い合わせ内容詳細、ご質問、そのほか</strong>
[textarea* your-message x8 akismet:message placeholder "例：掲載内容について、お聞きしたいことがあります。"] </p>
※確認画面は表示されませんので、内容を確認し送信してください。
※送信に数秒かかる場合があります。画面が切り替わるまでお待ちください。
<p>[submit "内容を確認して送信"]</p></pre>デザインサンプル２のコード
デザインサンプル２は、Contact Form7のコードとCSSを追加する必要があります。
それぞれコピペして使ってください。
ContactForm7のコード
<pre><table class="table table-bordered table-striped table-contactform7">
<tr>
<th><span class="required-contactform7">必須</span><span class="title-contactform7">お名前</span></th>
<td>[text* your-name class:form-width placeholder"山田 太郎"] </td>
</tr>
<tr>
<th><span class="required-contactform7">必須</span><span class="title-contactform7">メールアドレス</span></th>
<td>[email* your-email class:form-width placeholder"xxx@gmail.com"]</td>
</tr>
<tr>
<th><span class="unrequired-contactform7">任意</span><span class="title-contactform7">お問い合わせ内容</span></th>
<td>[textarea your-message class:content placeholder "１行以上のテキスト入力欄"]</td>
</tr>
</table>
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。
[submit id:formbtn "上記の内容で送信する"]
</pre>追加CSSコード
<pre>/***** コンタクトフォーム *****/
.table-contactform7{
overflow: hidden;
table-layout: fixed;
font-size:12px;
}
.required-contactform7{
font-size:10px;
padding:5px;
background:#ff9393;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
.unrequired-contactform7{
font-size:10px;
padding:5px;
background:#93c9ff;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
.table-contactform7 th{
font-weight:bold;
padding-right:5px;
}
.table-contactform7 input,
.table-contactform7 textarea{
max-width: 90% !important;
margin: 5px 10px 10px 5px;
}
.address-100 input{
max-width: 90% !important;
margin: 5px 10px 10px 5px;
}
.message-100 textarea{
width: 100%;
margin: 5px 10px 10px 5px;
}
@media screen and (min-width: 900px){
.table-contactform7 th{
width:28%;
}
}
@media screen and (max-width: 900px){
.table-contactform7{
display:block;
}
.table-contactform7 tbody,
.table-contactform7 tr{
display: block;
width: 100%;
}
.table-contactform7 th{
width:100%;
display:block;
margin: 0 auto;
border:none;
}
.table-contactform7 td{
display: list-item;
list-style-type:none;
margin:0;
padding:5;
width: 100%;
border-top: none !important;
}
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
display: block;
padding:1em 0;
margin-top:30px;
width:100%;
background:#000;
color:#fff;
font-size:18px;
font-weight:bold;
border-radius:2px;
border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
background:#fff;
color:#ffaa56;
}
</pre>ボタンのカラーを編集する方法
デザインは基本的にそのまま使えばいいと思いますが、「必須」「任意」のマークだったり、ボタンのカラーを変更したい人もいるでしょう。
カラーの変更は簡単にできるので、手順を解説します。
手順1. カラーコードを調べる
まずは変更したい色のHTMLカラーコードを調べるので「原色大辞典」にアクセスしてください。
次のようなサンプルカラーが出てくるので、好きなカラーを見つけます。
好きなカラーが見つかったら、カラー名の下にある「#」から始まる数字をコピーします。
次の例だと、#008080 がそれにあたります。
サンプルカラーの中に欲しいカラーがなかったら、「HTML Color Codes」というサイトでも調べられますよ。
手順2. カラーコードを貼り付ける
HTMLカラーコードをコピーしたら、Contact Form7か追加CSSのコードの該当箇所を書き換えます。
デザインサンプル１の場合
デザインサンプル１の場合は、
Contact Form7コードの「style=”background:#FFB74D;」の赤字部分を書き換えます。
先ほどのカラーを例に出すと、「style=”background:#008080;」と書き換えます。
デザインサンプル２の場合
デザインサンプル２の場合、CSSの「background:#ff9393」の赤字部分を書き換えます。
注意点として、「.required-contactform7{」ではじまるコードは「必須」の、「.unrequired-contactform7{」ではじめるコードは「任意」に関わるコードです。
そのため、「必須」のカラーを換えたい場合は、「.required-contactform7{」の中にある「background:#ff9393」を、「任意」の場合は「.unrequired-contactform7{」の中にある「background:#ff9393」を書き換えてください。
送信ボタンのデザインを変更したい場合は、「/*送信ボタンのデザイン変更*/」の「background:#000;」の赤字部分を書き換えます。
まとめ
今回は、Contact Form7（コンタクトフォーム7）のデザインのカスタマイズ方法について解説してきました。
お問い合わせフォームのデザインを少し変えるだけで、サイトのクオリティは高く見えます。
コピペするだけで使えるので、是非使ってみてくださいね。