AI要約
WordPressサイトで視覚的に魅力的で使いやすいフォームを作成するために、ブロックエディターでWPFormsをスタイリングしたいとお考えですか？
WPFormsは、直感的なプラグインであり、フォームの作成と管理を簡素化しながら、広範なカスタマイズオプションを提供します。ブロックエディターを活用することで、ユーザーエクスペリエンスを向上させるためにフォームを簡単にスタイリングできます。
このステップバイステップのチュートリアルに従って、ブロックエディターを使用してWPFormsのスタイリングをマスターし、サイト全体の機能を強化してください。
フォームをスタイリングする必要があるのはなぜですか？
フォームをスタイリングすることで、ウェブサイトの美観を高め、ユーザーエクスペリエンスの向上に貢献できます。フォームのスタイリングがウェブサイトにとって不可欠であるその他の主な理由は次のとおりです。
- 一貫したブランディング：ウェブサイトのデザインや配色に合わせてブランド化されたフォームを作成することで、一貫したブランドイメージを確保できます。
- 優れたユーザーエクスペリエンス：適切に設計されたフォームは、ユーザーが必要な情報を簡単にナビゲート/送信できるようにし、フォーム完了率を高めます。
- レスポンシブデザイン：適切にスタイリングされたフォームは、さまざまな画面サイズやデバイスに簡単に適応し、すべての訪問者にとってスムーズなユーザーエクスペリエンスを保証します。
- コンバージョン率の向上： 視覚的に魅力的なフォームは、ユーザーの注意を引き、ニュースレターへの登録、購入、問い合わせの送信など、目的のアクションを完了するように促すことができます。
- アクセシビリティの向上： 明確なラベル、適切な間隔、コントラストの高い色でフォームをスタイリングすることで、視覚障害のあるユーザーのアクセシビリティを向上させ、より幅広いオーディエンスに対応するウェブサイトを確保できます。
WPFormsのスタイリングの重要性を理解したところで、ブロックエディターを使用してフォームを効果的にスタイリングし、WPFormsプラグインを最大限に活用するためのステップバイステッププロセスを見ていきましょう。
ブロックエディターを使用してWPFormsをスタイル設定する方法
カスタムCSSを記述することなく、Gutenbergブロックエディターを使用してWPFormsをスタイリングする方法を学ぶには、これらの手順に従ってください。
この記事の内容
1. WPFormsのインストールと有効化
WPFormsは、ウェブサイトでのフォームの作成と管理を簡素化します。このプラグインは、コーディングの知識がなくても、お問い合わせフォーム、アンケート、投票、登録フォームなど、さまざまなフォームを簡単に作成できます。
WPFormsを使用したフォームのスタイリングも、ユーザーフレンドリーなインターフェイス、豊富なカスタマイズオプション、ブロックエディターを使用した視覚的に魅力的でレスポンシブなフォームを作成する機能のおかげで簡単です。
WPFormsの使用を開始するには、WordPressサイトにプラグインをインストールする必要があります。アクティブ化したら、以下の簡単な手順に従ってフォームのスタイリングを作成およびカスタマイズしてください。
2. フォームを作成またはテンプレートを使用する
フォームの作成を始めましょう！WordPressダッシュボードから、WPFormsに移動し、新規追加ボタンをクリックします。
プロンプトが表示されたら、フォームの目的に合った名前を付けます。次に、既存のテンプレートを選択するか、空白のフォームを作成するオプションがあります。
次に、WPFormsは直感的なフォームビルダーインターフェイスを開きます。ここで、フォームフィールドを追加、編集、削除、または再配置してフォームをカスタマイズできます。
フォームフィールドの設定が完了したら、誰かがフォームに記入して送信ボタンを押したときに通知を受け取るように、メール通知を設定する必要があります。
フォーム送信後にユーザーが表示する確認メッセージを設定して、ユーザーエクスペリエンスを向上させることもできます。
次のステップに進む前に、フォームの設定を保存して進捗の損失を防ぎます。画面上部にある保存ボタンをクリックしてください。
3. モダンマークアップを有効にする
ブロックエディター内でフォームのアクセシビリティを強化し、視覚的なカスタマイズを可能にするために、WPFormsはモダンマークアップを提供しています。
WPFormsでモダンマークアップを有効にするには、WPForms内の設定セクションに移動し、一般タブを選択してください。
一般セクションまでスクロールダウンし、モダンマークアップを使用オプションを有効にします。これが有効になると、ブロックエディター経由でフォームのスタイル設定を行う準備が整います。
WPFormsバージョン1.8.1以降では、新規ユーザーに対してモダンマークアップがデフォルトで有効になっており、無効にするオプションは利用できません。
したがって、プラグインの最新バージョンを使用しており、この設定が表示されない場合は、すでに準備ができており、フォームのスタイル設定を開始できます。
モダンマークアップ機能を利用するために、ブロックエディターでフォームのカスタマイズを開始しましょう。まずは、フォームをサイトに埋め込みましょう！
4. サイトにフォームを埋め込む
以前に作成したフォームを埋め込むには、既存のページを開くか、新しいページを作成します。ブロックを追加ボタンを探し、WPFormsブロックを検索してください。
ページまたは投稿にWPFormsブロックを挿入した後、ドロップダウンメニューから目的のフォームを選択します。これで、ブロックエディターでフォームのスタイル設定を開始できます！
5. ブロックエディターからスタイルを編集する
ブロックエディターでWPFormsが含まれるページまたは投稿を開きます。WPFormsブロックをクリックして、追加オプションを開きます。
フォームフィールド、ラベルのスタイル、ボタンのスタイルなど、ブランドの美学に合うようにさまざまなオプションが見つかります。
さらに、高度なセクションでは、フォーム間でスタイル設定をコピーする機能が提供されており、スタイル設定プロセスをさらに簡素化します。
以下のさまざまなスタイル設定オプションを使用して、フォームの外観をカスタマイズし、ウェブサイトのデザインにすぐに合わせる方法を学びましょう。
フィールドスタイル
WPFormsブロック設定のフィールドスタイルオプションに移動します。サイズ、境界線の半径、色の設定を見つけます。
サイズ
フォームフィールドのサイズを調整するには、サイズ設定から目的のサイズを選択します。利用可能なサイズは、小、中、大です。
境界線の半径
フォームフィールドの境界線を調整するには、境界線の半径設定を使用して目的の半径値を設定します。これにより、フォームにきれいで丸いエッジを付けることができます。
デフォルトでは、WPFormsでフォーム要素のサイズ設定の単位はピクセル（px）に設定されています。測定単位をクリックすると、次のようなさまざまなオプションを含むドロップダウンメニューが表示されます。
- ピクセル（PX）
- パーセント（%）
- エエム（EM）
- レム（REM）
- ビューポート幅（VW）
- ビューポートの高さ（VH）
色
フォームフィールドの背景色、境界線の色、テキストの色を調整するには、WPFormsブロック設定の色設定を開きます。
背景色など、更新したい特定の色のオプションをクリックします。選択できるテーマカラーが表示されたオーバーレイが表示されます。
次に、カラー スウォッチをクリックして カラーピッカー を開きます。ここでさらに色を微調整できます。
フォームのブランドカラーが決まっている場合は、16 進数カラー コードを 16 進数ボックスに貼り付けることができます。
ラベルスタイル
ここで ラベルスタイル セクションで、フォームラベルのフォントサイズと色を変更できます。利用可能なサイズは 小 から 大 まであります。
ラベル、サブラベル、およびエラーメッセージの色を更新するには、カラー セクションに移動します。以下に、利用可能なラベルカラーオプションの説明を示します。
- ラベル: この設定は、フィールドのプライマリラベルの色を決定します。
- サブラベルとヒント: この設定は、WPForms がフロントエンドの値の提案を行う際のフィールドサブラベルとヒントに使用される色合いを決定します。
- エラーメッセージ: ユーザーがフォームの入力を誤った場合に表示されるテキストの色。
ボタンのスタイル
WPForms でフォームのボタンのデザインを変更するには、ボタン スタイル に移動します。サイズ の下のドロップダウン メニューをクリックして開き、ボタン サイズを選択します。
ボタンに境界線の半径を与えたい場合は、目的の値を 境界線半径 というラベルのフィールドに入力するだけです。
次に、カラー というラベルのセクションの下に、ボタンの背景色とテキスト色の両方を変更する機会があります。
ほとんどの場合、ボタンの背景色はアクセントカラーとしても機能します。その結果、ボタンの背景色は、チェックボックス、ラジオボタン、プログレスバー、およびフィールドのプライマリカラーとしても使用されます。
高度なスタイリング
高度な 設定の下で、フォームに適用したすべてのカスタムスタイルを含む CSS コードにアクセスできます。
これらのスタイルを別のフォームに移動したい場合は、スタイル設定をコピーして貼り付けるオプションを探してください。
フォームに行った変更を元に戻したい場合は、スタイル設定をリセット ボタンをクリックします。これにより、フォームはデフォルトのスタイルに戻り、以前のカスタマイズはすべて元に戻されます。
追加の CSS クラス フィールドは、開発した他の CSS クラスを自由に入力できる場所です。詳細については、新しい CSS クラスを実装する方法 ガイドをお読みください。
6. フォームをテストして公開する
次に、ページを発行するか下書きとして保存することで、変更を保存します。最後に、簡単なテストを実行 して、フォームが期待どおりに見え、機能することを確認してください。
次に、エンゲージメントを高めるインタラクティブなフォームを作成します
WPForms をさらにカスタマイズする方法をお探しですか? これらのフォームを次のレベルに引き上げるヒント をチェックしてください。フォームの外観を強化する場合でも、機能を強化する場合でも、対応しています。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
