【Studio】フォームに日付選択カレンダーを導入する方法
日程調整が必要になる予約サイトでは、日付選択カレンダーを導入することが大事です。
というのも日付選択カレンダーがあれば、「希望日：2025年8月10日」などと直接入力する手間なく、カレンダーの日付をタップすれば希望日を選択できるからです。
イメージとしては、下記のとおりです。
しかし、Studioは現在のところ、日付選択カレンダーが標準装備されていません。
そこで今回は、フォームに日付選択カレンダーを導入する方法について詳しく解説していきます。
Service
【最安15万円〜】
全てセット料金のホームページ制作サービス
サイト企画〜公開まですべてセット料金になっており、「余計な料金は一切いただかない」というのをモットーにしています。
最安15万円〜からホームページが作れて、すべてオリジナルデザインで制作可能です。また自社管理できる「Studio」というツールを用いているので、プランによっては維持費0円で運営できます。
期間限定で制作費用の3万円割引キャンペーンもやっていますので、ぜひお気軽にご相談ください！
日付選択カレンダーを導入できる対象プラン
今回紹介する方法は、「カスタムコード」で日付選択カレンダーを導入していきます。
カスタムコードは有料プランのみ使用できますので、今回の対象者はMiniプラン以上の方となります。
| Free | Mini | Personal | Business | |
|---|---|---|---|---|
| カスタムコードの可否 |
無料プランで日付選択カレンダーを導入したいという方は、外部サービスで用意したフォームを埋め込むことを推奨します。
Kaji例えば、「Formrun」や「Googleフォーム」で作ったフォームを埋め込むなど！
FormrunやGoogleフォームなどの外部フォームを埋め込む方法については、以下の記事で詳しく説明しています。ぜひ参考にしてみてください。
フォームに日付選択カレンダーを導入する手順
フォームに日付選択カレンダーを導入する手順は、下記のとおりです。
それぞれ具体的に説明します。
完成イメージは、下記のとおりです。
①：お問い合わせフォームを用意します
まず、日付入力欄のあるフォームをStudio上で作成します。
今回は、下記のようなお問い合わせフォームを準備しました。
お問い合わせフォームの作り方については、以下の記事で詳しく説明しています。
②：日付入力欄にIDを付与する
日付入力欄にIDを付与していきます。
今回の例でいうと、IDを付与しないといけないのは2箇所です。
日付入力欄を選択した状態で、IDを入力します。
Kaji日付入力欄なので、「date1」というIDを付与しました！
同様に、第二希望日時にもIDを付与します。1個目の入力欄が「date1」だったので、2個目の入力欄は「date2」のようなIDに設定しておきましょう。
これで、日付入力欄にIDを付与することができました。
③：カスタムコードを追加する
フォームを載せているページの、ページ詳細をクリックします。
カスタムコードの<head>内の末尾に、コードを入力します。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
カスタムコードの<body>内の末尾に、コードを入力します。
<script>
flatpickr("#date1 , #date2", {
locale: "ja",
dateFormat: "Y年m月d日"
});
</script>
Kajiflatpickr(“#date1 , #date2”, {の、#date1 , #date2の部分は、IDを入力してください。
これで完了です！日付入力欄をクリックすると、カレンダーが表示されるようになるはずです。
フォームに日付選択カレンダーを導入する際の注意点
フォームに日付選択カレンダーを導入する際の注意点は、下記のとおりです。
それぞれ具体的に説明します。
ライブプレビューで動作確認はできない
カスタムコードによる実装は、ライブプレビューで動作確認できません。
そのため、正確に実装できているかを確認するときは、サイトを公開して確認するようにしましょう。
スマホ時のデザイン崩れが発生しやすい
今回のカスタムコードによる実装だと、パソコンでは正常にデザインされているけど、スマホではデザイン崩れが起きているケースがよく見られます。
その場合は、カスタムコードで新たにCSSを追加して、デザイン修正を行わなければなりません。
ただし、追加するCSSの内容は、サイトによって値が変わってきます。
もしデザイン崩れをしっかり修正したいなら、Web制作会社 or フリーランスなどにカスタムコードで修正してもらうことを検討しましょう。
Studioでのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービス「ラク子」を運営しています。
Kaji「デザイナー」と「フロントエンジニア」のフリーランス3名で運営しています！
- ポッキリ価格でホームページを制作できる
- 専属デザイナーが完全オリジナルのデザイン作成
- 納品後1ヶ月間は無料の電話サポートあり
- 自社更新できるホームページが作れる
- ホームページ制作期間中は何度でも無料相談できる
- 顔の出ているフリーランス3人が運営
- 維持費0円でホームページを運営できる
料金プランは、以下の通りです。
ポッキリ価格でホームページが作れるサービスであり、個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
