add apps 4

希望日ピッカーご利用ガイド

HubSpot のフォームで、第 1〜第 3 希望の日付と時間帯を、カレンダーから選べるようにします。土日祝日や休業日は選べないため、受け付けられない日を指定されることがありません。設定ページで作ったコードを、フォームを置いたページに貼り付けるだけで使えます。

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

設定ページを開く

できること

フォームに置いた 1 行テキストの項目（「第1希望日」など）の位置に、カレンダーを表示します。第 1〜第 3 希望は、カレンダーの上のタブで切り替えます
土曜日・日曜日・祝日を除くか、何営業日後から選べるか、何日先まで選べるかを決められます。休業日も指定できます
日付を選んだあとに選ぶ時間帯（例：午前・午後）を決められます。時間帯を使わず、日付だけを選ぶこともできます
同じ日を別の希望に選ぶことはできません
選んだ日時は、「2026年11月13日（金）午後」のような文字で、それぞれの項目に保存されます。日付の書き方は 3 種類から選べます

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

使える条件

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

ご注意

希望日を入れる項目は、1 行テキストのプロパティです。日付のプロパティには保存できません
項目は非表示にせずにフォームに置いてください。フォームでは、その項目の入力欄は隠れ、最初の項目の位置にカレンダーが表示されます
必須かどうかは、フォームの項目の設定に従います。必須の希望を選ばずに「次へ」「送信」を押したときは、カレンダーの下にメッセージを表示します
祝日は、内閣府が公表している「国民の祝日」です。コードに祝日の一覧が含まれているため、翌年の祝日が公表されたら（例年 2 月ごろ）コードを作り直してください
入力内容を外部に送ることはありません。表示の切り替えは、ご覧になっているブラウザの中だけで行います
「フォームの確認画面」（add apps 1）などほかの add apps と一緒に使えます

導入の手順

STEP 1

フォームを準備する

HubSpot で、希望日を入れる 1 行テキストのプロパティを作ります（例：「第1希望日」「第2希望日」「第3希望日」）。すでにあるプロパティを使っても構いません
フォームの編集画面を開き、作ったプロパティの項目をフォームに置きます。第 1 希望を必須にする場合は、その項目を必須にします
フォームを公開します

STEP 2

設定ページでコードを作る

設定ページを開きます
HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（https://app.hubspot.com/forms/… または https://app.hubspot.com/submissions/… で始まるもの）を貼り付け、「読み取る」を押します
「フォームの確認」で、希望日を入れられる項目が見つかったことを確かめます。「要対応」が出た場合は、表示された案内に沿ってフォームを直し、もう一度読み取ってください
第 1〜第 3 希望に使う項目を選びます。ラベルに「希望」を含む項目は、最初から割り当てられています。使わない希望は「使わない」にします
選べる日（除く曜日・祝日、選べる最初の日、選べる期間、休業日）を決めます。休業日は 1 行に 1 日（例：2026-12-29）を入力します
時間帯と日付の書き方を決めます。保存される文字の例が表示されます
右側のプレビューで表示を確かめ、「コードをコピー」を押します

STEP 3

ページに貼り付ける

HubSpot で、フォームを置いたページの編集画面を開きます
「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
ページを更新（公開）します
公開したページで、次のことを確かめます
- 項目の位置にカレンダーが表示されること
- 日付と時間帯を選んで送信すると、それぞれの項目に保存されること

見た目の調整

カレンダーやタブには、簡単な見た目が付きます。この見た目はサイトの CSS より弱く設定しているため、サイトの CSS が常に優先されます。

調整に使えるクラス名：

クラス名	対象
`kp-picker`	希望日ピッカーの全体
`kp-heading`	見出し
`kp-tab`	希望のタブ（選んでいるタブには `is-selected`、選び終えた希望には `is-complete` が付きます）
`kp-day`	カレンダーの日付（選んだ日には `is-selected`、選べない日には `is-disabled`、祝日には `is-holiday` が付きます）
`kp-slot`	時間帯のボタン（選んだ時間帯には `is-selected` が付きます）
`kp-summary`	選んだ希望の一覧
`kp-message`	未選択のときのメッセージ

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

選べる日や時間帯を変えるとき、フォームの項目を変えたときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。add apps の新しい版と最新の祝日の一覧も、作り直したコードに含まれます。

困ったとき

カレンダーが表示されない

項目が非表示になっていないか、項目が 1 行テキストか、フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
フォームの項目を差し替えた場合は、設定ページでコードを作り直してください

選べるはずの日が選べない

設定ページで、選べる最初の日（何営業日後から）、選べる期間、休業日を確認してください
翌年の日付が選べない、祝日が正しくない場合は、設定ページでコードを作り直してください

動作の記録を見る

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

ご利用にあたって

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