AI要約
WordPressサイトで視覚的に魅力的で使いやすいフォームを作成するために、ブロックエディターでWPFormsをスタイリングしたいとお考えですか？
WPFormsは、直感的なプラグインであり、フォームの作成と管理を簡素化しながら、広範なカスタマイズオプションを提供します。ブロックエディターを活用することで、ユーザーエクスペリエンスを向上させるためにフォームを簡単にスタイリングできます。
このステップバイステップのチュートリアルに従って、ブロックエディターを使用してWPFormsのスタイリングをマスターし、サイト全体の機能を強化してください。
フォームをスタイリングする必要があるのはなぜですか？
フォームをスタイリングすることで、ウェブサイトの美観を高め、ユーザーエクスペリエンスの向上に貢献できます。フォームのスタイリングがウェブサイトにとって不可欠であるその他の主な理由は次のとおりです。
- 一貫したブランディング：ウェブサイトのデザインや配色に合わせてブランド化されたフォームを作成することで、一貫したブランドイメージを確保できます。
- 優れたユーザーエクスペリエンス：適切に設計されたフォームは、ユーザーが必要な情報を簡単にナビゲート/送信できるようにし、フォーム完了率を高めます。
- レスポンシブデザイン：適切にスタイリングされたフォームは、さまざまな画面サイズやデバイスに簡単に適応し、すべての訪問者にとってスムーズなユーザーエクスペリエンスを保証します。
- コンバージョン率の向上： 視覚的に魅力的なフォームは、ユーザーの注意を引き、ニュースレターへの登録、購入、問い合わせの送信など、目的のアクションを完了するように促すことができます。
- アクセシビリティの向上： 明確なラベル、適切な間隔、コントラストの高い色でフォームをスタイリングすることで、視覚障害のあるユーザーのアクセシビリティを向上させ、より幅広いオーディエンスに対応するウェブサイトを確保できます。
WPFormsのスタイリングの重要性を理解したところで、ブロックエディターを使用してフォームを効果的にスタイリングし、WPFormsプラグインを最大限に活用するためのステップバイステッププロセスを見ていきましょう。
ブロックエディターを使用してWPFormsをスタイル設定する方法
カスタムCSSを記述することなく、Gutenbergブロックエディターを使用してWPFormsをスタイリングする方法を学ぶには、これらの手順に従ってください。
ステップ1：WPFormsをインストールして有効化する
WPFormsは、Webサイトでのフォームの作成と管理のプロセスを簡素化します。このプラグインは、コーディングの知識なしに、問い合わせフォーム、アンケート、投票、登録フォームなど、さまざまなフォームを簡単に作成でき、2,100以上の既製のテンプレートから開始できます。
WPFormsのスタイリングで最も気に入っている点は、編集中のフォームのすぐ隣、ブロックサイドバーにすべてのコントロールが配置されていることです。境界線の半径やボタンの色を変更すると、フォームはリアルタイムで更新されるため、保存、リフレッシュ、確認のループに陥ることはありません。
これらの機能を使用するために有料ライセンスは必要ありません。フォームのスタイリングと40以上のテーマの全ライブラリは、無料版のWPForms Liteで利用できるため、このガイドのすべての手順は、LiteまたはProのどちらを使用していても同じように機能します。
WPFormsの使用を開始するには、WordPressサイトにプラグインをインストールする必要があります。アクティブ化したら、以下の簡単な手順に従ってフォームのスタイリングを作成およびカスタマイズしてください。
ステップ2：フォームの作成またはテンプレートの使用
フォームの作成を始めましょう！WordPressダッシュボードから、WPFormsに移動し、新規追加ボタンをクリックします。
プロンプトが表示されたら、フォームの目的に合った名前を付けます。次に、既存のテンプレートを選択するか、空白のフォームを作成するオプションがあります。
次に、WPFormsは直感的なフォームビルダーインターフェイスを開きます。ここで、フォームフィールドを追加、編集、削除、または再配置してフォームをカスタマイズできます。
フォームフィールドの設定が完了したら、誰かがフォームに記入して送信ボタンを押したときに通知を受け取るように、メール通知を設定する必要があります。
フォーム送信後にユーザーが表示する確認メッセージを設定して、ユーザーエクスペリエンスを向上させることもできます。
次のステップに進む前に、フォームの設定を保存して進捗の損失を防ぎます。画面上部にある保存ボタンをクリックしてください。
ステップ3：モダンマークアップの有効化
ブロックエディター内でフォームのアクセシビリティを強化し、視覚的なカスタマイズを可能にするために、WPFormsはモダンマークアップを提供しています。
WPFormsでモダンマークアップを有効にするには、WPForms » 設定に移動し、一般タブを選択します。
一般セクションまでスクロールすると、ブロックエディタのスタイリングをオンにする2つの設定があります。まず、フォームのインクルードスタイリング設定で、基本とフォームテーマのスタイリングに設定します。
これは、スタイリングコントロールが依存するCSSを読み込むオプションであり、これより狭い値に設定すると、変更がブロックエディタに表示されないか、フロントエンドに引き継がれません。
次に、モダンマークアップの使用オプションを有効にします。これを有効にすると、ブロックエディタ経由でフォームをスタイリングする準備が整います。ページを離れる前に変更を保存してください。
WPFormsバージョン1.8.1以降では、新規ユーザーに対してモダンマークアップがデフォルトで有効になっており、無効にするオプションは利用できません。
したがって、プラグインの最新バージョンを使用しており、この設定が表示されない場合は、すでに準備ができており、フォームのスタイル設定を開始できます。
モダンマークアップ機能を利用するために、ブロックエディターでフォームのカスタマイズを開始しましょう。まずは、フォームをサイトに埋め込みましょう！
ステップ4：サイトへのフォームの埋め込み
以前に作成したフォームを埋め込むには、既存のページを開くか、新しいページを作成します。ブロックを追加ボタンを探し、WPFormsブロックを検索してください。
ページまたは投稿にWPFormsブロックを挿入した後、ドロップダウンメニューから目的のフォームを選択します。これで、ブロックエディターでフォームのスタイル設定を開始できます！
ステップ5：ブロックエディターからのスタイルの編集
ブロックエディターでWPFormsが含まれるページまたは投稿を開きます。WPFormsブロックをクリックして、追加オプションを開きます。
ブランドの美学に合わせるために、スタイリングテーマ、フォームフィールド、ラベル、ボタン、およびフォームが配置されるコンテナと背景のさまざまなオプションを発見できます。
高度なセクションでは、フォーム間でスタイル設定をコピーすることもできます。これにより、複数のフォームに同じ処理が必要な場合に時間を節約できます。
以下のさまざまなスタイル設定オプションを使用して、フォームの外観をカスタマイズし、ウェブサイトのデザインにすぐに合わせる方法を学びましょう。
テーマ
テーマパネルは、再スタイル設定されたフォームへの最も簡単なルートです。WPFormsには40以上の既製のフォームテーマが付属しており、適用はワンクリックで完了します。
各テーマには独自の色の組み合わせ、境界線、背景、ボタンのスタイリングが含まれているため、1つを選択すると、フィールド、ラベル、ボタン、コンテナ、背景全体の色が変更されます。
コミットする前に確認したい場合は、最初にすべてのテーマを並べて表示できます。テーマを適用してから個々の設定を変更すると、WPFormsはそのバージョンを新しいカスタムテーマとして保存し、テーマリストに追加します。
テーマ名フィールドを使用してカスタムテーマの名前を変更すると、後で区別しやすくなります。不要になったテーマを削除するには、テーマ名の横にあるテーマの削除テキストをクリックします。
フィールドスタイル
WPFormsブロック設定でフィールドスタイルオプションを開きます。ここでは、サイズ、境界線、境界線の太さ、境界線の半径、色のコントロールがあります。
サイズ
フォームフィールドのサイズを調整するには、サイズ設定から目的のサイズを選択します。利用可能なサイズは、小、中、大です。
境界線の半径
フォームフィールドの境界線を調整するには、境界線の半径設定を使用して目的の半径値を設定します。これにより、フォームにきれいで丸いエッジを付けることができます。
デフォルトでは、WPFormsでフォーム要素のサイズ設定の単位はピクセル（px）に設定されています。測定単位をクリックすると、次のようなさまざまなオプションを含むドロップダウンメニューが表示されます。
- ピクセル（PX）
- パーセント（%）
- エエム（EM）
- レム（REM）
- ビューポート幅（VW）
- ビューポートの高さ（VH）
色
フォームフィールドの背景色、境界線の色、テキストの色を調整するには、WPFormsブロック設定の色設定を開きます。
背景色など、更新したい特定の色のオプションをクリックします。選択できるテーマカラーが表示されたオーバーレイが表示されます。
次に、カラー スウォッチをクリックして カラーピッカー を開きます。ここでさらに色を微調整できます。
フォームのブランドカラーが決まっている場合は、16 進数カラー コードを 16 進数ボックスに貼り付けることができます。
ラベルスタイル
ここで ラベルスタイル セクションで、フォームラベルのフォントサイズと色を変更できます。利用可能なサイズは 小 から 大 まであります。
ラベル、サブラベル、およびエラーメッセージの色を更新するには、カラー セクションに移動します。以下に、利用可能なラベルカラーオプションの説明を示します。
- ラベル: この設定は、フィールドのプライマリラベルの色を決定します。
- サブラベルとヒント: この設定は、WPForms がフロントエンドの値の提案を行う際のフィールドサブラベルとヒントに使用される色合いを決定します。
- エラーメッセージ: ユーザーがフォームの入力を誤った場合に表示されるテキストの色。
ボタンのスタイル
WPForms でフォームのボタンのデザインを変更するには、ボタン スタイル に移動します。サイズ の下のドロップダウン メニューをクリックして開き、ボタン サイズを選択します。
ボタンに境界線の半径を与えたい場合は、目的の値を 境界線半径 というラベルのフィールドに入力するだけです。
次に、カラー というラベルのセクションの下に、ボタンの背景色とテキスト色の両方を変更する機会があります。
ほとんどの場合、ボタンの背景色はアクセントカラーとしても機能します。その結果、ボタンの背景色は、チェックボックス、ラジオボタン、プログレスバー、およびフィールドのプライマリカラーとしても使用されます。
コンテナースタイル
コンテナースタイルは、フォーム自体ではなく、フォームが配置されるボックスを管理します。ここで、フォームに適切な余白、明確な境界線、または背後のページから少し浮かせたような効果を与えます。
- パディング: コンテナの境界線の内側のスペース、つまりボックスの端とフォームコンテンツの間のスペースを設定します。フィールドが端に窮屈に感じられる場合は、この値を増やしてください。
- 境界線のスタイル: コンテナを実線、破線、または点線のいずれかのエッジでアウトライン表示します。
- 境界線の太さ: そのアウトラインの太さを決定します。ここでもピクセルがデフォルトであり、同じ単位オプションが適用されます。
- 境界線の半径: コンテナの角を丸めます。値が大きいほど柔らかいカード形状になり、値が小さいほどエッジはシャープになります。
- 影: コンテナの後ろに奥行きを追加します。サイズはなしから大きいまであります。通常、フォームをプレーンな背景から浮き上がらせるには、小さな影で十分です。
- 色: コンテナの境界線の色を設定し、そのエッジがデザインの他の部分と快適に調和するようにします。
背景スタイル
背景スタイルでは、フォームの背後に配置されるものを、フラットな色または画像で制御できます。画像から始めるには、画像ドロップダウンを開き、どこから取得するかを選択します。
メディアライブラリは、ご自身のアップロードを開きます。画像がすでにサイトに存在する場合や、新しい画像をアップロードしたい場合は、こちらを選択してください。ストックフォトは、代わりにプロフェッショナルな画像のライブラリを開きます。
初めてストックフォトを選択すると、WPFormsはストック画像ライブラリのダウンロードを求めるオーバーレイを表示します。その通知で続行をクリックすると、写真の閲覧が可能になります。
選択が完了したら、画像を選択をクリックして実際のファイルを選択します。画像が配置されると、パネルにさらに4つの設定が表示されます。
- 位置: 上中央や下中央などのオプションを使用して、画像をフォーム内で揃えます。これにより、写真のどの部分が表示されるかを制御できます。
- 繰り返し: 画像がどのようにタイル表示されるかを決定します。繰り返しなしは1回表示し、タイルは背景全体に繰り返し表示し、水平繰り返しと垂直繰り返しは単一の軸に沿って繰り返します。
- サイズ: 画像のフィット感を制御します。カバーは、フォームのサイズに関係なく背景を埋めるようにスケーリングし、寸法では正確な幅と高さを入力できます。
- 色: 画像が使用されていない場合に表示される、プレーンな背景色を設定します。
高度なスタイリング
高度な 設定の下で、フォームに適用したすべてのカスタムスタイルを含む CSS コードにアクセスできます。
これらのスタイルを別のフォームに移動したい場合は、スタイル設定をコピーして貼り付けるオプションを探してください。
フォームに行った変更を元に戻したい場合は、スタイル設定をリセット ボタンをクリックします。これにより、フォームはデフォルトのスタイルに戻り、以前のカスタマイズはすべて元に戻されます。
追加の CSS クラス フィールドは、開発した他の CSS クラスを自由に入力できる場所です。詳細については、新しい CSS クラスを実装する方法 ガイドをお読みください。
ステップ6：フォームのテストと公開
次に、ページを発行するか下書きとして保存することで、変更を保存します。最後に、簡単なテストを実行 して、フォームが期待どおりに見え、機能することを確認してください。
ページを保存したら、プレビューをクリックして、スタイルが適用された実際のフォームを確認してください。ブロックエディターはそれに近い表示をしますが、プレビューは訪問者が実際に目にするものを表示します。
ブロックエディターでのWPFormsのスタイル設定に関するFAQ
WPFormsのフォームのスタイリング、モダンマークアップ、フォームテーマに関するよくある質問への回答です。
WPFormsブロックのスタイリングオプションが表示されないのはなぜですか？
これを制御する設定は2つあり、どちらもWPForms » 設定 » 一般の下にあります。フォームスタイリングを含めるは基本とフォームテーマのスタイリングに設定する必要があり、モダンマークアップを使用するを有効にする必要があります。
WPFormsをバージョン1.8.1以降でインストールした場合、モダンマークアップはすでにオンになっており、チェックボックスは表示されません。そのため、まずスタイリング設定を確認してください。
唯一の実際のブロックは、モダンマークアップと互換性のない非推奨のクレジットカードフィールドです。そのため、それを使用しているフォームは、そのフィールドが交換されるまでブロックエディターでスタイル設定できません。
フォームをスタイル設定するためにWPForms Proが必要ですか？
いいえ。フォームのスタイリングと40以上のフォームテーマはすべてWPForms Lite（無料版）で機能するため、このガイドのすべての手順は無料インストールで実行できます。
Proは、支払いアドオン、アンケート、支払い時の条件付きロジックなどの機能を追加しますが、フォームの外観を変更するためにそれらのいずれかが必要になることはありません。
別のページに埋め込んでも、フォームはスタイルを維持しますか？
設定 » テーマの下のWPFormsビルダーで適用されたスタイルはフォームとともに保存され、どこにでも表示されます。ショートコード埋め込み、WPFormsブロック、Diviモジュールをカバーします。ブロックエディターで適用されたスタイルは、その1つの埋め込みのみに残ります。
そのため、ビルダーでフォームを一度スタイル設定してサイト全体で一貫した外観にし、元のスタイルを変更せずに単一のランディングページの色を上書きできます。
ブロックエディターなしでWPFormsをスタイル設定できますか？
はい。WPFormsビルダーには、設定 » テーマの下に同じパネルがあり、そこで設定した内容はすべてサイト全体に適用されます。
Elementorには独自のスタイリングコントロールがあるため、代わりにElementorでフォームをカスタマイズでき、その変更はページに残ります。
Diviは動作が異なります。そのWPFormsモジュールはDivi独自のサイズ設定と間隔設定のみを公開するため、ビルダーでフォームをスタイル設定すると、Diviの埋め込みがそれを取得します。
ブロックエディターで提供されないスタイル変更を行うにはどうすればよいですか？
詳細設定パネルの下にある追加のCSSクラス(es)ボックスに独自のクラスを追加し、それらに一致するCSSを記述します。
上記の詳細スタイリングセクションでリンクされているカスタムCSSガイドは、WPFormsがすでに適用しているクラスをカバーしています。これらがターゲットにしたいものです。
次に、エンゲージメントを高めるインタラクティブなフォームを作成します
WPForms をさらにカスタマイズする方法をお探しですか? これらのフォームを次のレベルに引き上げるヒント をチェックしてください。フォームの外観を強化する場合でも、機能を強化する場合でも、対応しています。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
