HubSpot フォームで、複数のファイルをドラッグ＆ドロップで受け付ける無償ツールを公開しました（add apps 9）
採用の応募で履歴書と職務経歴書を、見積もりの依頼で図面や仕様書を、というように、フォームでファイルを受け取りたい場面は多くあります。HubSpot のフォームにも「ファイル」の項目がありますが、受け付けるファイルの種類や容量を決めることができません。思わぬ種類のファイルや、大きすぎるファイルが届くこともあります。入力する方にとっても、選んだファイルを一覧で確かめたり、1 件だけ取り消したりしにくい作りです。
そこで、HubSpot フォームの「ファイル」の項目を、ドラッグ＆ドロップで追加でき、ファイルの種類・容量・件数をその場でチェックする欄にする無償ツール「添付ファイル送信」を公開しました。コードを 1 つ貼り付けるだけで使えます。ファイルのアップロードと保存は HubSpot が行うため、ファイルが当社のサーバーを通ることはありません。
add apps は、HubSpot を日本の商習慣に合わせて使いやすくする小さな部品です。「フォームの確認画面」「入力補助」「グループ選択」「希望日ピッカー」「郵便番号検索」「ふりがなの自動入力」「全角半角コンバータ」「テキスト項目をフォームだけ選択型に」に続く 9 本目です。
できること
- ファイルを枠にドラッグして置くか、「ファイルを選ぶ」ボタンから選んで追加できます
- 受け付けるファイルの種類を選べます。種類は、ファイル名の拡張子とファイルの種類の両方で判定します
- ファイルごとの容量の上限、合計の容量の上限、ファイルの数の上限を決められます
- 受け付けないファイルは、理由を表示して一覧に加えません。HubSpot にもアップロードしません
- 追加したファイルは一覧に並び、ファイルごとに「取消」で外せます
- ファイル名を、頭に日付を付けた名前や、日本語を使わない名前にそろえられます（受け取る側で文字化けするのを防げます）
- 項目が必須のときは、ファイルを選ばずに「次へ」「送信」を押すと、メッセージを表示して先へ進めません
| 受け付けるファイルの種類（選べるもの） | 拡張子 |
|---|---|
| Word・Excel・PowerPoint | doc・docx・xls・xlsx・ppt・pptx |
| 画像 | jpg・jpeg・png・gif・heic |
| ZIP | zip |
| テキスト・CSV | txt・csv |
| 図面 | dwg・dxf |
| 使い方の例 | 設定の例 |
|---|---|
| 採用の応募（履歴書・職務経歴書） | PDF・Word、1 ファイル 10MB まで、3 件まで |
| 見積もりの依頼（図面・仕様書） | PDF・図面・ZIP、1 ファイル 50MB まで、合計 100MB まで |
| 不具合のご連絡（画面の画像） | 画像、1 ファイル 10MB まで、5 件まで |
送信は HubSpot フォームの標準のボタンで行います。送信されたファイルは、HubSpot の標準の「ファイル」の項目と同じように、コンタクトのファイルのプロパティに保存されます。送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。
使える条件
| 対象 | 使えるか |
|---|---|
| 「フォームエディター」で作ったフォーム | 使えます |
| 「旧フォームエディター」で作ったフォーム | 使えません |
| HubSpot のランディングページ・ウェブサイトページに置いたフォーム | 使えます |
| HubSpot 以外のサイトに埋め込んだフォーム | 使えません |
| フォームの共有リンク（フォームだけを開く URL） | 使えません |
- フォームに「ファイル」の項目を置いておく必要があります。複数のファイルを受け付けるときは、その項目の「複数ファイルを許可」をオンにします
- HubSpot は 1 ファイル 100MB 以上のファイルを受け付けません。また、合計が大きすぎるとアップロードが進まなくなるため、合計の上限は 450MB までにしています
- 送信されたファイルは公開されません。HubSpot にログインした方だけが開けます
- ファイルを当社のサーバーに送ることはありません。種類・容量のチェックは、ご覧になっているブラウザの中だけで行います
- 「フォームの確認画面」などほかの add apps と一緒に使えます
使い方（3 ステップ）
フォームを準備する
- HubSpot で、フォームの編集画面を開き、「ファイル」の項目をフォームに置きます
- 複数のファイルを受け付けるときは、その項目の「複数ファイルを許可」をオンにします
- フォームを公開します
設定ページでコードを作る
- 設定ページを開きます
- HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（
https://app.hubspot.com/forms/…またはhttps://app.hubspot.com/submissions/…で始まるもの）を貼り付け、「読み取る」を押します - ファイルの項目、受け付けるファイルの種類、容量と件数の上限、ファイル名のそろえ方を設定します。フォームに「ファイル」の項目が 1 つだけなら、ファイルの項目は自動で入ります
- 「コードをコピー」を押します
ページに貼り付ける
- HubSpot で、フォームを置いたページの編集画面を開きます
- 「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
- ページを更新（公開）します
- 公開したページで、ファイルを追加して送信し、コンタクトのファイルのプロパティに保存されることを確かめます
詳しい使い方は、ご利用ガイドをご覧ください。
設定を変えた、項目を変えた場合は
受け付けるファイルの種類や上限を変えるとき、フォームの項目を変えたときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。add apps の新しい版も、作り直したコードに含まれます。
困ったとき
ファイルを置ける枠が表示されない
- 「ファイル」の項目がフォームに置かれているか、非表示になっていないか、フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
- コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
ファイルを追加できない
- 一覧の上に表示される理由（受け付けていない種類、容量の上限を超えている、件数の上限に達している など）を確認してください
- 「複数ファイルを許可」がオフの項目では、ファイルは 1 件だけです
動作の記録を見る
ページの URL の末尾に ?kp_debug=1 を付けて開くと（すでに ? がある場合は &kp_debug=1）、ページの下部に動作の記録が表示されます。お問い合わせの際は、この記録を添えてください。
同時に公開した add apps
9 本目と同時に、次の 2 本も公開しました。
- 「テキスト項目をフォームだけ選択型に」：1 行テキストの項目を、フォームの上でだけラジオボタン・チェックボックス・ドロップダウンで選べる形にします
- 「EFO 機能」：必須項目の色付け、残りの必須項目数の表示、誤りのその場での表示など、フォームの入力を助ける機能を足します
新しい add apps の公開や更新のお知らせは、メールで受け取れます。add apps のページを開くと右下に登録の枠が表示されますので、メールアドレスをご登録ください。
お問い合わせ
使い方がわからないとき、うまく動かないとき、ご要望は、add apps のお問い合わせからご連絡ください。
HubSpot の導入・活用のご相談も承っています。HubSpot導入支援
ご利用にあたって
- 無償・無保証で提供しています
- HubSpot の仕様変更により、動かなくなる場合があります
- 本ツールの利用により生じた損害について、当社は責任を負いません