add apps 2

入力補助ご利用ガイド

HubSpot のフォームの電話番号を、国番号を選ぶ欄のない通常の入力欄にします。あわせて、1 行テキスト・複数行テキストの項目に、文字数の上限と入力できる文字の種類を設定できます。設定ページで作ったコードを、フォームを置いたページに貼り付けるだけで使えます。

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

設定ページを開く

できること

電話番号を通常のテキスト欄にする

国番号を選ぶ欄のない、通常の入力欄に置き換えます
「03-1234-5678」「０３－１２３４－５６７８」のように、ハイフンの有無や全角・半角を問わず入力できます。全角で入力された数字は、入力欄を離れたときに半角にそろえて表示します
保存する形は次の 2 つから選べます
- +81 形式（例：+81312345678）。HubSpot の電話番号のプロパティと同じ形です
- 数字のみ（例：0312345678）
入力がない、または桁数が合わない（半角数字 10〜11 桁でない）ときは、「次へ」「送信」を押した時点で止め、メッセージを表示します（必須にしない設定もできます）

文字数の上限を付ける

1 行テキスト・複数行テキストの項目に、文字数の上限を付けられます
入力欄の下に「12 / 100文字」のように、入力した文字数を表示します（表示しない設定もできます）
上限を超えたときは、「次へ」「送信」を押した時点で止め、メッセージを表示して、その項目に移動します

入力の種類を決める

1 行テキスト・複数行テキストの項目ごとに、入力できる文字の種類を決められます。

入力の種類	例	よく使う項目
全角カタカナのみ	ヤマダタロウ	フリガナ
ひらがなのみ	やまだたろう	ふりがな
全角のみ	山田太郎	氏名
半角英数のみ	ABC123	会員番号、ID
半角数字のみ	1000001	郵便番号

空白（全角・半角のスペース）を許すかどうかも、項目ごとに選べます
合わない文字があるときは、入力欄を離れた時点でメッセージを表示し、「次へ」「送信」を押しても先へ進めません

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

使える条件

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

ご注意

入力の種類が合わないときは、送信を止めるだけです。入力された値を自動で書き換えることはありません
電話番号を置き換える場合は、フォームの準備が必要です（下記の STEP 1）。文字数の上限と入力の種類だけを使う場合は、準備は不要です
入力内容を外部に送ることはありません。入力のチェックは、ご覧になっているブラウザの中だけで行います
「フォームの確認画面」（add apps 1）と一緒に使えます

導入の手順

STEP 1

フォームを準備する（電話番号を置き換える場合）

HubSpot でフォームの編集画面を開きます
電話番号のプロパティ（例：「電話番号」）をフォームに入れ、「非表示のフィールド」をオンにします。入力された電話番号は、この項目に保存されます
入力欄を表示したい位置にリッチテキストを置き、[[kp-phone]] と書きます。この文字の位置に、電話番号の入力欄が表示されます
フォームを公開します

STEP 2

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

設定ページを開きます
HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（https://app.hubspot.com/forms/… または https://app.hubspot.com/submissions/… で始まるもの）を貼り付け、「読み取る」を押します
「フォームの確認」を見て、電話番号の準備ができているかを確かめます。「要対応」が出た場合は、表示された案内に沿ってフォームを直し、もう一度読み取ってください
電話番号の入力欄の「ラベル」「入力例の表示」「必須」「保存の形」を決めます
文字数の上限を付ける項目は「上限を付ける」にチェックを入れて文字数を決めます。入力の種類を決める項目は、プルダウンで選びます。空白を入れさせない場合は「空白を許可」のチェックを外します
「コードをコピー」を押します

STEP 3

ページに貼り付ける

HubSpot で、フォームを置いたページの編集画面を開きます
「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。「フォームの確認画面」と一緒に使う場合は、両方のコードを貼り付けます
ページを更新（公開）します
公開したページで、次のことを確かめます
- 電話番号の入力欄と、文字数の表示が出ること
- 電話番号が未入力のまま、または入力の種類が合わないまま「送信」を押すと、止まること

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

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

困ったとき

電話番号の入力欄が表示されない

フォームのリッチテキストに [[kp-phone]] と書いてあるか、電話番号のプロパティが「非表示のフィールド」になっているかを確認してください
フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください

文字数の表示やメッセージが出ない

設定ページで、その項目の「上限を付ける」や入力の種類を設定したかを確認してください
フォームの項目を変えた場合は、設定ページでコードを作り直してください

動作の記録を見る

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

ご利用にあたって

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