WordPressでContact Form 7フォームのスタイルを設定する方法

100万人を超えるアクティブユーザーがいるContact Form 7は、WordPressで最も人気のある連絡フォームプラグインの1つです。彼らの最大の欠点は、追加した標準のフォームが非常に明白に見えることです。ありがたいことに、Contact Form 7は、WordPressテーマでCSSを使用して簡単にスタイルを設定できます。この記事では、WordPressでコンタクトフォーム7フォームのスタイルを設定する方法を示します。.


注意: Contact Form 7プラグインは推奨されなくなりました。代わりに、WPFormsをお勧めします。これは、最も初心者にやさしいコンタクトフォームプラグインです。 WPForms Liteを無料でダウンロードすることもできます.

WordPressで連絡先フォームを作成する方法について、ステップバイステップのガイドがあります.

ビデオチュートリアル

WPBeginnerを購読

ビデオが気に入らない、またはさらに説明が必要な場合は、読み続けてください.

入門

Contact Form 7プラグインがすでにインストールされ、最初の連絡フォームが作成されていることを前提としています。次のステップは、連絡先フォームのショートコードをコピーし、フォームを表示したいWordPress投稿またはページに貼り付けます.

この記事のために、デフォルトのお問い合わせフォームを使用してWordPressページに追加しました。これは、お問い合わせフォームがテストサイトでどのように表示されたかです。.

デフォルトのWordPressテーマを使用したWordPressサイトのデフォルトのContact Form 7フォーム

ご覧のとおり、連絡先フォームはWordPressテーマからいくつかのフォームスタイルを継承しています。それは別として、それは非常に基本的です.

CSSを使用してContact Form 7フォームのスタイルを設定します。すべてのCSSがテーマまたは子テーマのスタイルシートに入ります.

WordPressのContact Form 7フォームのスタイル

Contact Form 7は、フォームに対して非常に便利で標準に準拠したコードを生成します。フォームの各要素には適切なIDとCSSクラスが関連付けられています.

各連絡先フォームは、フォームのスタイル設定に使用できるCSSクラス.wpcf7を使用します.

この例では、入力フィールドでGoogleフォントのLoraを使用しています。 WordPressでGoogleフォントを追加する方法を見る.

div.wpcf7 {
background-color:#fbefde;
ボーダー:1pxソリッド#f28f27;
パディング:20px;
}
.wpcf7 input [type ="テキスト"],
.wpcf7 input [type ="Eメール"],
.wpcf7 textarea {
背景:#725f4c;
色:#FFF;
font-family:lora、sans-serif;
font-style:italic;
}
.wpcf7 input [type ="参加する"],
.wpcf7 input [type ="ボタン"] {
background-color:#725f4c;
幅:100%;
text-align:center;
テキスト変換:大文字;
}

これは、このCSSを適用した後のコンタクトフォームの外観です.

WordPressでCSSを使用してContact Form 7フォームのスタイルを設定する

複数のContact Form 7フォームのスタイル

上記で使用したCSSの問題は、WebサイトのすべてのContact Form 7フォームに適用されることです。複数の連絡先フォームを使用していて、それらを異なるスタイルにしたい場合は、フォームごとに連絡先フォーム7によって生成されたIDを使用する必要があります。.

変更するフォームを含むページを開くだけです。マウスをフォームの最初のフィールドに移動し、右クリックして[要素の検査]を選択します。ブラウザの画面が分割され、ページのソースコードが表示されます。ソースコードで、フォームコードの開始行を見つける必要があります.

お問い合わせフォームの要素IDを見つける

上のスクリーンショットにあるように、お問い合わせフォームのコードは次の行で始まります。

id属性は、Contact Form 7がこの特定のフォーム用に生成した一意の識別子です。これはフォームIDとこのフォームが追加された投稿IDの組み合わせです.

このIDをCSSで使用して、連絡先フォームのスタイルを設定します。最初のCSSスニペットの.wpcf7を#wpcf7-f201-p203-o1に置き換えます.

div#wpcf7-f201-p203-o1 {
background-color:#fbefde;
ボーダー:1pxソリッド#f28f27;
パディング:20px;
}
#wpcf7-f201-p203-o1 input [type ="テキスト"],
#wpcf7-f201-p203-o1 input [type ="Eメール"],
#wpcf7-f201-p203-o1 textarea {
背景:#725f4c;
色:#FFF;
font-family:lora, "オープンサンズ", サンセリフ;
font-style:italic;
}
#wpcf7-f201-p203-o1 input [type ="参加する"],
#wpcf7-f201-p203-o1 input [type ="ボタン"] {
background-color:#725f4c;
幅:100%;
text-align:center;
テキスト変換:大文字;
}

CSSヒーローを使用したContact Form 7フォームのスタイル

多くのWordPress初心者は、CSSを書いた経験がなく、習得に時間をかけたくありません。幸いなことに、コンタクトフォームのスタイル設定だけでなく、WordPressサイトのほぼすべての側面を可能にする初心者向けの素晴らしいソリューションがあります。.

CSS Heroプラグインをインストールしてアクティブ化し、フォームを含むページに移動するだけです。 [CSSヒーロー]ツールバーをクリックし、スタイルを設定する要素をクリックします。 CSSヒーローは、コードを記述せずにCSSを編集するための簡単なユーザーインターフェイスを提供します.

CSSヒーローを使用したContact Form 7フォームのスタイル

CSSヒーローの完全なレビューと、それを使用してWordPressサイトで何かをスタイルする方法をご覧ください。 CSS Heroクーポンコードを使用できます WPBeginner 排他的な34%割引を得る.

この記事が、WordPressでContact Form 7フォームのスタイルを設定する方法を学習するのに役立つことを願っています。 WordPressに連絡先フォームのポップアップを追加する方法に関するガイドもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me