MENU
  • ブログ用語集(ガイド)
  • ブログ運営基礎知識
  • SEOノウハウ
  • ブログ収益化
  • WordPress
  • Webデザイン
  • PC
  • サービス一覧
  • 無料相談
セオリコ
  • ブログ用語集
  • 記事一覧
    • ブログ基礎知識
      • ブログ基礎知識
      • ブログの書き方
      • サーバー関連
    • ブログ収益化
      • Google AdSense
    • SEO
    • Webデザイン
      • CSSデザイン
    • WordPress
      • WordPress エラー修正方法まとめ
      • WordPressテーマ
      • WordPressプラグイン
      • ブログカスタマイズ
    • PC関連
      • OS・ソフトウェア
      • ハードウェア
  • サービス一覧
    • ブログ個別サポート(コンサルティング)
    • サイト診断(Google AdSense 審査対策)
    • Search Console データ分析
    • WordPress エラー修復
    • Link Map Insights
  • 無料相談
セオリコ
  • ブログ用語集
  • 記事一覧
    • ブログ基礎知識
      • ブログ基礎知識
      • ブログの書き方
      • サーバー関連
    • ブログ収益化
      • Google AdSense
    • SEO
    • Webデザイン
      • CSSデザイン
    • WordPress
      • WordPress エラー修正方法まとめ
      • WordPressテーマ
      • WordPressプラグイン
      • ブログカスタマイズ
    • PC関連
      • OS・ソフトウェア
      • ハードウェア
  • サービス一覧
    • ブログ個別サポート(コンサルティング)
    • サイト診断(Google AdSense 審査対策)
    • Search Console データ分析
    • WordPress エラー修復
    • Link Map Insights
  • 無料相談

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

2024 9/10
WordPressプラグイン
2024/09/10

WordPress でお問い合わせフォームを簡単に設置したいなら、プラグイン「Contact Form 7」がおすすめです。

デフォルトのデザインだと味気ないので、ブログの雰囲気に合わせてカスタマイズしてみましょう。

基本設定やスパムブロックとの連携、CSS によるデザイン変更などのカスタマイズ方法を解説していきます。

目次

Contact Form 7 の基本的な使い方

まずは Contact Form 7 のインストールからページ作成まで、基本的な使い方を見ていきましょう。

Contact Form 7

Contact Form 7 – WordPress プラグイン | WordPress.org 日本語  

インストール・有効化

プラグイン新規追加画面で「Contact Form 7」を検索し、インストール・有効化します。

Contact Form 7 インストール

フォーム作成

プラグインを有効化すると、左サイドバーに「お問い合わせ」が表示されます。クリックして設定に進みましょう。

サンプルを兼ねた「コンタクトフォーム 1」が用意されているので、「編集」をクリックします。

Contact Form 7 編集

編集画面でフォームや送信内容を変更できます。

Contact Form 7 編集画面
① タイトル管理用のタイトルです。ユーザーからは見えないので、わかりやすいタイトルにしておきましょう。
② フォーム名前やメールアドレス入力欄を編集できます。
③ メール送信内容を編集できます。メール(2) を使用して自動返信を設定することも可能。
④ メッセージ送信完了や必須項目未入力のアラートメッセージを編集できます。
⑤ その他の設定デモモードへの変更や他のプラグインとの連携などに使用します。通常は使いません。

フォームやメールは編集せず、タイトルだけ「お問い合わせ」に変更して保存しました。いったんこのまま使ってみましょう。

Contact Form 7 タイトル変更

ページ作成

お問い合わせページを「固定ページ」で作成します。

「投稿」でも作成できますが、不要なカテゴリーが増えるなど使い勝手が悪くなるのでおすすめしません。

ブロックエディターの場合は「Contact Form 7」専用ブロックを使えば簡単です。

Contact Form 7 ブロック

ブロックを配置したら、先ほど設定した「お問い合わせ」を選択します。

Contact Form 7 ブロック設定
補足:クラシックエディターの場合

クラシックエディターの場合は、コンタクトフォーム一覧で表示されているショートコードをエディタにコピー&ペーストすれば表示されます。

Contact Form 7 ショートコード

あとは任意のパーマリンクを設定して公開すれば、お問い合わせページの設置完了です。

Contact Form 7 表示例
Twenty Seventeen での表示例

Contact Form 7 ラベルカスタマイズ例

以下、カスタマイズ例を紹介していきます。

簡単に変更できるラベル部分を調整してみましょう。

ラベルを変更する

「氏名」などのラベルは、Contact Form 7 編集画面の「フォーム」で自由に変更できます。

フォームを設置した固定ページでの操作は必要ありません。

Contact Form 7 ラベル変更
ラベルを自由に変更できる

以下は「氏名」や「題名」を変更してみた例です。

Contact Form 7 ラベル変更後

必須項目をわかりやすくする

初期状態では「メッセージ本文 (任意)」となっており、その他の項目が必須であるとわかりづらい気がします。

そこで、必須項目のラベルにアスタリスク( * )を付けてみましょう。

以下のコードを必須項目ラベルのうしろに追加します。

<span class="required-form">*</span>

さらに、「*」が必須項目であることを伝えるために、送信ボタンの上にメッセージを追加しておきます。

<p class="required-form">* 必須項目</p>
Contact Form 7 必須項目カスタマイズ

CSS でアスタリスクの色を変更しておきましょう。

以下のコードを、テーマの style.css やカスタマイザーの「追加 CSS」など管理しやすい部分に追記します(色は自由に変更してください)。

.required-form { color: #ce2e2e; }

どこが必須項目なのかわかりやすくなりました。「 (任意) 」は削除してあります。

Contact Form 7 必須項目カスタマイズ後

Contact Form 7 入力欄カスタマイズ例

次に、各入力欄のカスタマイズ例を紹介します。

Akismet と連携する

スパムブロックプラグイン「Akismet」と連携させてスパムを軽減させましょう。

スパムブロックプラグイン「Akismet」の設定方法と使い方

名前と入力欄を以下のように変更します。

# 変更前
[text* your-name autocomplete:name]

# 変更後
[text* your-name autocomplete:name akismet:author]
# 変更前
[email* your-email autocomplete:email]

# 変更後
[email* your-email autocomplete:email akismet:author_email]
Contact Form 7 Akismet連携

Akismet によるスパムフィルタリング | Contact Form 7 [日本語]  

「Akismet」が設定されている状態で「Contact Form 7」をインストールした場合は、自動的に連携されています。再設定する必要はありません。

プレースホルダーを表示する

入力欄にプレースホルダーを表示しておくと、よりわかりやすいフォームになるかもしれません。

氏名・メールアドレス欄に placeholder を追加してみましょう。

# 変更前
[text* your-name autocomplete:name akismet:author]

# 変更後
[text* your-name autocomplete:name akismet:author placeholder "山田 太郎"]
# 変更前
[email* your-email autocomplete:email akismet:author_email]

# 変更後
[email* your-email autocomplete:email akismet:author_email placeholder "abc@example.com"]

プレースホルダーの文字色は ::placeholder で変更できます。

.wpcf7 input::placeholder { color: #888; }

このように表示されれば OK です。

Contact Form 7 プレースホルダー表示例

「件名」や「お問い合わせ内容」にも同じ手順でプレースホルダーを表示できるので、自由に調整してみてください。

プレースホルダーテキストを設定する | Contact Form 7 [日本語]  

Contact Form 7 全体の CSS デザイン

Contact Form 7 のフォームは、各テーマで input や textarea にあてられている CSS が反映されます。

フォーム全体は .wpcf7 でラップされているので、それを使って Contact Form 7 にのみデザインが反映されるようにするのがおすすめ。

以下は出力される HTML を簡素化したものです。

<div class="wpcf7 no-js">
    <form class="wpcf7-form init">
        <p>
            <label> お名前 <span class="required-form">*</span><br />
                <span class="wpcf7-form-control-wrap" data-name="your-name">
                    <input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" autocomplete="name" aria-required="true" aria-invalid="false" placeholder="山田 太郎" value="" type="text" name="your-name" />
                </span>
            </label>
        </p>
        <p>
            <label> メールアドレス <span class="required-form">*</span><br />
                <span class="wpcf7-form-control-wrap" data-name="your-email">
                    <input size="40" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" autocomplete="email" aria-required="true" aria-invalid="false" placeholder="abc@example.com" value="" type="email" name="your-email" />
                </span>
            </label>
        </p>
        <p>
            <label> 件名 <span class="required-form">*</span><br />
                <span class="wpcf7-form-control-wrap" data-name="your-subject">
                    <input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" value="" type="text" name="your-subject" />
                </span>
            </label>
        </p>
        <p>
            <label> お問い合わせ内容<br />
                <span class="wpcf7-form-control-wrap" data-name="your-message">
                    <textarea cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" name="your-message"></textarea>
                </span>
            </label>
        </p>
        <p class="required-form">* 必須項目</p>
        <p>
            <input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="送信" />
        </p>
        <div class="wpcf7-response-output" aria-hidden="true"></div>
    </form>
</div>

加えて、必須項目が未入力だった場合は各要素に .wpcf7-not-valid が追加されます。

以上をふまえると、基本的な部分はこのような CSS で調整できます。

/* 名前・件名 */
.wpcf7 input[type="text"] {

}

/* メールアドレス */
.wpcf7 input[type="email"] {

}

/* 本文 */
.wpcf7 textarea {

}

/* 送信ボタン */
.wpcf7 input[type="submit"] {

}

/* 必須項目未入力 */
.wpcf7 .wpcf7-not-valid {

}

コンタクトフォームのスタイル指定 | Contact Form 7 [日本語]  

CSS デザインサンプル

サンプルとして、以下のように変更してみました。

Contact Form 7 CSSデザイン前
Contact Form 7 CSSデザイン後

Twenty Seventeen はもともときれいにデザインされていたのであまり変わりませんが、送信ボタンは目立つようになっていると思います。

実際のサンプルページはこちら  

全体の CSS は以下のとおり。 先述の必須項目やプレースホルダーも含めたコードです。

/* 各入力欄 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 0;
	color: #333;
	width: 100%;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
	background-color: #003399;
	border: none;
	border-radius: 0;
	color: #fff;
	padding: 1em;
	width: 100%;
}

.wpcf7 input[type="submit"]:hover {
	opacity: 0.8;
}

/* 必須項目 */
.required-form {
	color: #ce2e2e;
}

/* プレースホルダー */
.wpcf7 input::placeholder {
	color: #888;
}

/* 必須項目未入力 */
.wpcf7 input.wpcf7-not-valid {
	background-color: #ffdfdf;
}

.wpcf7 input.wpcf7-not-valid:focus {
	background: #fff;
}

/* スピナー */
form.submitting .wpcf7-spinner {
	visibility: hidden;
	display: none;
}

必須項目が未入力だったときに .wpcf7-not-valid が付与されるので、それをもとに入力欄の背景も変更してみました。

必須項目にきちんと入力すると、メッセージが消えて背景色も戻ります。

Contact Form 7 必須項目未入力のデザイン
Contact Form 7 必須項目入力後のスタイル

テーマに合わせて調整してみてください。

まとめ

お問い合わせページの有無はブログの信頼性に関わってきます。

設置自体は簡単にできるので、まだページを作成していないのであればぜひ作ってみてください。

上手くいかないときはお気軽にご相談いただければと思います。

Contact Form 7 のメールが届かない原因と対処法

Contact Form 7 の検証機能で表示されるエラーの修正方法

WordPressプラグイン

著者

SEO コンサルタント 瀬尾

瀬尾 真

SEO コンサルタント

Web 歴 20 年以上の SEO コンサルタント。ライティング業務ほか、サイト制作・コンテンツ販売・メディア運営代行業務を行っています。当サイト(セオリコ)では、おもにブログ初心者向けのノウハウを配信。

ココナラでは WordPress エラー修正やハッキング修復、Search Console 分析サービスをご提供しています(年間400件以上対応)。

X (Twitter)
ココナラ
マシュマロ
お問い合わせ

関連記事

  • Easy Username Updater
    WordPress ユーザー名を変更できる「Easy Username Updater」の使い方
  • 複製
    Yoast Duplicate Post|記事の複製と過去記事リライトに重宝するプラグイン
  • 関連記事にリンク
    Advanced Custom Fields で任意の位置に関連記事を表示する方法
  • wp.me 短縮URL一覧を作成
    Jetpack で生成した wp.me 短縮 URL 一覧リストを取得する方法
  • Really Simple SSL
    Really Simple Security の使い方|WordPress 常時 SSL 化(HTTPS 化)プラグイン
  • Table of Contents Plus CSS デザイン
    Table of Contents Plus カスタマイズ方法(CSS デザイン)
  • ABテスト
    AB テストが簡単にできる WordPress プラグイン「My WP A/B Testing」の使い方
  • SEOプラグイン
    WordPress に SEO プラグインは必要? 導入するさいの注意点
  1. セオリコ
  2. WordPress
  3. WordPressプラグイン
  4. Contact Form 7 の使い方と CSS デザイン・カスタマイズ方法
Category
  • ブログ運営法
  • ブログ収益化
  • SEO
  • Webデザイン
  • WordPress
  • PC
Service
  • ブログ個別サポート
  • Google AdSense 審査対策
  • WordPress エラー修復
  • Search Console 分析
WordPress Plugin
  • Link Map Insights
Information
  • ブログ用語集(ガイド)
  • お問い合わせ
  • サイトマップ
  • セオリコ運営者情報
  • コンテンツポリシー
  • プライバシーポリシー
  • X (@seoryco)

© seoryco.

  • お問い合わせ
  • サービス一覧
  • 検索
  • 目次
  • トップへ
目次