入力補助 ご利用ガイド（テンプレートマーケットプレイス版）

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

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

文字数の上限を付ける

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

入力の種類を決める

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

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

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

ご注意

• 電話番号の項目と、文字数の上限・入力の種類を付ける項目は、非表示にせずにフォームに置いてください。非表示の項目には、文字数の上限と入力の種類を付けられません
• 電話番号の項目の「必須」は、モジュールの設定欄の「必須」で判定します。ラベルの必須の印はフォームの項目の設定に従うため、フォームの項目の「必須」と、モジュールの設定欄の「必須」をそろえてください
• 入力の種類が合わないときは、送信を止めるだけです。入力された値を自動で書き換えることはありません。また、入力が空の項目は止めません。入力を必須にするかどうかは、フォームの項目の「必須」で決めてください
• 入力内容を外部に送ることはありません。入力のチェックは、ご覧になっているブラウザの中だけで行います
• 「フォームの確認画面」（add apps 1）と一緒に使えます。確認画面には、電話番号が入力されたままの表記で表示されます
• お使いのテーマ・テンプレートはそのまま使えます。ページのドラッグ＆ドロップのエリアにモジュールを置いてください。ドラッグ＆ドロップのエリアがないテンプレートでは、モジュールを置けません
• 置き換えた電話番号の入力欄には、HubSpot フォームの入力欄と同じ見た目が付きます。見た目はサイトの CSS が優先されます。ただし、テーマが独自の JavaScript でフォームの見た目や動きを大きく作り変えている場合は、正しく表示されないことがあります
• 同じフォームに、同じ add apps を 2 つ以上入れないでください（モジュールを 2 つ置く、設定ページで作ったコードと一緒に使う など）。二重に動きます

1. フォームを準備する

1. HubSpot でフォームの編集画面を開きます
2. 電話番号を置き換える場合は、電話番号のプロパティ（例：「電話番号」）の項目をフォームに置きます。必ず入力してもらうときは「必須」をオンにします
3. 入力されたままの表記も保存する場合は、そのためのプロパティ（1 行テキスト）を作り、非表示の項目としてフォームに置きます
4. 文字数の上限・入力の種類を付ける項目（1 行テキスト・複数行テキスト）がフォームにあることを確かめます
5. フォームを公開します

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

1. HubSpot で、フォームを置いたページの編集画面を開きます
2. 「追加」から「add apps 入力補助」のモジュールを探し、ページのドラッグ＆ドロップのエリアに置きます。置く場所は、フォームの近くでなくても構いません。モジュールを置いた位置には何も表示されず、入力欄・文字数の表示・メッセージはフォームの中に表示されます
3. モジュールの設定欄で、次の項目を設定します。「電話番号の置き換え」と「文字数の上限と入力の種類」は、使うものだけを追加します。どちらも追加していないときは、ページエディターの中でだけ、モジュールを置いた位置に設定を確認する案内が表示されます（公開ページには表示されません）

「電話番号の置き換え」の設定欄：

「文字数の上限と入力の種類」の設定欄：

1. ページを更新（公開）します
2. 公開したページで、次のことを確かめます
   • 電話番号の項目が国番号を選ぶ欄のない入力欄になり、文字数の表示が出ること
   • 電話番号が未入力のまま、または入力の種類が合わないまま「送信」を押すと、止まること
   • 送信すると、コンタクトの電話番号のプロパティに、選んだ保存形式で保存されること

目印の文言を使う場合

電話番号の入力欄を、フォームの項目の位置とは別の場所に出したいときに使います。

1. フォームの編集画面で、電話番号のプロパティの項目を非表示の項目にします。入力された電話番号は、この項目に保存されます
2. 入力欄を表示したい位置にリッチテキストを置き、目印の文言（例：[[kp-phone]]）を書きます
3. モジュールの設定欄の「電話番号の置き換え」で、「目印の文言」に同じ文言を、「ラベル」に入力欄の上に出す項目名を入れます。非表示の項目は、「保存先の項目」にプロパティの内部名で書いてください

目印の文言の位置に、電話番号の入力欄が表示されます。

モジュールの設定欄の「スタイル」タブで、メッセージの文字の色（未入力や形式の誤り、文字数の超過を知らせるメッセージ）と、文字数の表示の色を変えられます。

置き換えた電話番号の入力欄は、HubSpot フォームの入力欄と同じクラス名で表示するため、フォームのスタイルがそのまま当たります。入力補助の見た目は、サイトの CSS より弱く設定しているため、サイトの CSS が常に優先されます。

調整に使えるクラス名：

文字数の表示と、文字数の超過・入力の種類のメッセージは、項目を包む要素の data-kp-counter 属性の内容を表示しています（メッセージのときは data-kp-over="true" が付きます）。調整するときは [data-kp-counter]::after を対象にしてください。

電話番号の入力欄が置き換わらない

• モジュールの設定欄で、フォームと「保存先の項目」が正しく設定されているかを確認してください
• 電話番号の項目が非表示になっていないかを確認してください（目印の文言を使う場合は、リッチテキストに同じ文言が書いてあるかを確認してください）
• フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
• ページを更新（公開）したかを確認してください

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

• モジュールの設定欄の「文字数の上限と入力の種類」で、その項目を追加し、「上限（文字）」か「入力の種類」を設定したかを確認してください。上限が 0 で入力の種類が「指定なし」の行は使われません
• 項目が非表示になっていないかを確認してください

動作の記録を見る

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

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