add apps 3

グループ選択ご利用ガイド

HubSpot のフォームのチェックボックス・ラジオボタンの選択肢を、見出しごとに開いて選べる形にまとめて表示します。選択肢が多い項目でも、目的の選択肢を探しやすくなります。設定ページで作ったコードを、フォームを置いたページに貼り付けるだけで使えます。

提供: 株式会社ハレフル（add apps）
料金: 無償
版: 1.0.0

設定ページを開く

できること

フォームに置いたチェックボックス・ラジオボタンの項目の選択肢を、グループに分けて表示します
グループの見出し、並び順、どの選択肢をどのグループに入れるかを決められます。表示しない選択肢も選べます
グループごとに、最初から開いておくかを決められます
選んだ値は、その項目にそのまま保存されます。HubSpot のプロパティの内部値で保存されるため、リストやワークフローも今までどおり使えます
ページの URL に ?パラメータ名=内部値 を付けると、その選択肢を選んだ状態でフォームを開けます（複数は「,」区切り）。資料のページやメールのリンクから、選んだ状態で案内できます

送信は HubSpot フォームの標準のボタンで行います。送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。

使える条件

対象	使えるか
「フォームエディター」で作ったフォーム	使えます
「旧フォームエディター」で作ったフォーム	使えません
HubSpot のランディングページ・ウェブサイトページに置いたフォーム	使えます
HubSpot 以外のサイトに埋め込んだフォーム	使えません
フォームの共有リンク（フォームだけを開く URL）	使えません

ご注意

対象は、チェックボックス（複数選べるもの）とラジオボタンの項目です。ドロップダウンの項目と、チェックボックスが 1 つだけの項目は対象外です
項目は非表示にせずにフォームに置いてください。非表示の項目は、選択肢を読み取れません
必須かどうかは、フォームの項目の設定に従います
項目のラベルは、フォームの項目のものがそのまま表示されます
入力内容を外部に送ることはありません。表示の切り替えは、ご覧になっているブラウザの中だけで行います
「フォームの確認画面」（add apps 1）・「入力補助」（add apps 2）と一緒に使えます。確認画面には、選んだ選択肢が表示名で表示されます

導入の手順

STEP 1

フォームを準備する

HubSpot でフォームの編集画面を開きます
グループに分けたいチェックボックスかラジオボタンの項目を、フォームに置きます。すでに置いてある項目なら、そのままで構いません
フォームを公開します

STEP 2

設定ページでコードを作る

設定ページを開きます
HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（https://app.hubspot.com/forms/… または https://app.hubspot.com/submissions/… で始まるもの）を貼り付け、「読み取る」を押します
「フォームの確認」で、グループに分けられる項目が見つかったことを確かめます。「要対応」が出た場合は、表示された案内に沿ってフォームを直し、もう一度読み取ってください
グループに分ける項目を選びます
「＋グループを追加」でグループを作り、見出しを入力します。最初から開いておくグループには「最初から開いておく」にチェックを入れます
選択肢の表で、選択肢ごとに入れるグループを選びます。表示しない選択肢は「入れない」にします
必要に応じて、未選択のときのメッセージ（必須の項目のとき）と、URL パラメータの名前を入力します
右側のプレビューで表示を確かめ、「コードをコピー」を押します

STEP 3

ページに貼り付ける

HubSpot で、フォームを置いたページの編集画面を開きます
「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
ページを更新（公開）します
公開したページで、次のことを確かめます
- 項目の位置に、グループに分けた選択肢が表示されること
- 選択肢を選んで送信すると、その値が保存されること

見た目の調整

グループの見出しや区切り線などには、簡単な見た目が付きます。この見た目はサイトの CSS より弱く設定しているため、サイトの CSS が常に優先されます。

調整に使えるクラス名：

クラス名	対象
`kp-gs`	グループ選択の全体
`kp-gs-group`	1 つのグループ（開いているときは `is-open`、選択があるときは `is-selected` が付きます）
`kp-gs-toggle`	グループの見出し（押すと開閉します）
`kp-gs-panel`	グループの中身
`kp-gs-option`	1 つの選択肢
`kp-gs-message`	未選択のときのメッセージ

項目を追加した、更新した場合は

フォームの項目や、プロパティの選択肢を追加・更新したときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。add apps の新しい版も、作り直したコードに含まれます。

困ったとき

グループに分けた選択肢が表示されない

項目が非表示になっていないか、フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
フォームの項目を差し替えた場合は、設定ページでコードを作り直してください

新しく追加した選択肢が表示されない

設定ページでコードを作り直し、新しい選択肢をグループに入れてください

動作の記録を見る

ページの URL の末尾に ?kp_debug=1 を付けて開くと（すでに ? がある場合は &kp_debug=1）、ページの下部に動作の記録が表示されます。お問い合わせの際は、この記録を添えてください。

ご利用にあたって

無償・無保証で提供しています
HubSpot の仕様変更により、動かなくなる場合があります
本ツールの利用により生じた損害について、当社は責任を負いません