フォームビルダーとは？
フォームビルダーは、ビジュアルエディタでカスタムフォームを作成できます。テキスト入力、ドロップダウン、チェックボックスなどを追加し、HTMLまたはJSONスキーマとしてエクスポートできます。
14 種類のフィールドから選べます。テキスト、メール、電話、URL、数値、日付、ファイルアップロード、評価スケール、ドロップダウン、チェックボックス、ラジオ、テキストエリア、導入文用の説明ブロック、そして長いフォームをステップに分けるページ区切りです。各入力フィールドにはラベル、任意の補助テキスト、プレースホルダー、必須フラグ、ドロップダウンとラジオ用の選択肢リストがあります。すぐ使えるテンプレート（お問い合わせ、フィードバック、アンケート、登録、注文、予約）から始め、上下の矢印でフィールドを並べ替え、ページをまたぐ進捗バー付きでフォームをライブプレビューし、どのサイトにも貼り付けられる整ったスタイルの HTML ページや、サーバー側検証用の JSON スキーマとしてエクスポートできます。
使い方
- ステップ 1 — 「フィールドを追加」をクリックして新しいフィールドを挿入し、種類（テキスト、メール、電話、URL、数値、日付、ファイル、評価スケール、ドロップダウン、チェックボックス、ラジオ、テキストエリア）を選びます。長いフォームをステップに分けるにはページ区切りを追加し、すぐ使えるテンプレートを読み込めば素早く始められます。
- ステップ2 — フィールドをクリックして、ラベル、プレースホルダー、必須かどうかを設定します。
- ステップ3 — フォームをライブプレビューし、HTMLコードまたはJSONスキーマとしてエクスポートしてプロジェクトに統合します。
使用するタイミング
- 静的サイトに埋め込む登録フォームや出欠フォームをサッと用意したいとき。
- 開発者にスキーマを引き渡す前に、まずフォームの試作品を作りたいとき。
- 受講生に毎回inputタグを手書きさせずに、HTMLフォームの基礎を教えたいとき。
結果
教師がクラス登録フォームを作成します。生徒名（必須テキスト）、学年（ドロップダウン：9～12年）、メールアドレス（メール検証付き）、コメント用テキストエリアの各フィールドを配置し、学校のウェブサイトに埋め込むためにHTMLをエクスポートします。
よくある質問
- 送信されたフォームのデータはどこへ送られますか?
- 既定ではどこへも送られません。出力されたHTMLにはaction URLがないため、送信はどこにも届かず、データが端末の外に出ることもありません。回答を受け取るには、actionに自前のエンドポイント、Formspree、Google Forms、サーバーレス関数のURLなどを指定してください。
- 既存のフォームをエディタに読み込み直すことはできますか?
- 今のところできません。エクスポートはエディタからHTMLまたはJSONへの一方通行です。後から編集したい場合は、JSONスキーマを保存しておいて手作業で再構築するか、編集セッションをそのまま開き続けてください。
- ドロップダウンの選択肢が表示されないのはなぜ?
- ドロップダウンとラジオは「オプション」リストに最低1つの項目が必要です。該当フィールドをクリックし、オプション欄を開いて、選択肢をカンマか改行で区切って入力してください。空のままだと選択肢のないselectが生成されます。
- 出力されるHTMLにスタイルは含まれていますか?
- はい。HTMLの書き出しには小さなスタイルシートが同梱されるようになり、ファイルを開いた瞬間からきれいで読みやすいフォームになります:整った余白、入力欄の枠線、フォーカスリング、スタイル付きの送信ボタン。CSSは最小限で完結しているので、そのまま使ってもよいですし、styleブロックを削除して独自のTailwind・Bootstrap・フレームワークのクラスに差し替えることもできます。
- HTMLとJSONの書き出しはどう違いますか?
- HTMLはページに貼ってすぐ表示できる形式です。JSONはフィールドの種類、ラベル、検証ルールを記述した構造化スキーマで、React、Vue、react-hook-form、Formikなどで描画する場合に向いています。