グループ選択 ご利用ガイド（テンプレートマーケットプレイス版）

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

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

ご注意

• 対象は、チェックボックス（複数選べるもの）とラジオボタンの項目です。ドロップダウンの項目と、チェックボックスが 1 つだけの項目は対象外です
• 項目は非表示にせずにフォームに置いてください。フォームでは、その項目の標準の選択肢は隠れ、同じ位置にグループに分けた選択肢が表示されます
• 項目のラベル、複数選べるか（チェックボックスかラジオボタンか）、必須かどうかは、フォームの項目の設定に従います。必須の項目で、選ばずに「次へ」「送信」を押したときは、選択肢の下にメッセージを表示します
• グループに書いた選択肢が、フォームの項目の選択肢にないときは、その選択肢は表示されません。同じ選択肢を 2 つのグループに書いたときは、最初のグループにだけ表示します
• 入力内容を外部に送ることはありません。表示の切り替えは、ご覧になっているブラウザの中だけで行います
• 「フォームの確認画面」（add apps 1）などほかの add apps と一緒に使えます。確認画面には、選んだ選択肢が表示名で表示されます
• お使いのテーマ・テンプレートはそのまま使えます。ページのドラッグ＆ドロップのエリアにモジュールを置いてください。ドラッグ＆ドロップのエリアがないテンプレートでは、モジュールを置けません
• 見た目はサイトの CSS が優先されます。ただし、テーマが独自の JavaScript でフォームの見た目や動きを大きく作り変えている場合は、正しく表示されないことがあります
• 同じ項目に、同じ add apps を 2 つ以上入れないでください（モジュールを 2 つ置く、設定ページで作ったコードを「HeadのHTML」に貼り付けたうえでモジュールも置く など）。二重に動きます。別の項目をグループに分けるときは、項目ごとにモジュールを置いてください

1. フォームを準備する

1. HubSpot でフォームの編集画面を開きます
2. グループに分けたいチェックボックスかラジオボタンの項目を、フォームに置きます。すでに置いてある項目なら、そのままで構いません。必ず選んでもらうときは「必須」をオンにします
3. フォームを公開します
4. 項目の名前（フォームに表示される項目名か、プロパティの「内部名」）と、選択肢の名前を控えておきます（例：項目名「ご興味のあるサービス」、内部名 service_interest）

2. ページにモジュールを置く

1. HubSpot で、フォームを置いたページの編集画面を開きます
2. 「追加」から「add apps グループ選択」のモジュールを探し、ページのドラッグ＆ドロップのエリアに置きます。置く場所は、フォームの近くでなくても構いません。グループに分けた選択肢は、ページを開くとフォームの項目の位置に移って表示されます
3. モジュールの設定欄で、次の項目を設定します

1. ページを更新（公開）します
2. 公開したページで、次のことを確かめます
   • 項目の位置に、グループに分けた選択肢が表示されること
   • 選択肢を選んで送信すると、その値が保存されること

URL パラメータには、選択肢の内部値を書いてください（表示名では選ばれません）。ラジオボタンの項目では、最初の 1 つだけを選びます。

モジュールの設定欄の「スタイル」タブで、見出しの文字の色、選択中の色（選択肢を選んだグループの見出しと、チェックの色）、枠線の色、背景の色、角の丸み（0〜40 ピクセル）を変えられます。「標準の見た目を使う」をオフにすると、枠線や余白を付けずに表示します。

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

調整に使えるクラス名：

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

• モジュールの設定欄で、フォームとグループに分ける項目が正しく設定されているかを確認してください。設定が足りないときや、項目がフォームに見つからないときは、ページの編集画面の中で、モジュールを置いた位置に何が足りないかの案内が表示されます（公開したページには表示されません）
• 項目が非表示になっていないか、項目がチェックボックスかラジオボタンか、フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
• 「このグループに入れる選択肢」に、1 行に 1 つ書いているかを確認してください
• ページを更新（公開）したかを確認してください

一部の選択肢が表示されない

• どのグループにも入れていない選択肢は表示されません。表示したい選択肢を、いずれかのグループに書いてください
• グループに書いた選択肢の名前が、フォームの項目の選択肢の表示名か内部値と合っているかを確認してください
• プロパティに選択肢を追加したときは、その選択肢をグループに書き足し、ページを更新（公開）してください

URL パラメータで選んだ状態にならない

• 設定欄の「初期選択に使う URL パラメータ」と、URL に付けたパラメータの名前が同じかを確認してください
• パラメータの値には、選択肢の内部値を書いてください

動作の記録を見る

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

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