add apps 6

ふりがなの自動入力ご利用ガイド

HubSpot のフォームで、氏名などを日本語入力で入力すると、漢字に変換する前の読みを、ふりがなの項目へ自動で入力します。「姓」「名」を入力するだけで「セイ」「メイ」が埋まるため、入力の手間が減り、ふりがなの入力漏れも防げます。お問い合わせ、資料請求、セミナーの申し込みなど、氏名のふりがなを受け取るフォームに向いています。設定ページで作ったコードを、フォームを置いたページに貼り付けるだけで使えます。

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

設定ページを開く

できること

読みを拾う項目（例：姓）に日本語入力で入力すると、変換前の読みを、ふりがなの項目（例：セイ）へ入力します。「山田」と入力すると、ふりがなの項目に「ヤマダ」が入ります
読みを拾う項目とふりがなの項目の組は、10 組まで設定できます（姓と名、会社名と会社名のふりがななど）
ふりがなの表記を、全角カタカナ（ヤマダ）かひらがな（やまだ）から選べます。半角カタカナで入力された読みも、選んだ表記にそろえます
「山田」と確定したあと続けて「太郎」と入力するように、何回かに分けて入力したときは、読みを後ろに足していきます（ヤマダタロウ）
日本語入力を使わずに、かなを直接入力したときも、そのかなをふりがなに足します
読みを拾う項目をすべて消すと、ふりがなの項目も空にします
ふりがなの項目にすでに入力（前回の入力、手で直した値など）があるときは、書き換えないようにできます

ふりがなの項目は、ふつうの入力欄のままです。読みがうまく拾えなかったときは、入力する方が手で直せます。送信は HubSpot フォームの標準のボタンで行います。送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。

使える条件

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

ご注意

読みを拾う項目とふりがなの項目は、どちらも「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 組まで追加できます
ふりがなの表記	全角カタカナ（ヤマダ）／ひらがな（やまだ）
ふりがなの欄に入力があるときは上書きしない	オンにすると、ふりがなの項目にすでに入力があるときは、その値を書き換えません。初期の設定はオンです
動作の記録	ブラウザの開発者ツールに出す記録の詳しさです（警告だけ／主な動作／くわしく）

「コードをコピー」を押します

STEP 3

ページに貼り付ける

HubSpot で、フォームを置いたページの編集画面を開きます
「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
ページを更新（公開）します
公開したページで、次のことを確かめます
- 読みを拾う項目に日本語入力で入力すると、ふりがなの項目に読みが入ること
- 送信すると、コンタクトのふりがなのプロパティに保存されること

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

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

困ったとき

ふりがなが入らない

読みを拾う項目とふりがなの項目がフォームに置かれているか、フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
設定ページで、読みを拾う項目とふりがなの項目の組が正しく設定されているかを確認してください。片方だけが入っている組や、2 つの欄に同じ項目を入れた組があるときは、設定ページはコードを作らずに直し方を表示します
ふりがなの項目にすでに入力がないかを確認してください。「ふりがなの欄に入力があるときは上書きしない」がオンのときは、入力がある間は書き換えません
「ご注意」に挙げた入力（予測変換の候補を直接選ぶ、貼り付けなど）では読みを拾えません
コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
フォームの項目を差し替えた場合は、設定ページでコードを作り直してください

ふりがなが二重になる・余分な読みが残る

読みを拾う項目の途中を書き換えても、ふりがなは追従しません。読みを拾う項目をすべて消してから入力し直すか、ふりがなを手で直してください

動作の記録を見る

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

ご利用にあたって

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