デザイン調整
フォーム編集画面の「デザイン」タブでは、CSS を書かずにフォームの見た目を調整できます。プリセットで土台を選び、必要 な箇所だけをライブプレビューを見ながら微調整する、という流れです。
デザインプリセット
まず土台となるデザインを 4 種から選びます。
| プリセット | 特徴 |
|---|---|
| デフォルト | プラグインの CSS を出力せず、テーマのスタイルをそのまま活かす |
| シンプル 1 | 項目名の下に入力欄が並ぶ、標準的な縦並びレイアウト |
| シンプル 2 | 項目名と入力欄が横に並ぶ 2 カラムレイアウト |
| ノーマル | 背景色・区切り線付きのしっかりした装飾 |
各プリセットの CSS はダウンロードして、上書き用カスタム CSS の土台にすることもできます。
デザイン調整 (ライブプレビュー付き)
プリセットを選んだうえで、「デザイン調整」から色・サイズ・余白などを個別に調整できます。セクションごとのアコーディオンになっており、左側で値を変更すると右側のプレビューに即座に反映されます。
| セクション | 調整できる項目 |
|---|---|
| 全体 | フォーム枠 (最大幅・背景色・枠線・角丸・影)、項目名 (文字色・太さ・背景色・文字サイズ)、説明文 (文字色・文字サイズ) |
| 入力欄 | 文字色・背景色・文字サイズ・枠線色・フォーカス時 / エラー時の枠線色・プレースホルダー色 |
| 送信 / 確認ボタン | 文字色・背景色・ホバー時の色・角丸・影・文字サイズ・余白・幅 |
| 確認画面: 戻る / 送信ボタン | 送信ボタンと同様 (確認画面を使用する場合のみ表示) |
| エラーメッセージ | 文字色・背景色 |
使い方のポイント:
- 数値項目は スライダー で直感的に調整できます
- 空欄 = 未設定 で、プリセットの既定値がそのまま使われます。色のクリアボタンや「リセット」でセクション単位で未設定に戻せます
- 各セクションの「保存」ボタンで、そのセクションだけを部分保存できます (フォーム全体を更新する必要はありません)
フィールド説明文の色・サイズ
フィールドの説明文 (項目名の下・入力欄の上・入力欄の下に表示する補足テキスト) の文字色・文字サイズも「全体」セクションで調整できます。
カスタム CSS
デザイン調整で足りない場合は、カスタム CSS で細部まで制御できます。
- カスタム CSS ファイル — 1 フォームあたり最大 10 個までアップロード可能
- インライン CSS — 画面内のエディターに直接記述
- ベース CSS のダウンロード — 選択中プリセットの CSS をダウンロードして土台にできます
必須マーク
既定の * を「必須」「※」など任意のテキストに変更できます。
さらに細かく制御したい場合
レイアウト構造そのものを書き換えたい場合は HTML テンプレート を利用してください。