多くの WordPress ユーザーは、Contact Form 7 が無料の人気のあるプラグインであるため、まずこれを使用します。しかし、デフォルトのフォームがどれほど地味に見えるかに気づくと、最初の興奮はすぐにフラストレーションに変わることがよくあります。
基本的なグレーのスタイルは、サイトの他の部分と調和せず、全体的なデザインの洗練度を低下させる可能性があります。
残念ながら、Contact Form 7にはビジュアルエディターや組み込みのスタイリングオプションがありません。つまり、コードに慣れていない場合、簡単な変更でも圧倒される可能性があります。
ですから、フォームをブランドに合わせるのに苦労したことがあるなら、あなたは決して一人ではありません！
良いニュースは、これを修正するために開発者である必要はないということです。わずかなCSSの調整で、フォームをクリーンでモダン、そして完全にブランドに合った外観にスタイル設定できます。
この初心者向けガイドでは、高度なコーディングやデザインスキルを必要とせずに、Contact Form 7をステップバイステップでカスタマイズする方法を正確に説明します。
お問い合わせフォーム7のフォームをスタイル設定する理由
Contact Form 7は、最も人気のあるWordPressの連絡フォームプラグインの1つです。無料で利用でき、ショートコードを使用してWordPressフォームを追加できます。
ただし、Contact Form 7は機能が非常に限られています。
Contact Form 7の1つの問題は、フォームのスタイルがプレーンであることです。さらに、プラグインにはフォームのスタイルを変更するための組み込みオプションがありません。
これにより、コンタクトフォームのデザインをウェブサイトのテーマに合わせることが難しくなります。または、フォントや背景色を編集してフォームを目立たせたい場合などです。
📦 内部ヒント: より高度な機能を持つカスタマイズ可能なフォームが必要な場合は、WPFormsをお勧めします。ドラッグ＆ドロップのフォームビルダー、AIツール、2,000以上の事前構築済みフォームテンプレート、多数のカスタマイズオプションが付属しています。
実際、私たちはほとんどすべてのフォームで WPForms を使用しています。WPBeginner のお問い合わせフォームから、年次読者アンケート、サイト移行リクエストフォームまで。なぜこのフォームビルダーを強く推奨するのかについては、WPForms の詳細なレビューをご覧ください。
予算が限られている場合は、WPForms の無料バージョンがあります。60 以上のテンプレート、条件付きロジック、Stripe 支払いなどが含まれています。
Contact Form 7とWPFormsの直接比較がありますので、ぜひご覧ください！
それでは、WordPressでContact Form 7フォームをスタイル設定する方法を見ていきましょう。以下は、次のセクションで取り上げるすべての項目です。
- Contact Form 7の始め方
- 方法1：カスタムCSSを使用してContact Form 7フォームをスタイリングする
- 方法2：CSS HeroでContact Form 7のフォームをスタイル設定する
- ボーナスヒント 💡：コード不要でWordPressフォームをスタイリングする方法
さあ、始めましょう！
Contact Form 7の始め方
まず、ウェブサイトに Contact Form 7 プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。
有効化したら、WordPressダッシュボードから連絡先 » 新規追加に移動できます。
これで、ウェブサイトのフォームを編集し、フォームのタイトルを入力することから始めることができます。
プラグインは、フォームのデフォルトの名前、メールアドレス、件名、メッセージフィールドを自動的に追加します。ただし、ドラッグアンドドロップで簡単にフィールドを追加することもできます。
完了したら、「保存」ボタンをクリックしてショートコードをコピーすることを忘れないでください。
次に、フォームをブログ記事やページに埋め込みます。
これを行うには、投稿を編集するか、新しい投稿を追加するだけです。
WordPressエディターに入ったら、上部にある「+」記号をクリックし、ショートコードブロックを追加してください。
その後、単にContact Form 7フォームのショートコードをショートコードブロックに入力してください。次のようになります：
[contact-form-7 id="117" title="Contact Form"]
さて、WordPressブログ投稿を公開して、コンタクトフォームが機能していることを確認してください。
この記事では、デフォルトのお問い合わせフォームを使用し、WordPress ページに追加しました。テストサイトでのお問い合わせフォームは次のようになりました。
さて、WordPressでContact Form 7フォームをカスタマイズする準備はできましたか？
方法1：カスタムCSSを使用してContact Form 7フォームをスタイリングする
Contact Form 7には組み込みのスタイルオプションがないため、フォームのスタイルを設定するにはCSSを使用する必要があります。
Contact Form 7 は、フォームの標準準拠コードを生成します。フォーム内の各要素には、適切な ID と CSS クラスが関連付けられており、CSS を知っていれば簡単にカスタマイズできます。
各Contact Form 7フォームは、スタイル設定に使用できるCSSクラス.wpcf7を使用しています。
この例では、入力フィールドにLoraという名前のカスタムフォントを使用し、フォームの背景色を変更します。
div.wpcf7 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}
カスタムCSSの追加にヘルプが必要な場合は、WordPressサイトにカスタムCSSを簡単に追加する方法に関するガイドを参照してください。
このCSSを適用した後、コンタクトフォームは次のようになりました。
複数の Contact Form 7 フォームのスタイリング
複数のコンタクトフォームを使用しており、それぞれを異なる方法でスタイル設定したい場合は、Contact Form 7が各フォームに生成するIDを使用する必要があります。
上記のCSSの問題点は、ウェブサイト上のすべてのContact Form 7フォームに適用されてしまうことです。
まず、変更したいフォームが含まれるページを開きます。次に、マウスをフォームの最初のフィールドに移動し、右クリックして「Inspect」オプションを選択します。
ブラウザ画面が分割され、ページのソースコードが表示されます。ソースコード内で、フォームコードの開始行を見つける必要があります。
上のスクリーンショットでご覧いただけるように、当社の連絡フォームコードは次の行から始まります。
<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">
ID属性は、Contact Form 7がこの特定のフォーム用に生成する一意の識別子です。フォームIDとこのフォームが追加された投稿IDの組み合わせです。
このIDをCSSで使用して連絡フォームをスタイル設定し、最初のCSSスニペットの.wpcf7を#wpcf7-f113-p114-o1に置き換えます。
div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}
これで、すべてのフォームに対して手順を繰り返すことができ、カスタマイズしたいContact Form 7フォームごとにフォームIDを置き換えることができます。
方法2：CSS HeroでContact Form 7のフォームをスタイル設定する
Contact Form 7フォームのスタイルを変更する簡単な方法は、CSS Heroを使用することです。これにより、CSSを書かずにフォームを編集できます。
ウェブサイトにCSS Heroプラグインをインストールして有効化するだけです。WordPressプラグインのインストール方法に関するガイドに従ってください。
次に、フォームが含まれるページに移動し、上部のツールバーにある「CSS Heroでカスタマイズ」オプションをクリックします。
CSS Heroは、コードを書かずにCSSを編集するための簡単なユーザーインターフェイスを提供します。
プラグインを使用すると、フォームのフィールド、見出し、その他の要素をクリックして、背景色、フォント、境界線、間隔などを編集できます。
フォームをカスタマイズしたら、下部にある「保存して公開」ボタンをクリックするだけです。
ボーナスヒント 💡：コード不要でWordPressフォームをスタイリングする方法
Contact Form 7でCSSを扱うのが少し技術的すぎると感じる場合は、はるかに簡単でコード不要のソリューションがあります：WPForms。
WPForms は市場で最高のフォームビルダーです。ビジュアルエディターと事前デザインされたテーマが付属しているため、コードを一行も書かずにフォームを完全にカスタマイズできます。
WPForms でフォームをスタイリングするのはこれほど簡単です。
フォームをページに追加した後、右側のブロック設定パネルを開き、「テーマ」セクションまでスクロールします。
その後、40以上の美しい、事前デザインされたテーマから選択して、すぐにサイトのデザインに合わせることができます。
それ以外にも、次のことができます。
- フィールドのサイズ、境界線、色を調整する
- ラベルフォント、サブラベル、エラーメッセージを調整する
- 提出ボタンをブランドに合わせてスタイル設定する
ステップバイステップの説明については、WordPressフォームのカスタマイズとスタイリング方法に関するガイドをご覧ください。
この記事が、WordPressでContact Form 7フォームをスタイリングする方法を学ぶのに役立ったことを願っています。また、WordPressフォームで条件付きロジックを使用する方法に関する専門家のアドバイスや、WordPressフォーム使用に関する究極のガイドもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Alejandro
ありがとうございます！
あなたの指示は非常に役立ちました。
共有する時間を割いていただき、ありがとうございます！
WPBeginnerサポート
Glad our guide was helpful
管理者
hmi
こんにちは、フィールドのCSSコードはどこで見つけられますか？
ありがとうございます
WPBeginnerサポート
現在のCSSを見つけるには、要素を検証（inspect element）を使用してください。
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Tony Tran
送信ボタンの背景色をCSSで変更できません…助けてください
WPBeginnerサポート
対象のオブジェクトが間違っている可能性があります。こちらの記事をご覧ください。
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Deshave
PDFの送信ボタンが、フォームをWordPressウェブサイトにアップロードしてから機能しなくなりました。
WPBeginnerサポート
推奨しているPDF埋め込みはコンテンツ表示用です。フォームへの入力には、フォームプラグインの使用をお勧めします。
管理者
zeeshan alam
シェアしていただきありがとうございます。
WPBeginnerサポート
You’re welcome
管理者
Steve
こんにちは、必須項目が1つ以上入力されていない場合にメッセージを追加することは可能ですか？なぜなら、入力されていない必須項目に「赤い矢印」が表示されるだけで、追加のエラーメッセージが表示されないからです。
“必須項目が1つ以上エラーになっています。確認してもう一度お試しください。”
しかし、私にあるのは赤い矢印だけで、問題は携帯電話で、赤い矢印がウィンドウに表示されず、クライアントには見えません。
WPBeginnerサポート
現在利用可能なものについては、Contact Form 7のサポートに問い合わせる必要があります。
管理者
FRED_VERSATILE
こんにちは、
このチュートリアルをありがとうございます。
ボタンの「送信」ラベルの右側にカスタム画像を追加したいのですが。
ウェブサイトの他のボタンでは:before で行いましたが、CSS を適用する送信フォームの要素が見つかりません。
WPBeginnerサポート
フォームのタイプによってターゲットが変わります。要素を検査（inspect element）すれば、オブジェクトのIDまたはクラスを確認できるはずです。 https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/ 別の選択肢として、:beforeの代わりに:afterを使用することもできます。
管理者
Muhammad Tahir
特定のコンタクトフォームの応答テキストの色を変更する方法
waqas
プラグインなしでContact Form 7に時間フィールドを追加できますか？
メアリー・ルー・ホフマン
初心者ですが、自分で解決しようと決意しています！ですので、もし回答していただけるなら、簡単なステップでお願いします。
ウェブサイトにcontact7フォームがあります。ラベル（お名前、メールアドレスなど）のフォントが白地に白で表示されています。
色を変更するにはどうすればよいですか？どこで色を変更するように指示すればよいですか？
以前の回答にあったコードをコピー＆ペーストしてみましたが、ページに表示されただけでフォントの色は変わりませんでした。
Karu Price
ラベル領域は次のようにターゲットにできます-
.wpcf7 form p label { color: white; background: black; font-family: sans-serif; }
Rita Accarpio
こんにちは！
モーダル見出しで苦労しています。フォームの背景を暗い色に変更しましたが、見出しの色を変更したいです。これまでに試したさまざまなオプションでも、まったく変更されないようです。
これを行う方法を知っていますか？助けてください！
ありがとうございます！
Chris
ありがとうございます！
アビジット
名前とメールボックスの間のギャップを減らしたいのですが、どうすればよいですか。
ナヴィーン
素晴らしい投稿をありがとうございます。大変参考になりました。
ジョシュ
これは非常に役立ちました。ありがとう！
Joel Desrosiers
私のコンタクトフォームには暗い画像背景があるので、「あなたの名前」、「あなたのメール」、「あなたのメッセージ」を白にする必要があります。これらの要素のクラスまたはIDが見つかりません。要素を検査しましたが、機能するものは何も見つかりませんでした。これはサイト上の唯一のコンタクトフォームです。チャイルドテーマのスタイルシートでCSSを使用しており、さまざまなオプションを試しましたが、色を変更できませんでした。誰か助けてもらえませんか？
メリヤン・フー
WordPressやプラグイン全般についてはかなり初心者ですが、このプラグインをインストールしてすべて正常に動作していますが、相手のメッセージを見る代わりに、メール本文に[your-message]と表示されます。上記のようにすべて設定し、スペルも間違っていません。問題が何であるかわかりません。どんな助けでも大歓迎です！ありがとう！
Don Walley
私も同じ問題を抱えています。WPでのフォームは初めてですが、私も行き詰まっています。会社名、住所など、個人連絡先情報、選択肢を選ぶためのドロップダウン、そしてもちろんコメントフィールドを備えた登録ページを作成しようとしています。これを何度もテストしましたが、あなたと同じ結果になります。コメントフィールドの内容です。
Contact 7のドキュメントページに、例がいくつかあればよかったのにと思います。デフォルトのContact Form以外のものがあればなお良いです。
ミゲル・セバロス
Contact Form 7は最も人気があるとは思えません。多くのテーマやWordPressのインストールにプリインストールされているため、ユーザーが多いのです。このプラグインで何かを編集するのは非常にフラストレーションがたまります。
オサマ・アリ・カーン
こんにちは。透明な背景の連絡フォームが必要な場合や、透明な背景の大きなバナー画像にContact Form 7を追加したい場合は、このコードをカスタムCSSに追加してください。
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { background-color: Transparent; color: BLUE; width: 100%;
}
div.wpcf7 { color: white; margin: 0; padding: 0; }
Deborah
あなたはまさに命の恩人です。何時間もこの問題と格闘していました。
他の人が知っておくと役立つかもしれない点を一つ挙げるとすれば、サイドバーに設置したContact Form 7の送信ボタンをスタイリングしようとしていたことです。
これは最初のページでは機能しましたが、その後のページでは機能しませんでした。しかし、その後、2番目のページのf2コードに「o2」という接尾辞が付いていることに気づき、それをCSSに追加したところ、このページのスタイル設定も機能しました。
重ねて感謝いたします。
WPBeginnerサポート
Glad you found it helpful.
管理者
Mikko
素晴らしい投稿をありがとう、とても役に立ちました。まだ気になることが一つあり、チェックボックスをカスタマイズする方法が見つからないことです。例えば、すべてのブラウザで機能するようにチェックボックスのサイズを変更する方法を見つけましたか？
入力構造は変更されていないため、チェックボックスを偽装するために追加の span を追加することはできないようですが、合っていますか？
お時間があれば手伝っていただけると嬉しいです。よろしくお願いします。
ウェンディ
なんてこと！この投稿にどれほど感謝しているか、あなたは知りません！ありがとうございます！
送信ボタンで使用されているフォントを変更したかっただけです。何時間も探し回り、さまざまなCSSコードのバリエーションを試しましたが、何も機能しませんでした。あなたのコードを見つけて、それにフォント要素を追加するまで。問題解決！
pranav shinde
contact-form-7/includes/css/styles.css (非アクティブ) が CSS 編集ファイルの上に表示されます。これにより、変更がウェブサイトに適用されません。アクティブにする方法を教えてください。
WPBeginnerサポート
コアプラグインファイルを編集しないでください。代わりに、テーマのスタイルシートにCSSを追加してください。
管理者
pranav shinde
はい、理解しました。では、どのようにすればできますか？詳しく教えていただけますか？
pranav shinde
本当にありがとうございます。とても参考になりました。チャンネル登録します。
pranav shinde
これは、このコードをテーマのCSSファイルにコピーする必要があるということですか？
Monique
Hello,
モバイルのお問い合わせフォームを修正するのを手伝ってもらえませんか？フォームは見えますが、幅が広すぎて切り取られてしまいます。
ありがとうございます。
puneet singh
これは非常に役立つ、本当に良いチュートリアルです
Jiniya
ウェブサイトはとても参考になります。提案ですが、近いうちにウェブサイトのアプリをリリースしていただけると素晴らしいと思います…アプリの方がメールを追いかけるよりも便利です
WPBeginnerサポート
いい考えですね。その間、モバイルデバイスではFeedlyアプリを使用してWPBeginnerにアクセスできます。
管理者
Anee
WordPressの最も優れた機能は、HTMLやその他のもので既にデザインした独自の構造をContact 7フォームで管理できることです。WordPressでサイトを管理するために深い知識は必要ありません。
Neil Murray
CSSの操作が現在のスキルレベルを超えている場合は、https://wordpress.org/plugins/contact-form-7-skins/の使用も検討できます。
Contact Form 7 Skins は、通常の Contact Form 7 インターフェイス内で機能するため、HTML や CSS のスキルがなくても、通常の WordPress ユーザーが互換性のあるさまざまなテンプレートやスタイルを使用して、プロフェッショナルな見た目の Contact Form 7 フォームを簡単に作成できます。
サム
ありがとう、ニール
アンドリュー・ウィルカーソン
ありがとう、ニール。まさに必要としていたものだと思います。興奮してインストールしたのですが、既存のフォームを上書きしてしまったので、サイトのバックアップを復元して元に戻す必要がありました。時間があるときに詳しく見てみます。現在のフォームをコピーするか、新しいフォームをゼロから作成する必要があると思います。チュートリアルを見ることにします。これがまだ使用するのに最適なものだといいのですが。古い投稿であることは知っていますが、プラグインページには最近更新されたと記載されています。
Bhongo
素晴らしい記事です。これをウェブサイトのスタイル設定に使用します。
Mark
また別のプラグインを使用しない、良い記事ですね。