フォームのスタイル設定
Auto Form Builderを使えば、フォームのスタイルを完全にコントロールできます。ブランドカラーに合わせたり、フォントを使用したり、間隔を調整したりして、サイトに自然に溶け込むようなフォームをデザインできます。
フォームのスタイリングが重要な理由
あなたのウェブサイトにはブランドがあります。フォームもそれを反映させるべきです。
フォームの見た目がサイトの他の部分と異なると、訪問者はためらってしまいます。まだ同じウェブサイトにいるのかと不安になり、このためらいがコンバージョンを阻害するのです。
スタイリッシュなフォームは、プロフェッショナルな印象を与えます。洗練されたフォームは、訪問者に細部への配慮をアピールします。フォームのデザインにこだわるなら、おそらくユーザーのデータにも配慮しているはずです。
フォームスタイルの仕組み
Auto Form Builderには、フォームビルダーのインターフェースに組み込まれたビジュアルスタイルエディターが含まれています。
- スタイルを設定するものを選択するフォーム コンテナー、フィールド ラベル、入力フィールド、ボタン、またはエラー メッセージから選択します。
- 設定を調整するカラーピッカー、スライダー、ドロップダウンを使って値を変更できます。CSS構文を覚える必要はありません。
- すぐにプレビューすべての変更はライブプレビューに即座に反映されます。公開前にフォームがどのように表示されるかを正確に確認できます。
- デフォルトとして保存新しいフォームにスタイルを自動的に適用します。一度作成すれば、どこでも再利用できます。
カスタマイズできるもの
色
フォーム内のあらゆる色をコントロールできます。フォームコンテナと個々のフィールドの背景色、ラベル、プレースホルダー、入力テキストのテキスト色、デフォルト、フォーカス、エラー状態の境界線の色、背景、テキスト、ホバー効果のボタン色など。
タイポグラフィ
ラベルと入力フィールドのフォントを選択できます。フォントサイズは個別に調整できます。強調にはラベルを大きく、補足情報には補助テキストを小さく表示できます。太字のラベルや細字の入力テキストにはフォントの太さを調整できます。
間隔とレイアウト
フィールド間のスペースを設定して、ゆとりある空間を作りましょう。フィールド内のパディングを調整して、快適なテキスト入力を実現します。フォーム全体の余白を調整して、ページレイアウト内で最適な位置に配置しましょう。
ボーダーとコーナー
境界線の幅、スタイル、色を定義します。モダンな印象を与えたい場合は角を丸く、ミニマルなデザインには角をシャープに。フォームの状態に応じて異なる境界線スタイルを適用できます。デフォルトでは控えめな境界線、フォーカス時には目立つ境界線などです。
ボタン
ブランドに合った送信ボタンをデザインしましょう。背景色、テキスト色、境界線の半径、パディング、フォントサイズ、フォントの太さなど、様々な要素をカスタマイズできます。ホバー状態やアクティブ状態をカスタマイズすることで、ボタンの反応性を高め、クリックしやすくすることができます。
フォームコンテナ
フォームラッパー全体のスタイルを設定します。背景色を追加するか、透明のままにするかを選択できます。奥行きを表現するために、ボックスにシャドウを適用します。丸みを帯びたフォームコンテナの境界線の半径を設定します。フォームの幅が広すぎないように、max-width を調整します。
一般的なフォームのスタイル設定シナリオ
ブランドガイドラインに一致
御社には特定の色があります。プライマリーカラーは#0F2D5F、アクセントカラーは#F59E0Bです。これらの値をスタイルエディタに入力してください。フォームボタンにはアクセントカラー、フォームラベルにはプライマリーカラーを使用します。これで、ブランドの一貫性が完璧になります。
高コントラストのフォームを作成する
背景が暗いウェブサイトですか？目立つ明るいフォームを作成しましょう。背景が明るいですか？微妙な影が付いた縁取りのあるフォームを使用して、視覚的に競合することなくフォーム領域を定義します。
ミニマルフォームのデザイン
境界線を取り除き、間隔を狭め、透明な背景を使用します。ボックスの中に収まっているのではなく、ページと一体化したようなフォームを作成します。
大胆なCTAフォームを作成する
大きなボタン、鮮やかな色彩、たっぷりとしたパディング。最も重要なリードジェネレーションページのために、注目を集めるフォームを作成しましょう。
あらゆるテーマにマッチするフォーム
Auto Form Builderは、あらゆるWordPressテーマに対応しています。作成したフォームは、どんなデザイン環境にも適応します。
Woodmart、Astra、GeneratePress、Divi、その他様々なテーマをお使いですか？フォームはネイティブな見た目になります。スタイルエディターを使えば、あらゆるデザインシステムに合わせて自在にカスタマイズできます。
テーマの競合やスタイル継承の問題もありません。まさに思い通りのフォームが完成します。
CSSは不要
フォームのスタイル設定にカスタムCSSを書く必要はありません。ビジュアルエディタがすべて処理します。
しかし、CSSを細かく制御したい場合は、Auto Form BuilderはフォームごとにカスタムCSSをサポートしています。特殊なケースに対応するためにオーバーライドを追加したり、ビジュアルエディターでは利用できない高度なスタイルを適用したりできます。上級ユーザーは必要な柔軟性を得られます。
