Text to radio & checkbox ご利用ガイド（テンプレートマーケットプレイス版）

• フォームに置いた 1 行テキストの項目の位置に、ラジオボタン（1 つ選ぶ）、チェックボックス（複数選べる）、ドロップダウン（1 つ選ぶ）のいずれかで選択肢を表示します
• 選択肢は、モジュールの設定欄に 1 行に 1 つ書くだけで作れます
• 選んだ選択肢の文字が、そのまま項目に保存されます。チェックボックスで複数選んだときは、選択肢の並び順に、区切りの文字（標準は「;」）でつないで保存します（例：「検索エンジン;展示会」）
• 「その他」を選んだときに、自由に入力できる欄を出せます。入力した内容は「その他（入力した内容）」の形で保存されます
• ラジオボタン・チェックボックスの選択肢を、横に並べて表示できます

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

ご注意

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

1. フォームを準備する

1. HubSpot で、選んだ内容を入れる 1 行テキストのプロパティを作ります（例：「当社を知ったきっかけ」）。すでにあるプロパティを使っても構いません
2. フォームの編集画面を開き、そのプロパティの項目をフォームに置きます。必ず選んでもらうときは「必須」をオンにします
3. フォームを公開します
4. 項目の名前（フォームに表示される項目名か、プロパティの「内部名」）を控えておきます（例：項目名「当社を知ったきっかけ」、内部名 how_did_you_hear）

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

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

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

モジュールの設定欄の「スタイル」タブで、選択中の色（ラジオボタン・チェックボックスを選んだときの色）を変えられます。「選択肢を横に並べる」をオンにすると、ラジオボタン・チェックボックスの選択肢を横に並べて表示します。「標準の見た目を使う」をオフにすると、余白や色を付けずに表示します。

選択肢の見た目は、サイトの CSS より弱く設定しているため、サイトの CSS が常に優先されます。ラジオボタン・チェックボックス・ドロップダウン・自由に入力できる欄には、お使いのテーマのフォームの見た目が当たります。

調整に使えるクラス名：

選択肢が表示されない

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

「その他」を選んでも入力する欄が出ない

• 「「その他」を選んだら自由に入力できる欄を出す」がオンになっているかを確認してください
• 「その他の選択肢」と、「選択肢」に書いた行の文字が一字一句同じかを確認してください

動作の記録を見る

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

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