AI要約
WordPressフォームの外観と雰囲気を簡単にカスタマイズしたいですか？ WPFormsのフォームスタイリング機能を使用すると、CSSを記述せずにフォームをスタイル設定できます。
このチュートリアルでは、ブロックエディターでWPFormsのビジュアルビルダーを使用してフォームをスタイルする方法を説明します。
要件: ブロックエディターでフォームをスタイルするには、以下のものが用意されている必要があります。
- WordPress バージョン 6.0 以降
- ブロックエディターまたはフルサイト編集機能付きテーマ
開始する前に、WPFormsがWordPressサイトにインストールおよび有効化されており、ライセンスが検証済みであることを確認してください。
モダンマークアップの有効化
WPFormsのモダンマークアップには、アクセシビリティの向上と、ブロックエディターでのフォームのビジュアルカスタマイズが可能になるという利点があります。
フォームのスタイリングを有効にするには、WPFormsの設定ページからモダンマークアップを有効にする必要があります。これを行うには、WPForms » 設定に移動し、一般タブを選択します。
次に、一般セクションまでスクロールし、フォームスタイリングを含めるオプションが基本およびフォームテーマのスタイリングに設定されていることを確認します。
その後、モダンマークアップを使用するチェックボックスをオンにして有効にします。
このオプションを有効にした後は、必ず変更を保存してください。
フォームのカスタマイズ
モダンマークアップオプションを有効にした後、新しいフォームを作成し、フォームをページまたは投稿に追加します。
ブロックエディターで、フォームをクリックしてWPFormsブロックの追加オプションを開きます。
WPFormsブロックの設定では、CSSを記述せずに、カラーテーマ、フォームフィールド、ラベル、ボタン、コンテナおよび背景スタイルをカスタマイズするためのオプションが見つかります。また、高度な設定セクションには、あるフォームから別のフォームにスタイル設定をコピーするための追加オプションもあります。
これらの各オプションについては、以下で詳しく説明します。
テーマ
テーマ設定では、定義済みのカラーテーマを選択して、フォームのフィールド、ラベル、ボタン、コンテナ、および背景のスタイルを自動的に更新できます。
適用するには、好みのテーマをクリックするだけで、フォームのフィールド、ラベル、ボタン、コンテナ、または背景の色が即座に調整されます。
テーマを選択した後に個々の設定をカスタマイズした場合、これらの変更は新しいカスタムフォームテーマとして保存されます。この新しいテーマは、利用可能なテーマのリストに追加され、他のフォームテーマと同様に任意のフォームに適用できます。
このテーマを簡単に識別できるように、テーマ名フィールドで名前を変更することもできます。
カスタムフォームテーマを削除するには、テーマ名の横にあるテーマを削除というテキストをクリックするだけです。
フィールドスタイル
フィールドスタイルセクションでは、フォームフィールドのサイズ、境界線、境界線の太さ、境界線の半径、および色を調整するためのオプションがあります。以下に、利用可能なフィールドオプションを説明します。
- サイズ：フォームフィールドの全体的なサイズを調整します。オプションには、小、中、および大があります。
- 境界線：この設定では、フォームフィールドに境界線を追加または削除できます。オプションには、実線、破線、または点線の境界線があります。
- 境界線のサイズ: フィールド境界線の太さを設定します。デフォルトの単位はピクセル（px）ですが、デザインのニーズに最適な単位を選択できます。
- 境界線の半径: これを使用して、フォームフィールドに角丸を適用し、より柔らかくモダンな外観にします。デフォルトの単位はピクセル（px）ですが、好みの単位に変更できます。
次に、色設定があります。これにより、フィールドの背景、境界線、テキスト、およびドロップダウンメニューの色を更新できます。
特定の色のオプションをクリックすると、利用可能なテーマカラーが表示されたオーバーレイが表示されます。
カラーオプションをクリックすると、カラーピッカーが開きます。
既にフォームで使用したいブランドカラーがある場合は、その16進数カラーコードを16進数フィールドに貼り付けてください。
ラベルスタイル
ラベルスタイルセクションでは、フォームラベルのサイズと色を更新するオプションがあります。利用可能なサイズオプションには、小、中、大があります。
カラーセクションでは、ラベル、サブラベル、およびエラーメッセージの色を更新するオプションがあります。以下に、利用可能なラベルカラーオプションについて説明します。
- ラベル: このオプションは、メインフィールドラベルのテキストの色を制御します。
- サブラベルとヒント: このオプションは、WPFormsがフロントエンドでユーザーに値を提案するときに表示されるフィールドサブラベルとヒントの色を制御します。
- エラーメッセージ: ユーザーがフォームに入力する際にエラーが発生した場合に表示されるテキストの色。
ボタンのスタイル
ボタンのスタイル設定を使用すると、ボタンのサイズ、境界線、境界線のサイズ、境界線の半径、および色を変更できます。以下に、利用可能なボタンオプションについて説明します。
- サイズ: このオプションは、ボタンのサイズを設定します。オプションには、小、中、大があります。
- 境界線: この設定により、ボタンを実線、破線、または点線の境界線でアウトライン表示できます。
- 境界線のサイズ: ボタン境界線の太さを設定します。デフォルトの単位はピクセル（px）ですが、デザインのニーズに最適な単位を選択できます。
- 境界線の半径: これにより、ボタンの角の丸みを調整して、より柔らかくまたはシャープな外観にします。ピクセル（px）が標準単位ですが、デザインの好みに応じて切り替えるオプションがあります。
カラーパネルでは、ボタンの背景色とテキスト色を更新するオプションがあります。
コンテナースタイル
コンテナのスタイル設定を使用すると、フォームコンテナのパディング、境界線のスタイル、境界線のサイズ、境界線の半径、影、および色をカスタマイズできます。以下に、利用可能なコンテナオプションを詳しく説明します。
- パディング: このオプションは、フォームコンテナの境界線の内側のスペースを設定します。この値を増減して、フォームコンテンツの周りの間隔を調整できます。
- 境界線のスタイル: この設定では、コンテナのアウトラインを選択できます。実線、破線、または点線の境界線オプションがあります。
- 境界線の太さ: コンテナの境界線の太さを決定します。デフォルトの単位はピクセル（px）ですが、デザインのニーズに最適な単位を選択できます。
- 境界線の半径: コンテナの角の丸みを調整し、フォームの外観に柔らかい、またはよりはっきりしたエッジを追加します。デフォルトの測定単位はピクセル（px）ですが、スタイルに合わせて変更できます。
- 影: コンテナの影の効果のサイズを選択して、フォームのデザインに奥行きを追加します。オプションは「なし」から「大」まであります。
- 色: コンテナの境界線の色を更新して、ビジュアルテーマに合わせ、フォーム全体の美観を高めます。
背景スタイル
背景スタイルの設定により、フォームの背景画像と色を制御できます。
開始するには、画像ドロップダウンメニューから画像ソースを選択します。ウェブサイトに既にアップロードされている画像、または新しい画像をアップロードするには、メディアライブラリオプションを選択します。より幅広いプロフェッショナルな画像を選択するには、ストックフォトオプションを選択します。
選択後、画像を選択ボタンをクリックして続行します。
画像ドロップダウンからメディアライブラリを選択した場合、ウェブサイトのメディアギャラリーが開き、画像を選択するか新しい画像をアップロードできます。ストックフォトが選択された場合、フォームの背景として選択できるストックフォトのセレクションが表示されます。
画像を選択したら、背景スタイルセクションで追加のカスタマイズオプションが提供されます。
- 位置: この設定では、上部中央、下部中央などのオプションを選択して、フォーム内の背景画像を配置し、最適な配置を取得できます。
- 繰り返し: 背景画像の繰り返し方法を選択します。オプションは、単一の画像の場合は繰り返しなし、背景全体に画像を繰り返す場合はタイル、幅全体に繰り返す場合は水平繰り返し、長さ方向に繰り返す場合は垂直繰り返しです。
- サイズ: フォーム内の背景画像のフィット感を調整します。カバーは、画像がフォームのサイズに合わせて、背景全体をカバーすることを保証します。寸法が選択された場合、画像の正確な幅と高さを指定できます。
- 色：このオプションを使用すると、画像が使用されていない場合に表示される背景色を選択できます。
高度なスタイリング
高度な設定セクションでは、コピー/ペースト スタイル設定の下にあるフォームに追加したすべてのスタイルを含むCSSコードが表示されます。
このオプションを使用すると、あるフォームから別のフォームにスタイルをコピーできます。
別のフォームからスタイル設定をコピーした場合、ここにすばやく貼り付けることができます。コードスニペットを貼り付けると、フォームは前のフォームのスタイルを使用します。
フォームに追加したカスタマイズをリセットしたい場合は、スタイル設定をリセットボタンをクリックしてください。これにより、フォームはカスタムスタイルなしの元の状態に復元されます。
追加のCSSクラスボックスに、作成したカスタムCSSクラスをオプションで追加できます。詳細については、カスタムCSSクラスの追加に関するチュートリアルをご覧ください。
フォームのスタイル設定が完了したら、ページを公開するか下書きとして保存することで、変更を保存してください。
フォームのテスト
最後のステップは、フォームが期待どおりに見え、機能することを確認するために簡単なテストを実行することです。
テストするには、フォームにエントリを送信するだけです。詳細については、完全なフォームテストチェックリストをご覧ください。
よくある質問
以下に、ブロックエディターでフォームをスタイリングすることに関してよく受ける質問のいくつかに回答します。
お知らせ！このドキュメントのFAQの一部にはPHPコードが含まれており、開発者向けです。このコードは便宜上提供しますが、コードのカスタマイズやサードパーティの開発についてはサポートを提供していません。
サイトにカスタムコードを追加する簡単な方法をご希望の場合は、WPBeginnerのWPCodeの使用方法ガイドを参照してください。
モダンマークアップの使用オプションが見つかりません。WPFormsでモダンマークアップを有効にするにはどうすればよいですか？
WPFormsプラグインをバージョン1.8.1に更新する前にウェブサイトに少なくとも1つのフォームがあったユーザーは、モダンマークアップオプションが表示されます。
WPFormsプラグインをWordPressサイトにインストールしたばかりの場合、設定ページにモダンマークアップの使用オプションは表示されません。サイトはデフォルトでモダンマークアップを使用するように設定されます。
このオプションを設定ページに表示したい場合は、次のコードスニペットをサイトに追加する必要があります。
WPFormsにモダンマークアップの使用を強制するにはどうすればよいですか？
非推奨のクレジットカードフィールドを使用しているためにモダンマークアップを有効にできない場合は、カスタムフィルターを追加することでこの制限を回避できます。WPFormsにモダンマークアップオプションを強制的に有効にするには、次のコードスニペットをウェブサイトに追加してください。
コードを追加した後、WPFormsの設定ページからモダンマークアップを有効/無効にできるようになります。
ブロックエディターで利用できないスタイル変更を行うにはどうすればよいですか？
ブロックエディターで利用できないフォームのスタイルをさらに変更したい場合は、CSS Heroを使用できます。このプラグインを使用すると、コードを書かずにサイトの外観をフロントエンドで変更できます。
または、CSSでフォームをスタイル設定したい場合は、WPCodeを使用してカスタムスタイルをサイトに追加することをお勧めします。
これで完了です！WPFormsとブロックエディターを使用して、WordPressフォームの外観をカスタマイズする方法がわかりました。
次に、アイコンを使用してフォームの表示を改善したいですか？アイコンの選択肢の使用方法に関するチュートリアルを確認して、方法を学んでください。