HubSpot フォームで、全角・半角や空白のゆれを自動でそろえる無償ツールを公開しました(add apps 7)

フォームに入力される会社名や電話番号、ふりがなは、人によって書き方がばらつきます。全角の英数字と半角の英数字、半角カタカナ、続いた空白、いろいろなハイフンが混ざると、HubSpot のコンタクトで検索や重複の確認、リストの絞り込みがしにくくなります。あとからデータを直すのも手間がかかります。
そこで、フォームに入力された文字を、項目ごとに決めた規則で自動でそろえる無償ツール「全角半角コンバータ」を公開しました。コードを 1 つ貼り付けるだけで使えます。
add apps は、HubSpot を日本の商習慣に合わせて使いやすくする小さな部品です。「フォームの確認画面」「入力補助」「グループ選択」「希望日ピッカー」「郵便番号検索」「ふりがなの自動入力」に続く 7 本目です。

できること
項目ごとに、次の変換のオン・オフを選べます。
| 変換 | 例 |
|---|---|
| 英数字・記号を半角に | ABC123@ → ABC123@ |
| 半角カタカナを全角に | ガイド → ガイド |
| カタカナをひらがなに | ヤマダ → やまだ |
| 続く空白を半角の空白ひとつにそろえる | 株式会社 ハレフル → 株式会社 ハレフル |
| 空白をすべて消す | 03 1234 5678 → 0312345678 |
| ハイフン・長音のゆれを「-」にそろえる | 03ー1234-5678 → 03-1234-5678 |
| 前後の空白を消す | 「 山田 」→「山田」 |
- 入力欄から離れたときに変換し、入力欄の値を書き換えます。「次へ」「送信」を押したときにも、変換が済んでいない項目があれば変換します
- 変換する項目は、30 項目まで設定できます
| 使い方の例 | 選ぶ変換 |
|---|---|
| 会社名・住所 | 英数字・記号を半角に、半角カタカナを全角に、続く空白をそろえる、前後の空白を消す |
| 電話番号・郵便番号 | 英数字・記号を半角に、空白をすべて消す、ハイフン・長音のゆれをそろえる |
| ふりがな(ひらがなで受け取る) | 半角カタカナを全角に、カタカナをひらがなに |
送信は HubSpot フォームの標準のボタンで行います。送信後の動き(お礼の表示、通知、ワークフローなど)は今までどおりです。
使える条件
| 対象 | 使えるか |
|---|---|
| 「フォームエディター」で作ったフォーム | 使えます |
| 「旧フォームエディター」で作ったフォーム | 使えません |
| HubSpot のランディングページ・ウェブサイトページに置いたフォーム | 使えます |
| HubSpot 以外のサイトに埋め込んだフォーム | 使えません |
| フォームの共有リンク(フォームだけを開く URL) | 使えません |
- 変換できるのは、文字を入力する項目(1 行テキスト、複数行テキスト、メールアドレス、電話番号など)です。チェックボックスやドロップダウンなどの選んで入力する項目は変換しません
- 入力内容を外部に送ることはありません。変換は、ご覧になっているブラウザの中だけで行います
- 「フォームの確認画面」などほかの add apps と一緒に使えます
使い方(3 ステップ)
フォームを準備する
- HubSpot でフォームの編集画面を開き、変換したい項目がフォームに置かれていることを確認します
- フォームを公開します
設定ページでコードを作る
- 設定ページを開きます
- 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 月 16 日(月)は 8 本目として、1 行テキストの項目を、ラジオボタン・チェックボックス・ドロップダウンで選べる形にする「テキスト項目をフォームだけ選択型に」を公開予定です。
新しい add apps の公開や更新のお知らせは、メールで受け取れます。add apps のページを開くと右下に登録の枠が表示されますので、メールアドレスをご登録ください。
お問い合わせ
使い方がわからないとき、うまく動かないとき、ご要望は、add apps のお問い合わせからご連絡ください。
HubSpot の導入・活用のご相談も承っています。HubSpot導入支援
ご利用にあたって
- 無償・無保証で提供しています
- HubSpot の仕様変更により、動かなくなる場合があります
- 本ツールの利用により生じた損害について、当社は責任を負いません