HubSpot フォームで、テキスト項目を選択肢から選べるようにする無償ツールを公開しました（add apps 8）
「当社を知ったきっかけ」「ご興味のある分野」のように、フォームでは選択肢から選んでもらいたい項目があります。HubSpot では、選択肢から選ばせるには、プロパティの種類をラジオボタンやチェックボックスなどにする必要があります。ところが、すでに 1 行テキストで使っているプロパティは、種類を変えると保存済みのデータやほかのフォーム、ワークフローへの影響が気になります。フォームごとに選択肢を変えたいときも、プロパティの選択肢は 1 つしか持てません。
そこで、プロパティは 1 行テキストのまま、フォームの上でだけラジオボタン・チェックボックス・ドロップダウンで選べるようにする無償ツール「テキスト項目をフォームだけ選択型に」を公開しました。コードを 1 つ貼り付けるだけで使えます。
add apps は、HubSpot を日本の商習慣に合わせて使いやすくする小さな部品です。「フォームの確認画面」「入力補助」「グループ選択」「希望日ピッカー」「郵便番号検索」「ふりがなの自動入力」「全角半角コンバータ」に続く 8 本目です。
できること
- 1 行テキストの項目の入力欄を隠し、その位置に選択肢を表示します。ラベルと必須の印は、フォームの項目の設定のまま表示します
- 選び方を、ラジオボタン（1 つ選ぶ）・チェックボックス（複数選べる）・ドロップダウン（1 つ選ぶ）から選べます
- 選んだ選択肢の文字が、そのまま項目に保存されます。チェックボックスで複数選んだときは「;」でつないで保存します（区切りの文字は変えられます）
- 「その他」を選んだときに、自由に入力できる欄を出せます。入力した内容は「その他（入力した内容）」の形で保存されます
- 項目が必須のときは、選ばずに「次へ」「送信」を押すとフォームを先へ進めず、メッセージを表示します
- 1 つのコードで、10 個までの項目を選択型にできます
| 使い方の例 | 項目 → 選び方 |
|---|---|
| 当社を知ったきっかけを聞く | 当社を知ったきっかけ → ラジオボタン（「その他」は自由入力） |
| セミナーの申し込みで、興味のある分野を聞く | ご興味のある分野 → チェックボックス |
| 資料請求で、検討の時期を聞く | ご検討の時期 → ドロップダウン |
プロパティの種類は 1 行テキストのままなので、すでに保存されているデータや、ほかのフォーム・ワークフロー・レポートには影響しません。送信は HubSpot フォームの標準のボタンで行います。送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。
使える条件
| 対象 | 使えるか |
|---|---|
| 「フォームエディター」で作ったフォーム | 使えます |
| 「旧フォームエディター」で作ったフォーム | 使えません |
| HubSpot のランディングページ・ウェブサイトページに置いたフォーム | 使えます |
| HubSpot 以外のサイトに埋め込んだフォーム | 使えません |
| フォームの共有リンク（フォームだけを開く URL） | 使えません |
- 選択肢の文字がそのまま保存されます。選択肢の文字を変えると、変える前に保存された値とは別の値になります
- 入力内容を外部に送ることはありません。選択の処理は、ご覧になっているブラウザの中だけで行います
- 「フォームの確認画面」などほかの add apps と一緒に使えます
使い方（3 ステップ）
フォームを準備する
- HubSpot で、選んだ値を入れる「1 行テキスト」のプロパティを作ります（例：「当社を知ったきっかけ」）。すでにあるプロパティを使っても構いません
- フォームの編集画面を開き、その項目をフォームに置きます。必須にするかどうかは、フォームの項目の設定で決めます
- フォームを公開します
設定ページでコードを作る
- 設定ページを開きます
- HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（
https://app.hubspot.com/forms/…またはhttps://app.hubspot.com/submissions/…で始まるもの）を貼り付け、「読み取る」を押します - 選択型にする項目ごとに、選び方と選択肢を設定します。右側のプレビューで、表示と、項目に保存される値を確かめられます
- 「コードをコピー」を押します
ページに貼り付ける
- HubSpot で、フォームを置いたページの編集画面を開きます
- 「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
- ページを更新（公開）します
- 公開したページで、項目の入力欄の位置に選択肢が表示されること、選んで送信するとコンタクトのプロパティに選んだ選択肢の文字が保存されることを確かめます
詳しい使い方は、ご利用ガイドをご覧ください。
設定を変えた、項目を変えた場合は
選択肢や選び方を変えるとき、項目を増やすとき、フォームの項目を変えたときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。add apps の新しい版も、作り直したコードに含まれます。
困ったとき
選択肢が表示されない（入力欄のまま）
- 項目がフォームに置かれているか、非表示になっていないか、「1 行テキスト」の項目かを確認してください
- フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
- コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
「その他」の入力欄が出ない
- 「「その他」を選んだら自由に入力できる欄を出す」がオンになっているか、選択肢に「その他の選択肢」と同じ文字の行があるかを確認してください
動作の記録を見る
ページの URL の末尾に ?kp_debug=1 を付けて開くと（すでに ? がある場合は &kp_debug=1）、ページの下部に動作の記録が表示されます。お問い合わせの際は、この記録を添えてください。
同時に公開した add apps
8 本目と同時に、次の 2 本も公開しました。
- 「添付ファイル送信」：フォームで、ドラッグ＆ドロップで複数のファイルを受け付け、種類・容量をその場でチェックします
- 「EFO 機能」：必須項目の色付け、残りの必須項目数の表示、誤りのその場での表示など、フォームの入力を助ける機能を足します
新しい add apps の公開や更新のお知らせは、メールで受け取れます。add apps のページを開くと右下に登録の枠が表示されますので、メールアドレスをご登録ください。
お問い合わせ
使い方がわからないとき、うまく動かないとき、ご要望は、add apps のお問い合わせからご連絡ください。
HubSpot の導入・活用のご相談も承っています。HubSpot導入支援
ご利用にあたって
- 無償・無保証で提供しています
- HubSpot の仕様変更により、動かなくなる場合があります
- 本ツールの利用により生じた損害について、当社は責任を負いません