フォームのスタイリング

WordPressフォームの外観と雰囲気を簡単にカスタマイズしたいですか？ WPFormsのフォームスタイリング機能を使用すると、CSSを記述せずにフォームをスタイル設定できます。

このチュートリアルでは、WPFormsのフォームビルダーでフォームをスタイル設定する方法を説明します。

---

フォームテーマのカスタマイズ

開始するには、まず 新しいフォームを作成 するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。

フォームビルダーを開いたら、設定 » テーマに移動して、フォームのカスタマイズ設定にアクセスします。

左側には、CSSを記述せずに、カラーテーマ、フォームフィールド、ラベル、ボタン、コンテナ、および背景スタイルをカスタマイズするためのオプションがあります。

右側のプレビューセクションには、一般的なフィールドを使用したサンプルレイアウトが表示されるため、スタイル変更がどのように表示されるかをすぐに確認できます。

以下で、利用可能な各オプションについて詳しく説明します。

テーマ

テーマ設定では、定義済みのカラーテーマを選択して、フォームのフィールド、ラベル、ボタン、コンテナ、および背景のスタイルを自動的に更新できます。

適用するには、好みのテーマをクリックするだけで、フォームのフィールド、ラベル、ボタン、コンテナ、または背景の色が即座に調整されます。

テーマを選択した後に個々の設定をカスタマイズした場合、これらの変更は新しいカスタムフォームテーマとして保存されます。この新しいテーマは、利用可能なテーマのリストに追加され、他のフォームテーマと同様に任意のフォームに適用できます。

フィールドスタイル

フィールドスタイルセクションでは、フォームフィールドのサイズ、境界線、境界線の太さ、境界線の半径、および色を調整するためのオプションがあります。以下に、利用可能なフィールドオプションを説明します。

• サイズ：フォームフィールドの全体的なサイズを調整します。オプションには、小、中、および大があります。
• 境界線：この設定では、フォームフィールドに境界線を追加または削除できます。オプションには、実線、破線、または点線の境界線があります。
• 境界線のサイズ: フィールド境界線の太さを設定します。デフォルトの単位はピクセル（px）ですが、デザインのニーズに最適な単位を選択できます。
• 境界線の半径: これを使用して、フォームフィールドに角丸を適用し、より柔らかくモダンな外観にします。デフォルトの単位はピクセル（px）ですが、好みの単位に変更できます。

次に、フォームフィールドの 背景、 境界線、および テキスト の色を更新するオプションがあります。

色を変更するには、対応するラベルをクリックしてカラーピッカーを開きます。視覚的に色を選択するか、特定の16進コードを入力して正確に制御できます。

ラベルスタイル

ラベルのスタイルセクションでは、フォームラベルのサイズを更新するオプションがあります。利用可能なサイズオプションには、小、中、大があります。

ラベル、サブラベル、およびエラーメッセージの色を更新するオプションもあります。以下に、利用可能なラベルの色オプションについて説明します。

• ラベル: このオプションは、メインフィールドラベルのテキストの色を制御します。
• サブラベルとヒント: このオプションは、WPFormsがフロントエンドでユーザーに値を提案するときに表示されるフィールドサブラベルとヒントの色を制御します。
• エラーメッセージ: ユーザーがフォームに入力する際にエラーが発生した場合に表示されるテキストの色。

ボタンのスタイル

ボタンのスタイル設定を使用すると、ボタンのサイズ、境界線、境界線のサイズ、境界線の半径、および色を変更できます。以下に、利用可能なボタンオプションについて説明します。

• サイズ: このオプションは、ボタンのサイズを設定します。オプションには、小、中、大があります。
• 境界線: この設定により、ボタンを実線、破線、または点線の境界線でアウトライン表示できます。
• 境界線のサイズ: ボタン境界線の太さを設定します。デフォルトの単位はピクセル（px）ですが、デザインのニーズに最適な単位を選択できます。
• 境界線の半径: これにより、ボタンの角の丸みを調整して、より柔らかくまたはシャープな外観にします。ピクセル（px）が標準単位ですが、デザインの好みに応じて切り替えるオプションがあります。

ボタンの背景色とテキストの色を更新するオプションもあります。

コンテナースタイル

コンテナのスタイル設定を使用すると、フォームコンテナのパディング、境界線のスタイル、境界線のサイズ、境界線の半径、影、および色をカスタマイズできます。以下に、利用可能なコンテナオプションを詳しく説明します。

• パディング: このオプションは、フォームコンテナの境界線の内側のスペースを設定します。この値を増減して、フォームコンテンツの周りの間隔を調整できます。
• 境界線のスタイル: この設定では、コンテナのアウトラインを選択できます。実線、破線、または点線の境界線オプションがあります。
• 境界線の太さ: コンテナの境界線の太さを決定します。デフォルトの単位はピクセル（px）ですが、デザインのニーズに最適な単位を選択できます。
• 境界線の半径: コンテナの角の丸みを調整し、フォームの外観に柔らかい、またはよりはっきりしたエッジを追加します。デフォルトの測定単位はピクセル（px）ですが、スタイルに合わせて変更できます。
• 影: コンテナの影の効果のサイズを選択して、フォームのデザインに奥行きを追加します。オプションは「なし」から「大」まであります。
• 色: コンテナの境界線の色を更新して、ビジュアルテーマに合わせ、フォーム全体の美観を高めます。

背景スタイル

背景スタイルの設定により、フォームの背景画像と色を制御できます。

開始するには、画像ドロップダウンメニューから画像ソースを選択します。ウェブサイトに既にアップロードされている画像、または新しい画像をアップロードするには、メディアライブラリオプションを選択します。より幅広いプロフェッショナルな画像を選択するには、ストックフォトオプションを選択します。

選択後、画像を選択ボタンをクリックして続行します。

画像ドロップダウンからメディアライブラリを選択した場合、ウェブサイトのメディアギャラリーが開き、画像を選択するか新しい画像をアップロードできます。ストックフォトが選択された場合、フォームの背景として選択できるストックフォトのセレクションが表示されます。

画像を選択したら、背景スタイルセクションで追加のカスタマイズオプションが提供されます。

• 位置: この設定では、上部中央、下部中央などのオプションを選択して、フォーム内の背景画像を配置し、最適な配置を取得できます。
• 繰り返し: 背景画像の繰り返し方法を選択します。オプションは、単一の画像の場合は繰り返しなし、背景全体に画像を繰り返す場合はタイル、幅全体に繰り返す場合は水平繰り返し、長さ方向に繰り返す場合は垂直繰り返しです。
• サイズ: フォーム内の背景画像のフィット感を調整します。カバーは、画像がフォームのサイズに合わせて、背景全体をカバーすることを保証します。寸法が選択された場合、画像の正確な幅と高さを指定できます。
• 色：このオプションを使用すると、画像が使用されていない場合に表示される背景色を選択できます。

高度なスタイリング

高度な設定タブには、フォームをさらにスタイル設定するための便利なオプションが2つあります。

• カスタムCSSボックスを使用すると、独自のCSSクラスを追加してさらにカスタマイズできます。詳細については、カスタムCSSクラスの追加に関するチュートリアルをご覧ください。
• スタイル設定のコピー/貼り付けセクションには、フォームビルダーで適用したすべてのスタイルのCSSコードが表示されます。このコードをコピーして、別のフォームで同じスタイルを再利用できます。

フォームのスタイル設定が完了したら、必要に応じてフィールドの編集を続けることができます。完了したら、保存をクリックし、次にプレビューボタンを使用して、適用されたスタイルで実際のフォームを確認します。

フォームのテスト

最後のステップは、フォームが期待どおりに見え、機能することを確認するために簡単なテストを実行することです。

テストするには、フォームにエントリを送信するだけです。詳細については、完全なフォームテストチェックリストをご覧ください。

よくある質問

以下に、フォームのスタイル設定に関してよく受ける質問のいくつかに回答します。

フォームを異なるページに埋め込んだ場合、スタイルは保持されますか？

はい。WPFormsビルダーでフォームをスタイル設定すると、その設定はフォームとともに保存され、フォームが埋め込まれているすべての場所でデフォルトで適用されます。

フォームを埋め込む際にブロックエディターまたはElementorを使用して追加のスタイル変更を適用した場合、その変更はその特定のページにのみ影響します。元のビルダーのスタイルは、他のすべてのインスタンスで変更されません。

これにより、サイト全体で同じフォームを使用しながら、必要に応じてページごとに外観をカスタマイズできます。

Diviのようなページビルダーでフォームビルダーのスタイル設定オプションを使用できますか？

はい。WPFormsフォームビルダー（設定 » テーマ）で利用可能なスタイル設定オプションは、フォームとともに保存され、Divi、Elementor、またはその他のページビルダーで構築されたページを含む、埋め込まれているすべての場所に適用されます。追加の設定は不要です。

代わりにブロックエディターを使用してフォームをスタイル設定したい場合は、最新のマークアップが有効になっている必要があります。詳細については、ブロックエディターでフォームをスタイル設定する方法をご覧ください。ブロックエディターのスタイル設定オプションは、WordPressブロックエディターまたはElementorを使用している場合にのみ利用可能であり、Diviのビジュアルビルダー内からはアクセスできません。

これで完了です！WPFormsを使用してWordPressフォームの外観と感触をカスタマイズする方法がわかりました。

次に、アイコンを使用してフォームの表示を改善したいですか？アイコンの選択肢の使用方法に関するチュートリアルを確認して、方法を学んでください。