Contact Form 7のCSSデザインとカスタマイズ方法

更新日 2017/04/15
カテゴリー WordPressプラグイン

WordPress プラグインで常に人気上位にランクインしているのが、お問い合わせフォームが簡単に作れる「Contact Form 7」です。

でも簡単であるがゆえに、デザインやカスタマイズをせずデフォルトの状態で使っていませんか？　僕もつい先日までそうでした。

テーマをばりばりカスタマイズしているなら、コンタクトフォームもそのスタイルに合わせて作りこんでみましょう。お問い合わせがちょっぴり増えるかもしれません！

本日は、CSS によるデザインの方法と、より便利に使えるカスタマイズ方法をご紹介いたします。

Headline

ブログには必ず問い合わせフォームを設置しよう
- メールアドレスを載せるとスパムメールがたくさん
- Contact Form 7なら簡単にフォームが設置できる
Contact Form 7 の基本的な使い方
- お問い合わせページを作成する
Contact Form 7 のカスタマイズ例
まとめ

ブログには必ず問い合わせフォームを設置しよう

メールアドレス・コメント・SNS アカウントなどの連絡手段を一切載せていないブログもありますが、個人的には必ず設置したほうが良いと思います。

とくにお問い合わせフォームは必須です。なぜなら、これがあるだけで「信用性」が高まるから。

いくら個人ブログといえど、情報発信には責任が伴います。もしかすると、知らないうちに著作権を侵害しているかもしれませんし、根拠のない二次情報・三次情報をもとに間違った内容を書いているかもしれません。

もちろん公開前にチェックすべきことですが、万が一に備えて問い合わせフォームを作っておけば、仮にミスがあったとしても早急に対応することができます。

運営を始めて間もないのであればメールがくることはそうありませんが、最初に設定しておくだけなので、アクセス数の少ない今のうちに設置しておきましょう。

メールアドレスを載せるとスパムメールがたくさん

フッターやプロフィールページなどにメールアドレスを載せているブログもありますが、スパムメールが大量に届くのでおすすめしません。メルマガやサービスに勝手に登録されるなどの被害に遭うおそれもあります。

表示方法をちょっと変えて、アットマークを 2 つ重ねたり全角文字にして対応しているところもありますが、そんな程度ならパターンを見破って自動置換できるので意味がありません。

その点、問い合わせフォームにしておけばこちらのメールアドレスを知られることがない、というメリットがあります。

それでもスパムメールは届くのですが、少なくともメールアドレスを悪用される心配がないだけマシですよね。

Contact Form 7なら簡単にフォームが設置できる

CMS で構築していない一般的な Web サイトに問い合わせフォームを設置するには、外部サービスと連携させるか、PHP や CGI で組み込む必要があります。

WordPress にもフォームは標準装備されていませんが、プラグインを使えば専門的な知識がなくとも簡単に設置できます。

今回ご紹介する「Contact Form 7」は、問い合わせフォーム系のプラグインでは世界中で No.1 の人気度。ちなみに、作者は合同会社ロックロブスターを運営している三好隆之さん（@takayukister）です。

それでは、このプラグインの基本的な使い方と CSS デザイン、カスタマイズ方法を見ていきましょう。

Contact Form 7 の基本的な使い方

Contact Form 7 ver.4.1.1

まだ Contact Form 7 をインストールしていない場合は、公式サイトからダウンロードするか管理画面から直接インストールして有効化します。

サイドバーに「お問い合わせ」が表示されていれば OK です。

つづいて、設定画面に移動しましょう。

お問い合わせページを作成する

デフォルトの状態では「コンタクトフォーム 1」という名前で設定されています。

ここに表示されている「ショートコード」を任意の場所に貼り付ければ、そこにメールフォームが設置される仕組み。ID は自動的に割り振られます。

編集画面に入ったら、まず「コンタクトフォーム 1」を「お問い合わせ」など好きな名前に変えておきましょう。

その下に続く項目で、以下を自由に設定できます。

フォーム	フォームに表示する内容を設定。ラジオボタンやチェックボックスなどのパーツを追加できるほか、クラスや ID の付与、Akismet との連携などが設定できます。
メール	フォームを通して管理人に送られるメールの内容を設定。「宛先」には WordPress で設定しているメールアドレスが表示されていますが、自由に変更できます。
メール(2)	おもに自動返信メールの設定。HTML 形式にしたりファイルを添付することもできるので、使いみちはいろいろ考えられますね。
メッセージ	送信完了時のメッセージなどを自由に変更できます。リンク <a> も使えるので、送信後に「トップページへ戻る」などのメッセージをつけることも可能。
その他の設定	Google Analytics でトラッキングしたい場合などに使用します。また、送信完了後にサンキューページへリダイレクトさせることも可能です。

まずは、デフォルトのまま使ってみましょう。「お問い合わせ」という固定ページを新規に作成し、上部に表示されているショートコードを貼ります。

はい、これだけで以下のようなお問い合わせページが完成しました。

これを基本形としてカスタマイズしていきます！

Contact Form 7 のカスタマイズ例

Naifix でもデフォルトのままほったらかしにしていましたが、最近になって問い合わせ件数が増えてきたのでフォームのデザインを変更してみました。

上の画像はフォーム部分だけですが、ページ全体もアイキャッチを入れたり文面を変更しています。

具体的な改良点はこちら。

「必須」をアスタリスクに変更
入力フォームの幅と高さを変更
プレースホルダー（背景のすかし文字）を表示
URL 入力欄（任意項目）を追加
「送信」ボタンのテキストを変更

また、見た目にはわかりませんが、こんな部分も改良しています。

Akismet と連携させてスパムをブロック
問い合わせページでのみ CSS と JavaScript を読み込み

ちょっとした変更ですが、以前より見やすく（入力しやすく）なったのではと思います。

参照実際のお問い合わせページはこちら

Akismet と連携させてスパムをブロックする

まず、見た目にはわからない部分のカスタマイズから。

WordPress をインストールするとあらかじめ入っているプラグイン「Akismet」と連携させて、スパムメールをできるだけブロックします。実装方法は簡単で、コンタクトフォームの編集画面にある「フォーム」欄に追記していくだけです。

たとえば、デフォルトで「名前」の部分は以下のようになっています。

<p>お名前 (必須)<br />
    [text* your-name] </p>

ここに akismet:author を追記します。

<p>お名前 (必須)<br />
    [text* your-name akismet:author] </p>

メールアドレス部分は akismet:author_email を入れます。

<p>メールアドレス (必須)<br />
    [email* your-email akismet:author_email] </p>

設定が終わったら、きちんと動作するか試してみましょう。名前の欄に「viagra-test-123」と入力し、メールアドレスは適当に入れて送信してみます。

以下のようにオレンジ枠のメッセージが出てきたら、正常に動作しています。

参考Akismet によるスパムフィルタリング

Gmail を使用していればほぼ迷惑メールに分類してくれますが、難しい作業ではないので連携しておきましょう。

Honeypot というプラグインを入れると、さらにスパム対策を強化できます。

インストールしておきたいWordPressプラグイン：Contact Form 7 Honeypot

CSS と JavaScript の出力を制御する

Contact Form 7 をインストールすると、全ページで Contact Form 7 の CSS と JavaScript が読み込まれます。

各記事やフッターにフォームを設置している場合は良いのですが、問い合わせページだけでフォームを動作させているなら無駄な読み込み作業が発生していることになります。

functions.php に以下を記述することで出力を制御することができます。

function my_contact_enqueue_scripts(){
wp_deregister_script('contact-form-7');
wp_deregister_style('contact-form-7');
if (is_page('contact')) {
	if (function_exists( 'wpcf7_enqueue_scripts')) {
        wpcf7_enqueue_scripts();
	}
	if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
	wpcf7_enqueue_styles();
	}
}
}
add_action( 'wp_enqueue_scripts', 'my_contact_enqueue_scripts');

「contact」というスラッグで作成された固定ページでのみ CSS と JavaScript が読み込まれます。

ブログの環境に合わせて条件を変更してください。

参考プラグイン［Contact Form 7］で必要なときだけスクリプトとスタイルシートを読み込む方法

フォームにプレースホルダーを表示する

では、見た目の調整を行っていきます。まず、各入力フォームにプレースホルダーを表示してみましょう。

プレースホルダー: フォーム内に表示されている説明文のこと。ユーザーがフォームにカーソルを合わせるか、文字列を入力した時点で消える。

コンタクトフォームの編集画面に入って、「名前」の欄を以下のように変更します。

<p>お名前 (必須)<br />
    [text* your-name placeholder "例）Ellora"] </p>

そうすると、このように名前欄にプレースホルダーが反映されます。

ちなみに、前後のラベル（「お名前」など）をつけず、プレースホルダーのみ表示するのはユーザビリティの低下を招くため好ましくありません。

また、メールフォームであればユーザーが迷うことは少ないので、無理にプレースホルダーを設定しなくてよいと思います。

必須項目にアスタリスク*をつける

デフォルトの必須項目ラベルは「お名前（必須）」となっています。これを「お名前*」のように、アスタリスクをつけてみましょう。

まず、コンタクトフォームの編集画面で以下のようにラベル部分を変更します。

<p>お名前<span class="asterisk">*</span>
    [text* your-name akismet:author placeholder "例）Ellora"]</p>

asterisk というクラス名をつけておいて、CSS で調整します。

.asterisk {
	margin: 0 0 0 0.2em;
	color: #f5637a;
}

この場合フォーム内のどこかに、「*」が必須項目である、という文言を入れておくとなおいいですね。

CSS でフォームのデザインを指定する

あとは CSS でデザインしていきましょう。

編集画面で下記のように「class」を追加すると、各フォームにクラス名をつけることができます。

[text* your-name akismet:author placeholder "例）Ellora" class:name]

個別に指定していきたい場合は便利ですが、今回は一括指定するので使いません。

フォーム全体は <div class=”wpcf7″> で囲われているので、これを利用します。今回は以下のように CSS を設定しました。

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
	background-color: #fff;
	color: #333;
	width: 95%;
	border: 1px solid #ddd;
	font-size: 100%;
	padding: 0.5em;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.1) inset;
}

「送信」ボタンのみ別指定。

.wpcf7 input[type="submit"] {
	font-size: 100%;
	padding: 0.2em 0.4em;
	background: #eee;
	color: #333;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 0 1px rgba(0,0,0,.2);
	border: 1px solid #ccc;
	text-shadow: -1px 1px 0 rgba(255,255,255,1);
}

カーソルを乗せたときは、box-shadow のみ変化させています。

.wpcf7 input[type="submit"]:hover {
	box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}

ちなみに、必須項目部分に入力もれがあると以下のようにテキストが出てきます。

この部分は、以下の指定で変更できます。

.wpcf7 span.wpcf7-not-valid-tip {
	font-size: 80%;
}

カスタマイズ部分まとめ

こまごまご紹介してきましたが、まとめるとこのようになりました。

■コンタクトフォーム編集画面

<p>お名前<span class="asterisk">*</span>
[text* your-name akismet:author placeholder "例）Ellora"]</p>
<p>メールアドレス<span class="asterisk">*</span>
[email* your-email akismet:author_email placeholder "例）abc@example.com"] </p>
<p>ブログ・サイト URL
[url url akismet:author_url placeholder "例）https://naifix.com/"]</p>
<p>件名
[text your-subject] </p>
<p>メッセージ本文
[textarea your-message x20] </p>
<p>確認画面は出ませんので、送信前にもう一度内容をお確かめください。
お名前とメールアドレスは必須項目<span class="asterisk">*</span>です。
[submit "確認したのでメールを送信する"]</p>

■CSS

.wpcf7 {
	margin: 96px 0;
}
.asterisk {
	margin: 0 0 0 0.2em;
	color: #f5637a;
}
.wpcf7 span.wpcf7-not-valid-tip {
	font-size: 80%;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
	background-color: #fff;
	color: #333;
	width: 95%;
	border: 1px solid #ddd;
	font-size: 100%;
	padding: 0.5em;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.1) inset;
}
.wpcf7 input[type="submit"] {
	font-size: 100%;
	padding: 0.2em 0.4em;
	background: #eee;
	color: #333;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 0 1px rgba(0,0,0,.2);
	border: 1px solid #ccc;
	text-shadow: -1px 1px 0 rgba(255,255,255,1);
}
.wpcf7 input[type="submit"]:hover {
	box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}

■functions.php

function my_contact_enqueue_scripts(){
wp_deregister_script('contact-form-7');
wp_deregister_style('contact-form-7');
if (is_page('contact')) {
if (function_exists( 'wpcf7_enqueue_scripts')) {
        wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
}
}
add_action( 'wp_enqueue_scripts', 'my_contact_enqueue_scripts');

コピペして、お好みで調整してみてください。

参考コンタクトフォームのスタイル指定