HubSpot フォームで、氏名のふりがなを自動で入力する無償ツールを公開しました（add apps 6）
お問い合わせや資料請求、セミナーの申し込みなど、氏名のふりがなを受け取るフォームは多くあります。HubSpot のフォームでは、氏名を入力したあとに、ふりがなをもう一度入力していただくことになります。入力の手間がかかるうえ、ふりがなの入力漏れや、ひらがな・カタカナの混在も起きやすくなります。
そこで、氏名を日本語入力で入力すると、漢字に変換する前の読みを、ふりがなの項目へ自動で入力する無償ツール「ふりがなの自動入力」を公開しました。コードを 1 つ貼り付けるだけで使えます。
add apps は、HubSpot を日本の商習慣に合わせて使いやすくする小さな部品です。「フォームの確認画面」「入力補助」「グループ選択」「希望日ピッカー」「郵便番号検索」に続く 6 本目です。
できること
- 読みを拾う項目（例：姓）に日本語入力で入力すると、変換前の読みを、ふりがなの項目（例：セイ）へ入力します。「山田」と入力すると「ヤマダ」が入ります
- 読みを拾う項目とふりがなの項目の組は、10 組まで設定できます（姓と名、会社名と会社名のふりがな など）
- ふりがなの表記を、全角カタカナ（ヤマダ）かひらがな（やまだ）から選べます
- 「山田」と確定したあと続けて「太郎」と入力したときは、読みを後ろに足していきます（ヤマダタロウ）
- ふりがなの項目にすでに入力（前回の入力、手で直した値など）があるときは、書き換えないようにできます
| 使い方の例 | 読みを拾う項目 → ふりがなの項目 |
|---|---|
| お問い合わせ・資料請求・セミナーの申し込み | 姓 → セイ、名 → メイ |
| 法人向けのお申し込み | 会社名 → 会社名（フリガナ） |
ふりがなの項目は、ふつうの入力欄のままです。読みがうまく拾えなかったときは、入力する方が手で直せます。送信は HubSpot フォームの標準のボタンで行います。送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。
使える条件
| 対象 | 使えるか |
|---|---|
| 「フォームエディター」で作ったフォーム | 使えます |
| 「旧フォームエディター」で作ったフォーム | 使えません |
| HubSpot のランディングページ・ウェブサイトページに置いたフォーム | 使えます |
| HubSpot 以外のサイトに埋め込んだフォーム | 使えません |
| フォームの共有リンク（フォームだけを開く URL） | 使えません |
- 拾うのは、変換する前に入力した読みです。名前の読みが変換前の入力と違うとき（例：「わ」と入力して「和」にした）は、ふりがなを手で直していただく必要があります
- スマートフォンの一部の入力方式、予測変換の候補を直接選んだとき、音声入力、貼り付け、ブラウザの自動入力では、読みを拾えません。ふりがなの項目は非表示にせず、手で直せるようにしておいてください
- 入力内容を外部に送ることはありません。読みの取り込みは、ご覧になっているブラウザの中だけで行います
- 「フォームの確認画面」などほかの add apps と一緒に使えます
使い方（3 ステップ）
フォームを準備する
- HubSpot で、ふりがなを入れる「1 行テキスト」のプロパティを作ります（例：「姓（カナ）」「名（カナ）」）。すでにあるプロパティを使っても構いません
- フォームの編集画面を開き、読みを拾う項目（例：姓、名）と、ふりがなの項目をフォームに置きます
- フォームを公開します
設定ページでコードを作る
- 設定ページを開きます
- HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（
https://app.hubspot.com/forms/…またはhttps://app.hubspot.com/submissions/…で始まるもの）を貼り付け、「読み取る」を押します - 読みを拾う項目とふりがなの項目の組、ふりがなの表記を設定します
- 「コードをコピー」を押します
ページに貼り付ける
- HubSpot で、フォームを置いたページの編集画面を開きます
- 「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
- ページを更新（公開）します
- 公開したページで、読みを拾う項目に日本語入力で入力すると、ふりがなの項目に読みが入ることを確かめます
詳しい使い方は、ご利用ガイドをご覧ください。
設定を変えた、項目を変えた場合は
項目の組やふりがなの表記を変えるとき、フォームの項目を変えたときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。add apps の新しい版も、作り直したコードに含まれます。
困ったとき
ふりがなが入らない
- 読みを拾う項目とふりがなの項目がフォームに置かれているか、フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
- ふりがなの項目にすでに入力がないかを確認してください。初期の設定では、入力がある間は書き換えません
- コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
ふりがなが二重になる・余分な読みが残る
- 読みを拾う項目の途中を書き換えても、ふりがなは追従しません。読みを拾う項目をすべて消してから入力し直すか、ふりがなを手で直してください
動作の記録を見る
ページの URL の末尾に ?kp_debug=1 を付けて開くと（すでに ? がある場合は &kp_debug=1）、ページの下部に動作の記録が表示されます。お問い合わせの際は、この記録を添えてください。
次の add apps
11 月 13 日（金）は 7 本目として、フォームに入力された文字の全角・半角や空白のゆれを、項目ごとに決めた規則で自動でそろえる「全角半角コンバータ」を公開予定です。
新しい add apps の公開や更新のお知らせは、メールで受け取れます。add apps のページを開くと右下に登録の枠が表示されますので、メールアドレスをご登録ください。
お問い合わせ
使い方がわからないとき、うまく動かないとき、ご要望は、add apps のお問い合わせからご連絡ください。
HubSpot の導入・活用のご相談も承っています。HubSpot導入支援
ご利用にあたって
- 無償・無保証で提供しています
- HubSpot の仕様変更により、動かなくなる場合があります
- 本ツールの利用により生じた損害について、当社は責任を負いません