フォームを作成/公開したい
回答
本記事では、b→dashのCMSアプリを用いて、フォームを作成・公開する方法を紹介しています。テンプレート選択から、フォーム内容の編集、プレビュー確認、自動返信/管理者通知メールの設定、公開設定までの一連の手順を解説します。
本記事の構成は下記の通りです。
1. テンプレートを選択する
2. フォーム内容を編集する(デザイン/テキスト/説明文/質問の削除・移動・追加/値の差し込み)
3. その他の画面を編集する・プレビュー・通知メールを設定する
4. フォームの公開設定と回答データについて
1. テンプレートを選択する
1. 「CMS」をクリックします
2. 「新規作成」をクリックします
3. 「アンケート/フォーム」を選択し、「適用」をクリックします
4. 「テンプレート選択」をクリックします
5. 「使用するテンプレート」をクリックします
6. 「適用」をクリックします
2. フォーム内容を編集する
フォームのデザインを変更する
ヘッダー用とフッター用、それぞれのHTMLファイルと、基本デザインを定義したCSSファイルを用いて、フォームのデザインを変更します。
1. 「HTML/CSSファイルの適用」をクリックします
2. 変更したいデザインの「ファイル選択」をクリックします
3. 該当するファイルを選択し、「適用」をクリックします
4. 変更したいデザインのファイルを全て選択後、「適用」をクリックします
※ HTML/CSSファイルは、事前に『コンテンツボックスを使用したい』を参考にアップロードしてください
※「JavaScriptファイル」を適用することで、フォーム画面に動きをつけたり、ページタイトルを変更することができます
・ヘッダー/フッターには2つ以上のHTML/CSSファイルを適用することはできません(必要に応じて1つのファイルにまとめてアップロードしてください)
・ヘッダー/フッターには画像ファイル(.png/.jpeg)を挿入することができません(挿入できるのはHTMLファイル/CSSファイルのみ)
・ヘッダーHTML/フッターHTMLを設定した場合、HTMLのソースコード上では<body>の間の位置に挿入されます
・各ファイルが読み込まれる順序: ヘッダー/フッターCSS → JavaScript → ヘッダーHTML → フッターHTML
・『b→dashで作成したフォームをGoogleの検索結果に表示させない方法を知りたい』
・『b→dashで作成したフォームにGTMタグを設置したい』
テキストを編集する
1. 編集したい箇所にカーソルを合わせ「編集」アイコンをクリックします
2. 「フォント」「太字」「斜体」「アンダーバー」「斜線」「文字色」「ハイライト」「行揃え」「文字サイズ」「行間」を変更します
3. 任意のテキストに編集後、「完了」をクリックします
フォーム説明文を追加する
1. 「質問項目を追加する」をクリックします
2. 「本文画像/本文テキスト」をドラッグし、任意の場所にドロップします
3. 追加した「本文画像/本文テキスト」にカーソルを合わせ「編集」のアイコンをクリックします
4. テキストを編集後、「完了」をクリックします
質問を削除する/移動する
1. 削除したい箇所にカーソルを合わせ「削除」のアイコンをクリックします
2. 確認ダイアログで「削除」をクリックします
3. 質問を移動したい場合は、移動したい箇所にカーソルを合わせ、「移動」のアイコンをドラッグし、移動させたい場所でドロップします
定型質問(プリセット項目)を追加する
定型質問の場合は、質問名やプレースホルダーなどが既に設定されています。必要に応じて内容を変更してください。
1. 「質問項目を追加する」をクリックします
2. 追加したいプリセット項目(例: 「電話番号」)をドラッグし、任意の場所にドロップします
3. 追加した質問にカーソルを合わせ「編集」のアイコンをクリックします
4. 任意の設定を行い、「完了」をクリックします
# |
プリセット項目 |
詳細 |
| 1 | 姓 | 姓を入力する項目 |
| 2 | 名 | 名を入力する項目 |
| 3 | 氏名 | 氏名を入力する項目(姓と名の間にスペース無しでもエラーは表示されません) |
| 4 | 電話番号 | 10桁または11桁の電話番号入力項目。詳細設定の「入力欄」プルダウンで『ハイフンごとに入力欄を分ける』を選択可能 |
| 5 | メールアドレス | メールアドレス入力項目(「@」以降のドメイン未入力時はエラー表示) |
| 6 | メールアドレス_入力確認 | メールアドレス + 入力確認の2項目作成。一致しない場合はエラー表示 |
| 7 | URL | URL入力項目(「https://」「http://」が含まれていない場合はエラー表示) |
| 8 | カレンダー | カレンダー・年/月/日を入力。1項目に1日程のみ。値削除のまま回答完了するとnull |
| 9 | 生年月日 | 生年月日を入力する項目 |
| 10 | 都道府県 | 都道府県選択項目(郵便番号からの自動選択はなし) |
| 11 | 郵便番号 | 3桁-4桁の郵便番号入力項目(半角数字でないとエラー表示) |
| 12 | 同意書 | 同意のチェックをつける項目。同意文は最大65,535文字まで入力可能 |
質問の詳細設定(文字数/入力形式制限など)
フォームの質問には5つの設定を行うことができます(必須設定 / 文字数・入力形式制限 / 初期値設定 / プレースホルダー設定 / 備考設定)。
1. 質問項目にカーソルを合わせ「編集」のアイコンをクリックします
2. 「詳細設定」をクリックします
3. 任意の設定を行い、「適用」をクリックします
※ 文字数/入力形式制限が設定できる質問項目は姓 / 名 / 氏名 / 一行テキスト / 複数行テキストの5つです
※ 設定できる文字型: ひらがな / カタカナ / 半角英数 / 半角英字 / 半角数字 / URL / メールアドレス / 正規表現
※ 文字数上限: 姓・名・氏名・一行テキスト=500文字 / 複数行テキスト=10,000文字
カスタム質問を追加する
カスタム質問は、定型質問とは異なり質問名やプレースホルダーなどが設定されていないため、質問内容にあった設定を手動で行う必要があります。
1. 「質問項目を追加する」をクリックします
2. 追加したいカスタム質問(例: 「1行テキスト」)をドラッグし、任意の場所にドロップします
3. 追加した質問にカーソルを合わせ「編集」のアイコンをクリックします
4. 質問名の編集と任意の設定を行い、「完了」をクリックします
5. 「カスタムラジオボタン」など他のカスタム質問も同様に、ドラッグ&ドロップで追加できます
# |
カスタム質問 |
詳細 |
| 1 | 1行テキスト(回答形式) | 1行のテキストで回答する質問。文字数制限は1〜500文字 |
| 2 | 複数行テキスト(回答形式) | 複数行のテキストで回答する質問 |
| 3 | カスタムラジオボタン(回答形式) | 1つの質問に対して1つの回答を選ぶ際のボタン選択形式 |
| 4 | カスタムチェックボックス(回答形式) | 1つの質問に対して複数の回答をする際のチェック形式 |
| 5 | カスタムプルダウン(回答形式) | プルダウンで指定した選択肢から選んで回答 |
| 6 | マトリクス_ラジオボタン(回答形式) | 項目と選択肢を縦軸と横軸で組み合わせて、各項目をラジオボタンで回答 |
| 7 | マトリクス_チェックボックス(回答形式) | 項目と選択肢を縦軸と横軸で組み合わせて、各項目をチェックボックスで回答(JSON形式で記録) |
| 8 | スコア(回答形式) | 任意で設定した基準に基づき、スコアや評価を選択し回答 |
| 9 | 本文画像/本文テキスト | フォームに画像やテキストを追加する項目 |
カスタムチェックボックスの回答数制限
「カスタムチェックボックス」において、選択できる選択肢の数を制限したい場合の設定方法です。
1. 制限したい質問項目にカーソルを合わせ「編集」をクリックします
2. 「詳細設定」をクリックします
3. 「選択可能な回答数を制限する」にチェックを入れ、「回答数上限」を選択し、「適用」をクリックします
特定の回答選択時に追加質問を表示する
ユーザーが特定の回答を選択した際に追加質問を表示したい場合は、「次の質問を表示」を設定します。下記では「その他」を選択した際に「ツールの名称を教えてください」という追加質問が表示される設定を例に紹介します。
1. 「質問項目を追加する」をクリックし、「カスタムラジオボタン(回答形式)」を選択します
2. 追加したカスタムラジオボタンの質問項目や選択肢を設定します
3. 「次の質問を表示」をクリックし、選択肢の「ツールA」をクリックします
4. 「追加質問を表示しない」をクリックし、「OFF」を「ON」に切り替えます
5. 「完了」をクリックします
6. 「その他」以外の選択肢も同様に「追加質問を表示しない」設定にします
7. 追加質問の質問タイトルを入力し、プリセット項目を「1行テキスト」に選択して「完了」をクリックします
値を差し込む
フォームに、URLパラメータやデータファイルの値などを差し込むことができます。詳細は別記事『フォームに値を差し込みたい』をご参照ください。
3. その他の画面を編集・プレビュー・通知メールを設定する
その他の画面を編集する
フォームには「フォーム入力画面」以外に「確認画面」「完了画面」「エラー画面」があり、それぞれのテキスト・デザインを編集することができます。編集手順は「2. フォーム内容を編集する」のテキスト編集・デザイン変更と同様です。
プレビューで確認する
作成したフォームのプレビューを確認します。「プレビュー」をクリックすることで、PC表示およびモバイル表示のプレビューを確認することができます。
自動返信メールを設定する
フォーム回答完了時にユーザーへ自動返信するメールを設定します。送信元アドレス、件名、本文、差込文字(回答内容など)を設定できます。
管理者通知メールを設定する
フォーム回答があった際に管理者へ通知するメールを設定します。通知先メールアドレス、件名、本文を設定できます。
4. フォームの公開設定と回答データについて
フォームの公開設定をする
フォームの作成が完了したら、公開設定を行います。「公開する」をクリックして公開状態に切り替えると、生成されたフォームのURLからアクセスできるようになります。
※ 公開前に必ず「プレビュー」で表示内容を確認してください
※ 公開後もフォーム内容を編集することができますが、編集後は再度「公開する」をクリックして変更を反映する必要があります
[参考]フォーム回答データについて
フォーム回答データは、ユーザーがフォームに回答したタイミングでb→dashに自動的に作成・保存されます。フォーム回答データには下記のようなカラムが含まれます。
・各質問項目の回答カラム: フォームで設定した質問項目ごとに、回答内容が記録されるカラム
・回答日時カラム: ユーザーが回答した日時
・回答者識別カラム: フォーム回答者を識別するためのID
・マトリクス_チェックボックスのカラム: JSON形式で記録(例: 「{"質問項目":{"選択肢":"回答"...}}」)
フォーム回答データは、ユーザーがフォーム送信を完了したタイミングで作成されます。データパレットの「データを確認する」から、作成されたフォーム回答データを確認することができます。