Documentation menu

フォームブロック

スタジオのアンケートビルダーです: 12種類の質問タイプを自由に組み合わせて配置し、必要であれば複数ページに分割し、回答を生の一覧としてではなく質問ごとの集計として読み取れます。

仕組み

フォームはコンテナブロックであり、その子要素はフォームフィールドノードです: 必要な数だけ、任意の順序で、任意のタイプを追加できます。12種類のフィールドタイプに対応しています: テキスト、メール、長文テキスト(テキストエリア)、数値、電話番号、日付、ドロップダウン(セレクト)、単一のはい/いいえチェックボックス、選択肢(ラジオ、1つだけ選択)、チェックボックス群(チェックボックスグループ、任意の数を選択)、リニアスケール、星評価です。ファイルアップロード形式の質問には対応していません — スタジオの背後にはまだファイルストレージのインフラがありません。

単一ページのフォームは、これまでのフォームと同じように動作します: メール内でのフォーム送信に対応している場合、フォーム全体 — すべてのフィールド、1つの送信ボタン — がメールの内部から直接インタラクションエンドポイントに送信され、ページ遷移は発生しません。それ以外の場所では、フォームは同じフォームを未入力の状態でライブビュー上に開く、単一の行動喚起(CTA)ボタンとしてレンダリングされます。

複数ページのアンケートは、見た目だけでなく種類そのものが異なります。任意のフィールドにインスペクターでページ番号を与えると、フォームはmultiPageになります。本物の複数ステップウィザードは、ページをまたいで回答を引き継ぎ、「戻る」に対応し、各ページに独自の送信を持たせる必要があります。静的なHTML/CSSではそれを表現できません — JavaScriptなしでは「今どのページにいるか」を追うクライアント側の状態がそもそも存在しないためです。そのため、複数ページのフォームは、クライアントの対応状況にかかわらず常に単一のリンク先行のアンケートを開始ボタンとしてメール送信されます — クイズブロックが使っているのと同じ「CSSには複雑すぎる」という逃げ道です。

そのボタンは専用のホスティングされたウィザードルートを開き、各ページの回答はそのページが送信された瞬間に中間ドラフトとして保存されます。これは最終的なsubmitとは異なるform-pageアクションであり、アンケートが実際に完了するまでドラフトが集計・Webhook・CSVに一切触れないようにしています。受信者が「戻る」を使って前のページに戻った場合、回答は自動的に引き継がれます。最終ページが送信されるまで何も回答として記録されないため、途中で放棄されたアンケートはデータに部分的な行を残さず、単に破棄されるドラフトが残るだけです。

フォーム自体に設定可能なフィールド:

  • 送信ラベル — 単一ページのフォームのボタンテキストです。
  • 送信後のリダイレクト先 — 送信後に受信者が着地する場所です。空欄のままにすると、既定で「完了」の確認付きのライブビューになります。
  • 背景色パディングボーダーボーダーの角丸
  • フィールドラベルの色/フォントサイズ、そして送信ボタンの色の上書き(テキストと背景)。
  • 複数ページトグル、そしてアンケート開始ボタンのラベル(複数ページが有効なときのみ使用されます)。

フォームフィールドは、ラベルフィールド名(回答が保存されるキーで、後でラベルを変更する場合もこれは変えずに保つべきです)、タイプ(上記12種類)、プレースホルダー、そして選択肢(ドロップダウン/選択肢/チェックボックス群用の、順序付きリスト)を持ちます。また、スケール(2〜10、リニアスケールまたは星評価用)、低い方/高い方の端のラベル(リニアスケールのみ)、必須、そしてページ(0が最初のページ — フォームが複数ページになって初めて意味を持ちます)も持ちます。

すべての送信(単一ページでも複数ページでも)は受信者ごとに回答ダッシュボードに届き、質問ごとに集計されます: 選択肢/スケール/星評価の質問には棒グラフ、自由記述の質問には件数と件数制限付きのサンプル一覧です。アンケート質問の集計を参照してください。投票や評価ブロックが従っている同じ終了日/回答上限の仕組みがここにも適用されます: 終了したフォームは、ウィザードの途中かどうかにかかわらず、ライブビュー上で新しい送信の受付を停止します。

Subject

How was your recent order?

5〜6問の購入後満足度調査は、単一ページのフォームとしてうまく機能します: 受信トレイを離れずにインラインで手早く入力できます。もっと長い申込・応募フォーム(「あなたについて」「対応可能な日時」「希望条件」のような論理的なセクションに分かれた10問以上)は、複数ページモードが自然に合います — 受信者は1つの長いスクロールに直面せず、すでに答えた回答に戻ることもできます。より広いパターンについてはアンケートとNPSフィードバックを参照してください。ワークショップのコース登録メールでは、短文の名前/メールアドレスの組と「どの回が都合が良いですか?」という選択肢の質問を、すべて1ページにまとめて組み合わせ、そのまま人数集計につなげられます。

静的フォールバックの見え方

<div id="em-form-1" style="margin:12px 0;background-color:transparent">
  <div class="kn-fallback" style="text-align:center;margin-top:8px">
    <a href="https://mailinapp.com/v/eyJhbGci..."
       style="display:inline-block;padding:10px 20px;background-color:#4f46e5;color:#ffffff;border-radius:6px;text-decoration:none;font-size:14px;font-weight:600">
      Submit
    </a>
  </div>
</div>

単一ページのフォームでは、メール内送信に対応していない場所ではこれがレンダリングされます — 同じフォームをホスティングされたライブビュー上で開くボタンです。複数ページのフォームは、クライアントを問わず一年中同じこのボタンの形でレンダリングされ、独自のアンケートを開始というテキストがラベルになります。ウィザードはライブビュー上にしか存在しないためです。

関連ページ