WordPress フォームのルック＆フィールを簡単にカスタマイズしたいですか？弊社のフォームスタイリング機能を使えば、CSS を記述することなくフォームをスタイリングできます。
このチュートリアルでは、ブロックエディタでWPFormsビジュアルビルダーを使ってフォームをスタイルする方法を紹介します。
必要条件ブロックエディターでフォームのスタイルを設定するには、以下の環境が必要です：
- ワードプレスバージョン6.0以上
- ブロックエディタまたは完全なサイト編集が可能なテーマ
始める前に、WPFormsがWordPressサイトにインストールされ、有効化されていることを確認し、ライセンスを確認してください。
モダンなマークアップを可能にする
WPFormsのモダンなマークアップはアクセシビリティの向上を含み、ブロックエディタでフォームを視覚的にカスタマイズできます。
フォームのスタイリングを有効にするには、WPForms の設定ページからモダンマークアップを有効にする必要があります。そのためには、WPForms " Settingsに行き、Generalタブを選択します。
次にGeneralセクションまでスクロールし、Include Form StylingオプションがBase and form theme styling に設定されていることを確認します。
その後、Use Modern Markupチェックボックスをチェックして有効にします。
このオプションを有効にしたら、必ず変更を保存してください。
フォームのカスタマイズ
モダンマークアップオプションを有効にした後、新しいフォームを作成し、そのフォームをページまたは投稿に追加します。
ブロックエディタで、WPFormsブロックの追加オプションを開くためにフォームをクリックします。
WPForms ブロックの設定では、CSS を記述せずにカラーテーマ、フォームフィールド、ラベル、ボタン、コンテナと背景のスタイルをカスタマイズするオプションが見つかります。また、高度なセクションでフォームから別のフォームにスタイル設定をコピーするための追加オプションも見つかります。
以下、それぞれのオプションについて詳しく説明する。
テーマ
テーマ設定では、定義済みのカラーテーマを選択し、フォームのフィールド、ラベル、ボタン、コンテナ、背景のスタイルを自動的に更新することができます。
適用するには、お好みのテーマをクリックするだけで、フォームのフィールド、ラベル、ボタン、コンテナ、または背景の色が即座に調整されます。
テーマを選択した後に個々の設定をカスタマイズした場合、その変更は新しいカスタムフォームテーマとして保存されます。この新しいテーマは利用可能なテーマのリストに追加され、他のフォームテーマと同じように任意のフォームに適用することができます。
また、テーマ名フィールドから、識別しやすいようにこのテーマの名前を変更することもできます。
カスタムフォームテーマを削除するには、テーマ名の横にある「テーマの削除」をクリックします。
フィールドスタイル
フィールドスタイルセクションの下に、フォームフィールドのサイズ、ボーダー、ボーダーサイズ、ボーダー半径、色を調整するオプションがあります。以下に利用可能なフィールドオプションを説明します。
- サイズフォームフィールドの全体的なサイズを調整します。オプションには小、中、大があります。
- ボーダーこの設定により、フォームフィールドにボーダーを追加または削除することができます。オプションには実線、破線、点線のボーダーがあります。
- ボーダーサイズ：フィールドのボーダーの太さを設定します。デフォルトの単位はピクセル（px）ですが、デザインのニーズに最も適した単位を選択することができます。
- ボーダー半径：フォームフィールドの角を丸くし、ソフトでモダンな外観にします。デフォルトの単位はピクセル(px)ですが、お好みの単位に変更できます。
次に、「色」の設定があります。ここでは、フィールドの背景、ボーダー、テキスト、ドロップダウンメニューの色を更新することができます。
特定のカラーオプションをクリックすると、利用可能なテーマカラーのオーバーレイが表示されます。
色見本をクリックしてカラーピッカーを開きます。
フォームに使用したいブランドカラーがすでにある場合は、16進数のカラーコードを16進数フィールドに貼り付けてください。
ラベルスタイル
ラベルスタイルのセクションでは、フォームラベルのサイズと色を更新するオプションがあります。利用可能なサイズオプションには、小、中、大があります。
色」セクションの下に、ラベル、サブラベル、エラーメッセージの色を更新するオプションがあります。以下に、利用可能なラベルの色のオプションを説明します。
- ラベル：このオプションはメインフィールドラベルのテキストカラーをコントロールします。
- サブラベルとヒント:このオプションは、WPFormsがフロントエンドでユーザーに値を提案するときに表示されるフィールドのサブラベルとヒントの色を制御します。
- エラーメッセージユーザーがフォームに入力する際にエラーが発生した場合に表示されるテキストの色です。
ボタンスタイル
ボタンスタイルの設定では、ボタンのサイズ、ボーダー、ボーダーサイズ、ボーダー半径、色を変更することができます。以下に、利用可能なボタンオプションについて説明します。
- サイズこのオプションはボタンのサイズを設定します。オプションにはSmall、Medium、Largeがあります。
- ボーダーこの設定により、実線、破線、または点線のボーダーでボタンの輪郭を描くことができます。
- ボーダーサイズ：ボタンの枠線の太さを設定します。デフォルトの単位はピクセル(px)ですが、デザインのニーズに最も適した単位を選択することができます。
- ボーダー半径：ボタンの角の丸みを調整します。ピクセル(px)が標準単位で、オプションでデザインの好みに応じて切り替えることができます。
Colorsパネルでは、ボタンの背景色と文字色を更新するオプションがあります。
コンテナ・スタイル
コンテナスタイルの設定では、フォームのコンテナのパディング、ボーダースタイル、ボーダーサイズ、ボーダー半径、影、色をカスタマイズすることができます。以下に、利用可能なコンテナオプションの詳細を示します。
- パディング：このオプションは、フォームコンテナの境界線の内側のスペースを設定します。この値を増減することで、フォームのコンテンツ周りの間隔を調整することができます。
- ボーダーのスタイル：この設定では、コンテナの輪郭を選択でき、実線、破線、または点線のボーダーを選択できます。
- ボーダーサイズ：コンテナのボーダーの太さを決定します。デフォルトの単位はピクセル（px）ですが、デザインのニーズに最も適した単位を選択できます。
- ボーダー半径：これは、コンテナの角をどの程度丸めるかを調整し、フォームの外観にソフトまたは明確なエッジを追加します。デフォルトの単位はピクセル (px) ですが、スタイルに合わせて変更することができます。
- シャドウ：コンテナのシャドウ効果の大きさを選択し、フォームのデザインに深みを加えます。
- 色コンテナのボーダーカラーをビジュアルテーマに合わせて更新し、フォーム全体の美観を向上させます。
背景スタイル
背景スタイルの設定では、フォームの背景画像と色をコントロールできます。
はじめに、イメージドロップダウンメニューからイメージソースを選択します。すでにウェブサイトにアップロードされている画像や新しい画像をアップロードするには、メディアライブラリオプションを選択します。より多くのプロフェッショナルな画像をお探しの場合は、ストックフォトオプションを 選択してください。
選択後、Choose Imageボタンをクリックして次に進みます。
イメージ ] ドロップダウンから[メディア ライブラリ ] を選択すると、ウェブサイトのメディア ギャラリーが開き、画像を選択したり、新しい画像をアップロードしたりできます。ストックフォトを選択すると、フォームの背景に使用するストックフォトが表示されます。
画像を選択したら、Background Styles（背景スタイル）セクションでさらにカスタマイズオプションを追加できます：
- 位置：この設定により、Top Center（中央上部）、Bottom Center（中央下部）などのオプションを選択して、フォーム内の背景画像を完璧な位置に配置することができます。
- リピート：背景画像のリピート方法を選択します。オプションは、単一の画像にはリピートなし、背景全体に画像を繰り返すにはタイル、幅方向に繰り返すには水平リピート、縦方向に繰り返すには垂直リピートです。
- サイズ背景画像がフォーム内に収まるように調整します。Coverはフォームのサイズに合わせ、画像が背景全体を覆うようにします。Dimensionsを選択すると、画像の幅と高さを正確に指定できます。
- 色：このオプションでは、画像が使用されていないときに表示される背景色を選択できます。
高度なスタイリング
詳細設定]セクションでは、[スタイル設定のコピー/貼り付け] の下に、フォームに追加したすべてのスタイルを含む CSS コードが表示されます。
このオプションを使うと、あるフォームから別のフォームにスタイルをコピーすることができます。
他のフォームからスタイル設定をコピーした場合は、すぐにここに貼り付けることができます。コードスニペットを貼り付けると、フォームは前のフォームのスタイルを使用するようになります。
フォームに追加したカスタマイズをリセットしたい場合は、スタイル設定のリセットボタンをクリックしてください。これでフォームがカスタムスタイルのない元の状態に戻ります。
オプションで、ADDITIONAL CSS CLASS(ES)ボックスに作成したカスタムCSSクラスを追加することができます。詳しくは、カスタムCSSクラスの追加に関するチュートリアルをご覧ください。
フォームをスタイリングしたら、ページを公開するか下書きとして保存して変更を保存してください。
フォームのテスト
最後のステップは、フォームが期待通りに表示され、動作することを確認するための簡単なテストを実行することです。
テストするには、フォームにエントリーを送信するだけです。詳しくは、フォームテストのチェックリストをご覧ください。
よくある質問
以下では、ブロックエディタでのフォームのスタイリングについて、よく寄せられる質問にお答えします。
注意してください！このドキュメントのFAQにはPHPコードが含まれており、開発者向けの内容となっています。私たちはこのコードを好意で提供していますが、コードのカスタマイズやサードパーティの開発に関するサポートは提供していません。
あなたのサイトにカスタムコードを追加するためのシンプルなアプローチをご希望の場合は、WPBeginner's guide to use WPCodeをご覧ください。
Use Modern Markup オプションが見つかりません。どうすればWPFormsでModern Markupを有効にできますか？
WPFormsプラグインをバージョン1.8.1にアップデートする前に、ウェブサイトに少なくとも1つのフォームを持つユーザは、最新のマークアップオプションを見ることができます。
WordPressサイトにWPFormsプラグインをインストールしたばかりの場合、設定ページにUse Modern Markupオプションは表示されません。あなたのサイトはデフォルトでモダンマークアップを使用するように設定されています。
このオプションを設定ページに表示したい場合は、以下のコード・スニペットをサイトに追加する必要があります。
WPFormsにモダンなマークアップを使わせるには？
非推奨のクレジットカードフィールドを使用することでモダンマークアップを有効にできない場合は、カスタムフィルタを追加することでこの制限を回避できます。WPFormsにモダンマークアップオプションを有効にさせるには、以下のコードスニペットをウェブサイトに追加してください。
コードを追加したら、WPFormsの設定ページからモダンマークアップを有効/無効にできます。
ブロックエディターで使用できないスタイル変更はどうすればできますか？
ブロックエディターではオプションとして利用できない他の変更をフォームのスタイルに加えたい場合は、CSS Heroを使うことができます。このプラグインを使えば、コードを書くことなくフロントエンドでサイトの外観を変更できます。
また、CSSでフォームのスタイルを設定したい場合は、WPCodeを使用してサイトにカスタムスタイルを追加することをお勧めします。
以上です！これでWPFormsとブロックエディタを使ってWordPressのフォームのルック＆フィールをカスタマイズする方法がわかりました。
次に、アイコンを使ってフォームの表示を改善したいですか？その方法については、アイコンの選択に関するチュートリアルをご覧ください。