WordPressのフォームの外観をカスタマイズしたいですか？WPFormsでは、カスタムCSSクラスとスタイルを簡単に追加して、フォームの外観を思い通りにすることができます。
このチュートリアルでは、カスタム CSS クラスを追加して特定のフォーム要素をスタイル設定する方法と、WordPress サイトにカスタム CSS を追加する方法を紹介します。
注：CSSの初心者には、CSSでフォームをスタイリングするための初心者ガイドが最適です。
CSSクラスとは？
CSSクラスは、ウェブサイト上でスタイルを設定したい要素に的を絞る方法です。
WPFormsでは、フィールドにはいくつかのCSSクラスが自動的に割り当てられます。例えば、フィールドに フィールドサイズ の 大型を指定すると、CSSクラス wpforms-field-large.
カスタムCSSクラスを追加することで、特定のフォームフィールドをターゲットにしたり、複数のフィールドに同じスタイルを適用したりすることが簡単にできます。
注:フォームをスタイリングしたいが、カスタム CSS クラスを使ったりコードを書いたりしたくない場合は、フォームのスタイリング・チュートリアルをご覧ください。
WPFormsにカスタムCSSクラスを追加する
WPFormsでは、個々のフォームフィールド、送信ボタン、またはフォームの周りのコンテナに独自のカスタムCSSクラスを追加することができます。
個々のフォームフィールドにCSSクラスを追加する
フォームフィールドにカスタムCSSクラスを追加するには、新しいフォームを作成するか、既存のフォームを編集する必要があります。
フォームビルダーのプレビューパネルで、フィールドをクリックしてフィールドオプションを開きます。次に、Advancedタブを開き、CSS Classesというフィールドを探します。
CSSクラスに名前を付けるときは、アルファベットか数字のみを使用し、スペースは使用できません。クラス名は大文字と小文字を区別しますので、小文字を使うことをお勧めします。クラス名に複数の単語を含めたい場合は、スペースの代わりにハイフン（-）またはアンダースコア（_）を入れてください。
問題を避けるために、クラス名は必ずアルファベットで始めること。
この例では、CSSクラス名を wpf-blue-background.
追加することで wpf- をクラスの先頭に追加することで、サイトのテーマがすでに使用しているクラス名を追加する可能性が低くなります。これにより、スタイルの衝突を避け、スタイルがうまく適用される可能性が高くなります。
準備ができたら wpf-blue-background CSSクラスを CSSクラス フィールドにいる。
必要であれば、このフィールドにクラスを追加することもできます。その場合は、各クラス名の間にスペースを追加するだけです。例えば
wpf-blue-background wpf-bold-font wpf-xl-margin
注：CSS Classesフィールドは、フォームフィールドをマルチカラムレイアウトで表示したり、モバイルでシングルカラムレイアウトとして表示するためにも使用できます。
フォームコンテナや送信ボタンにCSSクラスを追加する
スタイルによっては、フォームのコンテナやサブミットボタンをターゲットにすると便利です。
たとえば、サイトのすべての登録フォームの送信ボタンはあるスタイルにし、一般的な連絡先フォームの送信ボタンは別のスタイルにしたいとします。これを実現する簡単な方法は、同じスタイルにしたい送信ボタンに同じ CSS クラスを追加することです。
どちらのオプションにもカスタム CSS クラス名を追加するには、フォームビルダーを開き、設定 " 一般に進みます。ここから詳細設定セクションに移動すると、フォーム CSS クラスと 送信ボタン CSS クラスのフィールドが表示されます。
複数のクラス名を追加したい場合は、それぞれをスペースで区切ってください。
注：必要であれば、組み込みのフォームCSSクラスを使ってフォームを1行で表示することができます。
サイトのCSSスタイルの作成と追加
フォームのフィールドにカスタムCSSクラスを追加したので、適用したいスタイルを作成できます。
CSSスタイルの作成
CSSは、豊富なスタイリングオプションを備えた強力なツールです。CSSの作成方法については、初心者向けCSSガイドをご覧ください。
この例では、クラス wpf-blue-background.CSS 内でクラス名を指定する場合は、必ずピリオド (.) で始める必要があります。 .wpf-blue-background.
すでに多くのスタイルがフォームに適用されているので、CSSをより特殊なものにするのもいい考えです。そのためには、単に .wpforms-form をカスタム・クラス名の前に置く。
これが例のCSSだ：
.wpforms-form .wpf-blue-background {
background-color: #d1effd;
}
カスタム・スタイルがうまく適用されない場合は、セミコロンの前に!
注: !importantの使用は、スタイルが適用されていない場合にのみ必要です。CSSのトラブルシューティングに詳細があります。
WordPressサイトにCSSを追加する
あなたのサイトにカスタムCSSを追加する迅速かつ簡単な方法の一つは、WordPressのテーマカスタマイザーを使用することです。これは、ほとんどすべてのテーマで利用可能で、ライブプレビューエリアがあるため、人気のあるオプションです。
テーマカスタマイザーのCSSエリアにアクセスするには、外観 " カスタマイズに行き、追加CSSと書かれたタブを選択します。
次に、カスタムCSSスニペットを追加します。準備ができたら、Publishをクリックします。
CSSクラスとCSSスタイルが適用されたフォームの例を以下に示します：
注：カスタムスタイルが表示されない？最も一般的な問題と解決策については、CSSのトラブルシューティングガイドをご覧ください。
テーマを変更しても一貫性のあるカスタムCSSを追加するもう一つの方法は、WPCodeを使用することです。WPCodeを使用してカスタムCSSを適用する方法については、事前に作成されたCSSコードスニペットのライブラリの使用も含め、コードスニペットの使用に関するガイドをご覧ください。
CSSを追加するその他の方法をご覧になりたい場合は、WPBeginnerのWordPressにカスタムCSSを追加する方法のチュートリアルをご覧ください。
以上です！これで、カスタムCSSクラスを追加して、フォームの特定の部分にスタイルを設定できるようになりました。
組み込みフォームスタイルの表示と変更もご希望ですか?個々のフォームフィールドのカスタマイズに関するチュートリアルをご覧ください。