あなたのウェブサイトに合うように連絡フォーム7のスタイルをカスタマイズする方法
公開: 2018-10-10100万を超えるアクティブなインストールがあるContactForm 7は、これまでで最も人気のあるWordPressプラグインの1つです。 その人気は、おそらくその説明の背後にある真実と関係があります：「シンプルだが柔軟」。
Contact Form 7では、単純なHTMLマークアップ（生成される）だけを使用して、複数の連絡フォームを作成できます。 作成したら、フォームを表示する場所に対応するショートコードを配置することで、各フォームをすばやく展開できます。 ページ、投稿、またはウィジェット領域。 フォームを介して送信されたメッセージは、プラグイン設定で提供された電子メールアドレスに送信され、スパムはCAPTCHAおよびAkismetのサポートを介して対処されます。
お問い合わせフォーム7はとてもシンプルなので、文字通り誰でも効果的に使用できるようです。 スタイリングもシンプルにすることを目的としています。 しかし、おそらく一部の人にとっては単純すぎます。 デフォルトでは、Contact Form7プラグインはフォームのスタイルを設定しません。 彼らが持っているスタイリングは、WordPressテーマのスタイルシートにあるデフォルトのスタイリングの結果です。
通常、次のような非常に基本的な結果になります。
残念ながら、この種のフォームは確かにシンプルで柔軟性がありますが、自分のWebサイトの他の要素ほど美しくデザインされていない可能性があります。 より多くのスタイリングオプションを備えたContactForm 7の代替案を探している、他の点では満足している多くのユーザーを残します。 ありがたいことに、CSSが少しあれば、プラグインの代替は必要ありません。
今日の投稿では、あらゆるテーマを使用して、誰にでもさまざまなContact Form7スタイリングの可能性を開く一連のヒントを共有します。
あなたのウェブサイトに合うように連絡フォーム7のスタイルをカスタマイズする方法
私たちのYoutubeチャンネルを購読する
お問い合わせフォーム7のCSSを編集する場所（およびその理由）
カスタムCSSを追加するときは、Contact Form7または親テーマのスタイルシートに追加しないことが重要です。 そこで行った変更や追加は、テーマやプラグインが更新されるとすぐに上書きされます。
代わりに、以下のCSSを子テーマのCSSに追加することをお勧めします。 JetpackでカスタムCSS機能を使用することもできます。または、テーマの管理パネルにカスタムCSSのセクションが用意されている場合は、それも使用できます。
さて、これから説明するスタイルをどこに配置するかがわかったので、始めましょう。
サイト全体のフォームスタイルを作成する方法
フォーム全体に適用される一般的な編集を行うことから始めましょう。 これを行うには、クラスセレクター.wpcf7を使用し、その下にスタイルを追加します。
（また、以下に書いたコメントアウトされた見出しをスタイルシート内に配置して、Contact Form 7スタイルがどこから始まるかを示すことを強くお勧めします。）
/* Contact Form 7 Styles
---------------------------------*/
.wpcf7 {
background-color: #F0F0F0;
border: 5px solid #666666;
}
上記のコードをスタイルシートに追加すると、Contact Form 7で作成するすべてのフォームに、定義した背景と境界線のスタイルが含まれます。 以下に例を示します。
ご覧のとおり、間隔の問題がいくつかあります。 これを修正するには、境界線と内側のフォーム要素の間のマージンを調整する必要があります。 以下のコードでこれを行うことができます。
.wpcf7-form {
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
私のテストサイトでは、これにより次の結果になりました。
注：これらのスタイルは、さまざまなテーマで作業している可能性が高いため、フォームにわずかに異なる方法で影響を与える可能性があります。 これは、このコードが機能しないことを意味するのではなく、サイトに適切なものを取得するために数値を少し調整する必要がある場合があるだけです。
サイト全体のフォームフィールドスタイルを作成する方法
Contact Form 7のスタイリングに関して人々が抱く最も一般的な要求の1つは、フィールドの幅を調整する方法です。 特に、あまり拡張されていないメッセージ領域。
以下のコードは、メッセージ領域を希望の幅に拡張します（調整時）。 例では95％に設定しました。これは、私の想像したユースケースで最もよく見えたものです。 パーセンテージまたは固定ピクセル数を使用して、ニーズに合わせて設定することもできます。
.wpcf7-textarea {
width: 85%;
}
入力クラスセレクターを調整することにより、他のフィールドの幅も調整できます。
.wpcf7 input {
width: 50%;
}
すべての入力フィールドを同じ基準で調整したくない場合は、関心のあるものだけを選択して少しドリルダウンできます。以下の例では、送信ボタンが表示されるようにテキストフィールドを変更することを選択しました。影響も受けません。
.wpcf7-text {
width: 50%;
}
上記のすべての変更の後、下に表示されているフォームのスタイルを設定することができました。
個人的にはボタンの色を変えたくなかったのですが、それはおそらくもう一つの共通の願いだと思います。 したがって、ボタンの色を変更したい場合は、以下のCSSを使用して実験できます。
.wpcf7-submit {
background: #555555;
color: #ffffff;
}
これらのCSSを配置すると、Contact Form7で作成されたすべてのフォームは上の最終画像のようになります。 しかし、特に1つのフォームを他のすべてのフォームとは異なって見せたい場合はどうなりますか？
特定のフォームのスタイルを設定する方法
特定のフォームにスタイルを編集するために必要な特定のCSSIDを取得するのは少し面倒かもしれませんが、少し手を加えるだけで可能です。
最初にやりたいことは、実際にフォームのショートコードをサイトに追加してプレビューすることです。 （そのショートコード内にIDの番号があることに気付くでしょうが、それは実際には必要な完全なIDではありません。）
次に、Google Chromeの要素の検査機能または別のブラウザで同様の機能を使用して、フォームのコードを確認します。 これを使用すると、完全なフォームIDが見つかります。
私の場合、ショートコードのID番号は4407でした。 完全なIDはwpcf7-f4407-p4405-o1であることが判明しました。 つまり、サイト全体の設定とは異なるさまざまな基準で以下のコードを使用することで、その特定のフォームだけをさらに編集できるということです。
#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}
特定のフィールドのスタイルを設定する方法
特定のフィールドでも同じことができます。 ブラウザで特定のCSSクラスまたはIDを追跡する代わりに、フォームビルダーに追加するだけです。
フォームビルダーに配置するタグを生成する場合、ID、クラス、またはその両方を作成するための2つのオプションがあることに気付くでしょう。
この例では、 customized-fieldというクラスを作成することを選択しました。 同じ（または同様の）ことを行うと、以下に示すように、新しいID（またはクラス）を使用してそのフィールドだけをスタイル設定できるようになります。
#customized-field {
color: #ffffff;
border: 2px solid #333333;
}
チェックボックスとラジオボタンのカスタムフォームレイアウトを作成する方法
デフォルトでは、チェックボックスと半径は左から右に表示されます。
ただし、個人的な好みや、上から下に表示することが望ましい特定のユースケースのために、以下の2つのオプションのいずれかを使用できます。
チェックボックスまたはラジオボタンを上から下、および左側に表示するには、これを使用します。
.wpcf7-list-item {
display: block;
}
チェックボックスとラジオボタンを上から下、および右側に表示するには、これを使用します。 また、このオプションのタグを生成するときは、必ず「最初にラベルを付ける」チェックボックスを選択してください。
.wpcf7-list-item {
display: table-row;
}
.wpcf7-list-item * {
display: table-cell;
}
ボーナスのヒント：フィールドタイトルを削除し、代わりにプレースホルダーテキストを使用する方法
このヒントでは、上記の他のヒントのようにCSSを使用する必要はありませんが、Contact Form7フォームビルダーで使用されるマークアップを簡単に調整する必要があります。
フィールドのタイトルが不要な場合もあります。特に、フィールド自体の中に、そこに属する情報を説明するプレースホルダーテキストを配置できる場合はそうです。
それがあなたのサイトに当てはまる場合、あなたがしなければならないのは、フォームビルダーでタイトルを削除し、以下の例で行ったようにプレースホールディングテキストを追加することだけです。
<p></p> <p>[email* your-email placeholder "Email Address"]</p> <p></p> <p>[textarea your-message placeholder "Talk to me"]</p>
その結果、すっきりとした形になり、すっきりします。
結論は
上記の例で、Contact Form7プラグインが高度にカスタマイズ可能であることを示したことを願っています。 確かに、それは少しいじくり回す必要がありますが、期待されるかもしれない無料のプラグインのために。
デフォルトでスタイリングオプションがないことが、プラグインが非常に多くの人にとって非常にうまく機能する理由の大きな部分だと思います。 したがって、上記のコード例の1つのバージョンをドロップするために、より多くのスタイルを数分コミットしたい人が、そこから多くの価値を得るのは公正なことです。
お問い合わせフォーム7スタイルのヒントはありますか？ 共有したいお気に入りはありますか？ 以下のコメントに私たちに連絡してください！
DmitryLemon5ky経由の記事サムネイル//shutterstock.com