add apps テンプレートマーケットプレイス版
希望日ピッカー ご利用ガイド（テンプレートマーケットプレイス版）
HubSpot のフォームで、第 1〜第 3 希望の日付と時間帯を、カレンダーから選べるようにします。土日祝日や休業日は選べないため、受け付けられない日を指定されることがありません。来店・訪問の予約、説明会や面談の日程調整など、フォームで希望日を受け取る場面に向いています。
- 提供
- 株式会社ハレフル（add apps）
- 料金
- 無償
- 版
- 1.2.1
できること
- フォームに置いた 1 行テキストの項目（「第1希望日」など）の位置に、カレンダーを表示します。第 1〜第 3 希望は、カレンダーの上のタブで切り替えます
- 土曜日・日曜日・祝日を除くか、何営業日後から選べるか、何日先まで選べるかを決められます。休業日も指定できます
- 日付を選んだあとに選ぶ時間帯（例：午前・午後）を決められます。時間帯ごとに、選べる曜日を決めることもできます。時間帯を使わず、日付だけを選ぶこともできます
- 同じ日を別の希望に選ぶことはできません
- 選んだ日時は、「2026年11月13日（金） 午後」のような文字で、それぞれの項目に保存されます。日付の書き方は 3 種類から選べます
送信は HubSpot フォームの標準のボタンで行います。送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。
使える条件
| 対象 | 使えるか |
|---|---|
| 「フォームエディター」で作ったフォーム | 使えます |
| 「旧フォームエディター」で作ったフォーム | 使えません |
| HubSpot のランディングページ・ウェブサイトページに置いたフォーム | 使えます |
| HubSpot 以外のサイトに埋め込んだフォーム | 使えません |
| フォームの共有リンク（フォームだけを開く URL） | 使えません |
ご注意
- 希望日を入れる項目は、1 行テキストのプロパティです。日付のプロパティには保存できません
- 項目は非表示にせずにフォームに置いてください。フォームでは、その項目の入力欄は隠れ、最初の項目の位置にカレンダーが表示されます
- タブの見出しと必須かどうかは、フォームの項目の設定（ラベルと必須）に従います。必須の希望を選ばずに「次へ」「送信」を押したときは、カレンダーの下にメッセージを表示します
- 祝日は、2027 年までは内閣府が公表している「国民の祝日」、2028〜2031 年は「国民の祝日に関する法律」の決まりから計算した日です。春分の日・秋分の日は、前の年の 2 月に正式に決まるため、計算と異なる場合があります。法律の改正などで祝日が変わったときは、add apps の新しい版でお知らせします
- 入力内容を外部に送ることはありません。表示の切り替えは、ご覧になっているブラウザの中だけで行います
- 「フォームの確認画面」（add apps 1）などほかの add apps と一緒に使えます
- お使いのテーマ・テンプレートはそのまま使えます。ページのドラッグ＆ドロップのエリアにモジュールを置いてください。ドラッグ＆ドロップのエリアがないテンプレートでは、モジュールを置けません
- 見た目はサイトの CSS が優先されます。ただし、テーマが独自の JavaScript でフォームの見た目や動きを大きく作り変えている場合は、正しく表示されないことがあります
- 同じフォームに、同じ add apps を 2 つ以上入れないでください（モジュールを 2 つ置く、設定ページで作ったコードと一緒に使う など）。二重に動きます
導入の手順
1. フォームを準備する
- HubSpot で、希望日を入れる 1 行テキストのプロパティを作ります（例：「第1希望日」「第2希望日」「第3希望日」）。すでにあるプロパティを使っても構いません
- フォームの編集画面を開き、作ったプロパティの項目をフォームに置きます。第 1 希望を必須にする場合は、その項目を必須にします
- フォームを公開します
- 項目の、フォームに表示される項目名か、プロパティの「内部名」を控えておきます（内部名はプロパティの設定画面で確認できます。例：
preferred_date_1）
2. ページにモジュールを置く
- HubSpot で、フォームを置いたページの編集画面を開きます
- 「追加」から「add apps 希望日ピッカー」のモジュールを探し、ページのドラッグ＆ドロップのエリアに置きます。置く場所は、フォームの近くでなくても構いません。カレンダーは、ページを開くとフォームの項目の位置に移って表示されます
- モジュールの設定欄で、次の項目を設定します
| 設定欄 | 内容 |
|---|---|
| フォーム | 同じページに置いたフォームを選びます |
| 希望日を入れる項目 | 「項目」に、手順 1 で控えた項目名か内部名を、第 1 希望から順に入れます（3 つまで）。希望を増やすときは、項目を追加します |
| 見出し | カレンダーの上に表示します。空欄なら表示しません |
| 選べる日 | 選べる日と時間帯を決めます（下の表） |
| 日付の書き方 | 2026年11月13日（金）／2026/11/13（金）／2026-11-13。項目には、日付と時間帯の表示名を続けた文字で保存します |
| 詳細設定 | 動作の記録の詳しさ |
「選べる日」の中の設定：
| 設定欄 | 内容 |
|---|---|
| 土曜日を除く | オンにすると、土曜日を選べなくします |
| 日曜日を除く | オンにすると、日曜日を選べなくします |
| 祝日を除く | オンにすると、祝日を選べなくします |
| 選べる最初の日（何営業日後から） | 0〜365 営業日後。営業日は、除いた曜日・祝日と休業日を除いて数えます。0 にすると今日から選べます |
| 選べる期間（今日から何日先まで） | 1〜730 日先 |
| 休業日 | 選べなくする日です。年末年始・夏季休業などを 1 日ずつ追加します |
| 時間帯 | 日付を選んだあとに選ぶ時間帯です。「表示名」に選択肢の文言を、「選べる曜日」にその時間帯を選べる曜日（月〜日・祝）を入れます。曜日を選ばない時間帯は、すべての日で選べます。時間帯がない場合は、すべて削除してください（日付だけを選びます） |
- ページを更新（公開）します
- 公開したページで、次のことを確かめます
- 項目の位置にカレンダーが表示されること
- 日付と時間帯を選んで送信すると、それぞれの項目に保存されること
設定が足りないとき（希望日を入れる項目が空欄、項目がフォームに見つからない など）は、ページの編集画面の中でだけ、モジュールを置いた位置に案内を表示します。公開したページには表示しません。
見た目の調整
モジュールの設定欄の「スタイル」タブで、選択中の色（選んだ日付・時間帯・タブの色）と角の丸みを変えられます。「標準の見た目を使う」をオフにすると、色や枠線を付けずに表示します。
カレンダーやタブの見た目は、サイトの CSS より弱く設定しているため、サイトの CSS が常に優先されます。
調整に使えるクラス名：
| クラス名 | 対象 |
|---|---|
date-picker-picker | 希望日ピッカーの全体 |
date-picker-heading | 見出し |
date-picker-tab | 希望のタブ（選んでいるタブには is-selected、選び終えた希望には is-complete が付きます） |
date-picker-day | カレンダーの日付（選んだ日には is-selected、選べない日には is-disabled、祝日には is-holiday が付きます） |
date-picker-slot | 時間帯のボタン（選んだ時間帯には is-selected が付きます） |
date-picker-summary | 選んだ希望の一覧 |
date-picker-message | 未選択のときのメッセージ |
困ったとき
カレンダーが表示されない
- モジュールの設定欄で、フォームと希望日を入れる項目が正しく設定されているかを確認してください。ページの編集画面で、モジュールを置いた位置に案内が出ていないかも確認してください
- 項目が非表示になっていないか、項目が 1 行テキストか、フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
- ページを更新（公開）したかを確認してください
選べるはずの日が選べない
- モジュールの設定欄の「選べる日」で、除く曜日・祝日、選べる最初の日（何営業日後から）、選べる期間、休業日を確認してください
- ほかの希望で選んだ日は選べません
動作の記録を見る
ページの URL の末尾に ?kp_debug=1 を付けて開くと（すでに ? がある場合は &kp_debug=1）、ページの下部に動作の記録が表示されます。お問い合わせの際は、この記録を添えてください。
ご利用にあたって
- 無償・無保証で提供しています
- HubSpot の仕様変更により、動かなくなる場合があります
- 本ツールの利用により生じた損害について、当社は責任を負いません
Contact
add apps のお問い合わせ
使い方がわからないとき、うまく動かないとき、
ご要望はこちらからご連絡ください。