【コピペOK】Contact Form7のデザイン!プロ級のフォームが5分で作れる

こんな方に読んで欲しい!

  • Contact Form7のお問い合わせフォームをおしゃれにしたい!
  • コピペでプロ級のお問い合わせフォームを作りたい!

Contact Form7(コンタクトフォーム7)は、WordPressでお問い合わせフォームが作れる人気のプラグインですが、初期設定だとシンプルで味気ないですよね。

そこで今回は、コピペするだけで、おしゃれでプロっぽいデザインにカスタマイズできるように、コードをそのまま公開しています。

ご自由にお使いください。

今回使っているテーマは、「AFFINGER」です。テーマによっては使えなかったり、デザインが崩れたりする可能性もありますので、ご了承ください。

お問い合わせフォームの基本的な使い方が知りたい方は、さきに「【初級編】WordPressでお問い合わせフォームをつくる!Contact Form7の使い方を画像付きで解説」の記事をご確認ください。

それでは、本編をどうぞ!

もくじ

Contact Form7のデザインサンプル

コンタクトフォーム7 初期設定

今回は、Contact Form7のデザインサンプルを2つ用意しました。

どちらもコピペだけでカスタマイズできます。

デザインサンプル1

まず1つ目のサンプルは、次の画像の通りです。これはインターネットビジネスラボでも使っているお問い合わせフォームです。

コンタクトフォーム7 デザイン1

各見出しの前に、枠をつけて「必須」「任意」の文字をいれて目立たせています。

インターネットビジネスラボは、お問い合わせ内容、お名前、メールアドレス、お問い合わせ内容の4項目に絞っていますが、電話番号や住所なども同様に増やしていけます。

このサンプルの作り方は、次の章で解説します。

デザインサンプル2

2つ目のサンプルは、表形式のデザインで次の画像のとおりです。

コンタクトフォーム7 デザイン2

こちらも「必須」「任意」のボタンを付けていますが無しにすることもできます。

また、お名前やメールアドレスなどを中央に寄せていますが、左に寄せることもできます。

Contact Form7のデザインを変える方法

Contact Form7のデザインを変えるには、Contact Form7のフォームのデザインを変えるには、「Contact Form7のフォーム」と「CSS」の2つを編集する必要があります。

Contact Form7のフォーム

次の画面の赤枠のように、Contact Form7の編集を行う領域が「フォーム」です。

コンタクトフォーム7 フォーム
Contact Form7のフォーム

初期状態だと、上記のようなシンプルな画面ですが、デザインを変更すると以下のように複雑になります。

コンタクトフォーム7 フォーム サンプル1

コピペして設定するだけなので、コードの意味を理解しなくても大丈夫だよ!

CSS

CSSとは、サイトのデザインを設定するためのプログラムです。

WordPressでCSSを編集する方法はいくつかありますが、もっとも簡単なのがWordPress管理画面の「外観」→「カスタマイズ」から編集できる「追加CSS」の項目を編集することです。

コンタクトフォーム7 CSS
追加CSS

WordPressテーマによっては、「追加CSS」という名称ではないかもしれません。しかし、「カスタマイズ」画面にCSSを編集できるメニューはほとんどのテーマであるはずです。(私は20近いテーマを使ってきましたが、CSSが設定できないテーマを見たことがありません。)

CSSを編集することで、カラー、サイズ、配置などが編集できます。

こちらもコードの意味を覚えると大変なので、Contact Form7をキレイにしたいだけなら、何も考えずコピペでOKです。

【コピペOK】お問い合わせフォームとCSSコード

Contact Form7とCSSのコードを載せておきますので、コピペでそのままお使いください。

デザインサンプル1のコード

コンタクトフォーム7 サンプル1

デザインサンプル1は、Contact Form7のコードだけで実現できます。

ただし、「AFFINGER」のテーマを使わないとサンプル1は使えません。AFFINGER以外の方はサンプル2を使うといいでしょう。

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>

デザインサンプル2のコード

コンタクトフォーム7 サンプル2

デザインサンプル2は、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 "1行以上のテキスト入力欄"]</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カラーコードを調べるので「原色大辞典」にアクセスしてください。

次のようなサンプルカラーが出てくるので、好きなカラーを見つけます。

HTMLカラーコード

好きなカラーが見つかったら、カラー名の下にある「#」から始まる数字をコピーします。

次の例だと、#008080 がそれにあたります。

HTMLカラーコード

サンプルカラーの中に欲しいカラーがなかったら、「HTML Color Codes」というサイトでも調べられますよ。

手順2. カラーコードを貼り付ける

HTMLカラーコードをコピーしたら、Contact Form7か追加CSSのコードの該当箇所を書き換えます。

デザインサンプル1の場合

デザインサンプル1の場合は、

Contact Form7コードの「style=”background:#FFB74D;」の赤字部分を書き換えます。

先ほどのカラーを例に出すと、「style=”background:#008080;」と書き換えます。

デザインサンプル2の場合

デザインサンプル2の場合、CSSの「background:#ff9393」の赤字部分を書き換えます。

注意点として、「.required-contactform7{」ではじまるコードは「必須」の、「.unrequired-contactform7{」ではじめるコードは「任意」に関わるコードです。

そのため、「必須」のカラーを換えたい場合は、「.required-contactform7{」の中にある「background:#ff9393」を、「任意」の場合は「.unrequired-contactform7{」の中にある「background:#ff9393」を書き換えてください。

送信ボタンのデザインを変更したい場合は、「/*送信ボタンのデザイン変更*/」の「background:#000;」の赤字部分を書き換えます。

まとめ

今回は、Contact Form7(コンタクトフォーム7)のデザインのカスタマイズ方法について解説してきました。

お問い合わせフォームのデザインを少し変えるだけで、サイトのクオリティは高く見えます。

コピペするだけで使えるので、是非使ってみてくださいね。

よかったらシェアしてね!
もくじ
閉じる