add apps 8

テキスト項目をフォームだけ選択型にご利用ガイド

HubSpot のフォームに置いた「1 行テキスト」の項目を、フォームの上ではラジオボタン・チェックボックス・ドロップダウンで選べる形にします。プロパティの種類は 1 行テキストのままなので、すでに保存されているデータや、ほかのフォーム・ワークフロー・レポートには影響しません。「このフォームでだけ選択肢から選んでもらいたい」「選択肢をフォームごとに変えたい」といったときに向いています。設定ページで作ったコードを、フォームを置いたページに貼り付けるだけで使えます。

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

設定ページを開く

できること

1 行テキストの項目の入力欄を隠し、その位置に選択肢を表示します。ラベルと必須の印は、フォームの項目の設定のまま表示します
選び方を、ラジオボタン（1 つ選ぶ）・チェックボックス（複数選べる）・ドロップダウン（1 つ選ぶ）から選べます
選んだ選択肢の文字が、そのまま項目に保存されます。チェックボックスで複数選んだときは、区切りの文字（初期の設定は「;」）でつないで保存します（例：「CRM の導入;フォームの改善」）
「その他」を選んだときに、自由に入力できる欄を出せます。入力した内容は「その他（入力した内容）」の形で保存されます
項目が必須のときは、選ばずに「次へ」「送信」を押すとフォームを先へ進めず、メッセージを表示します
1 つのコードで、10 個までの項目を選択型にできます
フォームにすでに値が入っているとき（ステップを戻ったときなど）は、選択肢と同じ値なら、選んだ状態で表示します

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

使える条件

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

ご注意

選択型にする項目は「1 行テキスト」の項目にして、非表示にせずにフォームに置いてください
選択肢の文字がそのまま保存されます。選択肢の文字を変えると、変える前に保存された値とは別の値になります。リストやワークフローの条件で値を使っている場合は、条件も合わせて直してください
チェックボックスで使うときは、選択肢の文字に区切りの文字（初期の設定は「;」）を入れないでください。保存した値を読み戻すときに正しく分けられません
「その他」の自由入力欄は、選択肢に「その他の選択肢」と同じ文字の行があるときだけ表示されます
プロパティの種類は変わらないため、HubSpot の画面（コンタクトの詳細など）では、ふつうの 1 行テキストとして表示・編集されます
入力内容を外部に送ることはありません。選択の処理は、ご覧になっているブラウザの中だけで行います
「フォームの確認画面」（add apps 1）などほかの add apps と一緒に使えます
お使いのテーマ・テンプレートはそのまま使えます。ただし、テーマが独自の JavaScript でフォームの見た目や動きを大きく作り変えている場合は、正しく動かないことがあります
同じフォームに、同じ add apps を 2 つ以上入れないでください（コードを 2 回貼り付ける、HubSpot のテンプレートマーケットプレイス版のモジュールと一緒に使うなど）。二重に動きます。項目を増やすときは、設定ページで項目を追加してコードを作り直してください

導入の手順

STEP 1

フォームを準備する

HubSpot で、選んだ値を入れる「1 行テキスト」のプロパティを作ります（例：「当社を知ったきっかけ」）。すでにあるプロパティを使っても構いません
フォームの編集画面を開き、その項目をフォームに置きます。必須にするかどうかは、フォームの項目の設定で決めます
フォームを公開します

STEP 2

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

設定ページを開きます
HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（https://app.hubspot.com/forms/… または https://app.hubspot.com/submissions/… で始まるもの）を貼り付け、「読み取る」を押します
「フォームの確認」を確かめます。「要対応」が出た場合は、表示された案内に沿ってフォームや設定を直してください。フォームを読み取れない場合も、項目を入力すればコードを作れます（項目がフォームにあるかは確認できません）

項目ごとに、次の設定欄を入れます。項目は、フォームに表示される項目名か、プロパティの内部名のどちらかを書きます。フォームを読み取ると、入力欄でフォームの項目から選べます。項目は 10 個まで追加できます

設定欄	内容
項目	選択型にする 1 行テキストの項目です（例：当社を知ったきっかけ、how_did_you_hear）
選び方	ラジオボタン（1 つ選ぶ）／チェックボックス（複数選べる）／ドロップダウン（1 つ選ぶ）
選択肢	1 行に 1 つ書きます。選んだ選択肢の文字が、そのまま項目に保存されます
ドロップダウンの未選択の表示	選び方が「ドロップダウン」のときに、何も選んでいない状態で表示する文字です。初期の設定は「選択してください」です
「その他」を選んだら自由に入力できる欄を出す	オンにすると、「その他の選択肢」を選んだときに自由に入力できる欄を出します
その他の選択肢	選ぶと自由に入力できる欄を出す選択肢の文字です。選択肢の行と一字一句同じにします。初期の設定は「その他」です

すべての項目に共通の設定欄を入れます

設定欄	内容
選択肢を横に並べる	ラジオボタン・チェックボックスの選択肢を横に並べます。初期の設定はオフ（縦に並べる）です
未選択のときのメッセージ	項目が必須のときに、選ばずに「次へ」「送信」を押すと表示します。初期の設定は「いずれかを選択してください」です
区切りの文字	チェックボックスで複数選んだときの区切りです。空欄なら「;」です
動作の記録	ブラウザの開発者ツールに出す記録の詳しさです（警告だけ／主な動作／くわしく）

右側のプレビューで、表示と、項目に保存される値を確かめます
「コードをコピー」を押します

STEP 3

ページに貼り付ける

HubSpot で、フォームを置いたページの編集画面を開きます
「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
ページを更新（公開）します
公開したページで、次のことを確かめます
- 項目の入力欄の位置に、選択肢が表示されること
- 選んで送信すると、コンタクトのプロパティに選んだ選択肢の文字が保存されること
- 必須の項目で、選ばずに「次へ」「送信」を押すと、メッセージが表示されること

設定を変えた、項目を変えた場合は

選択肢や選び方を変えるとき、項目を増やすとき、フォームの項目を変えたときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。add apps の新しい版も、作り直したコードに含まれます。

困ったとき

選択肢が表示されない（入力欄のまま）

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

「その他」の入力欄が出ない

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

保存された値が選択肢と違う・複数の値が分かれない

選択肢の文字を変えた場合、変える前に保存された値はそのまま残ります
チェックボックスの選択肢の文字に、区切りの文字（初期の設定は「;」）が含まれていないかを確認してください

動作の記録を見る

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

ご利用にあたって

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