ブランドに合うように、サイトのお問い合わせフォームをカスタマイズします。

サイト スタイルを使用して、サイト上のフォーム ブロックの外観を編集します。フォーム上のテキストやボタンのフォントや色、テキスト フィールドやチェックボックスなどのフォームのその他のエレメントのスタイルや図形を変更できます。

サイト上のすべてのフォーム ブロックがこのスタイル設定に従うため、フォームの一貫性を保ちながら独自のスタイルを設定できる優れた方法です。

このガイドの大部分は、バージョン7.1サイトでのみ使用可能なフォーム スタイルの設定オプションについて説明しています。サイトがバージョン7.0の場合は、「バージョン7.0でフォーム ブロックのスタイルを設定する」を確認してください。

動画を見る

オープン フォーム ブロックのスタイルを設定する

オープン フォーム ブロックのスタイルを設定する方法は以下のとおりです。

1. [ページ] パネルを開き、フォーム ブロックがあるページをクリックすると、サイト プレビューで変更内容を確認できます。
2. [サイト スタイル] パネルを開き、[フォーム] の横にある＞をクリックします。
3. [切り替え] をクリックしてプリセットのフォーム パックを選択します。
4. フォーム フィールドと送信ボタンのアニメーションをカスタマイズするには、[エフェクト] をクリックします。
5. チェックボックス、ラジオ ボタン、アンケート フィールドのスタイルをカスタマイズするには、[フィールド オプション] をクリックします。
6. フォーム ブロックのテキスト スタイルをカスタマイズするには、[フォント] をクリックします。
7. フォーム ブロックの色とスタイルをカスタマイズするには、[色] をクリックします。
8. [フォームの間隔設定] をクリックして、フォーム内の余白の大きさをカスタマイズします。
9. 変更を加えたら、[保存] をクリックします。

これらのスタイル設定は、サイト上のすべてのフォーム ブロックに影響します。色以外で、フォーム ブロックごとに異なるスタイル設定を指定することはできません。ブロックがカラー パレットが異なるセクションにある場合は、フォーム ブロックごとにスタイル設定が異なる可能性があります。

ニュースレター ブロック、カバー ページのフォーム、商品のフォームなど、他の種類のフォームには独自のスタイル設定があります。他の種類のフォームの詳細については、「サイトにフォームを追加する」をご覧ください。

フォーム パックの選択とカスタマイズ

フォーム パックは、スタイル設定の開始時に選択できるプリセットのフォーム スタイルです。フォーム パックを選択して設定を変更した後で別のフォーム パックに切り替えると、最初のフォーム パックへの変更は保存されません。

各フォーム パックには、[フォーム] パネルに表示されるスタイル オプションのプリセットが含まれています。

• フィールドの形状 - フォーム フィールドの形状を設定します。[正方形]、[角丸長方形]、[カプセル]、または [角をカスタマイズ] から選択します。
• フィールド塗りつぶし - このトグルをオンにすると、フォーム フィールドに背景色が追加されます。トグルをオフにすると、フォーム フィールドの色はフォーム ブロックの色と同一になります。
• 境界線 - 境界線なしの場合は [なし] を選択し、上下左右すべてに境界を表示するには [すべて] を選択します。その他の設定によっては、[なし] を使用できない場合があります。図形が [正方形] に設定されている場合は、[下辺] を選択することもできます。これにより、フィールドの下辺にのみアンダーラインのように境界線が表示されます。
• 境界線の太さ - フォーム フィールドを囲む境界線の太さを設定します。このオプションは、境界線 [なし] を選択した場合は表示されません。
• パディング - フィールド内のテキストの周囲に表示するパディングの量を選択します。[S]、[M]、[L] のいずれかを選択するか、[...] をクリックしてカスタム パディングを設定します。
• フィールド オプション - 特定のフィールドのチェックボックス、ラジオ ボタン、およびアンケート エレメントの外観をカスタマイズします。

フォーム パックを選択したら、[フォーム] パネルでこれらのスタイル設定をさらにカスタマイズできます。

フォントを変更する

次の各フィールドのフォントを変更するには、[フォーム] スタイル パネルで、[フォント] をクリックします。

• タイトル - 各フィールドの上のテキスト
• 入力 - 訪問者が各フィールドに入力するテキスト
• 説明 - 各フィールドの下のテキスト
• キャプション - 説明の下のテキスト (名前フィールドの「名」や「姓」など)
• プレースホルダー - 各フィールドに表示できるテキスト
• オプション - チェックボックス、ラジオ ボタン、アンケートのフィールドで選択可能なオプションのテキスト
• アンケート タイトル - アンケートの質問のテキスト
• ドロップダウンの選択肢 - ドロップダウン メニューのテキスト

[送信] ボタンのテキストは、フォーム ブロックの [デザイン] タブで選択した内容に応じて、サイトのプライマリ、セカンダリ、またはターシャリ ボタンのスタイルに従います。

送信後のメッセージ

送信後のメッセージを追加する場合、テキストはサイトのグローバル スタイルにある次のスタイル オプションに従います。

• フォント - [フォント] パネルの [段落] 設定
• サイズ - [フォント] パネルの [段落] セクション内の [段落2] スライダー
• 色 - 選択したセクション テーマの [段落 (中)] の色、またはブロックの背景を有効にしている場合は [背景の段落 (中)] の色

色を変更する

既定では、フォーム ブロックはサイトのパレットの色を使用します。[フォーム] スタイル パネルで [色] をクリックし、[テーマの色を使用] トグルをオンに切り替え、セクションのカラー テーマに基づいてフォーム ブロックのエレメントの色を手動でカスタマイズします。

微調整オプションに [背景] が含まれている場合は、背景色が有効になっているフォーム ブロック、またはライトボックスで開くように設定されているフォーム ブロックにのみ適用されます。[背景] が含まれていない微調整オプションは、背景色やライトボックスが有効になっていないフォーム ブロックに適用されます。

バージョン7.0でフォーム ブロックのスタイルを設定する

バージョン7.0では、フォーム ブロックのスタイルは通常、テンプレートの本文とボタンの微調整オプションに従いますが、オプションはテンプレートによって異なり、一部のフォーム フィールド ラベルのサイズは固定されています。たとえば、[名前] フィールドの下に表示される [名] ラベルと [姓] ラベルのサイズを変更できない場合があります。また、フィールド内のプレースホルダー テキストの色を変更できない場合もあります。

ライトボックス フォームのスタイルは固定されています。ほとんどのフォントや色の設定を変更することはできません。サイトのスタイル設定の詳細については、「スタイルを変更する」を参照してください。