How to add a date and time field (calendar) in your forms

A date picker is a handy tool that allows your website visitors to select dates easily from a calendar instead of manually typing them within a form on your website. This feature is perfect for collecting any date-specific information from your audience.

Please note: The Date Picker feature is available after the 20th of January 2025 on selected plans. If this feature is not displaying on your dashboard after this date, you may be on a plan without this feature or a plan that will not include the new features until your next subscription renewal. You can get access by upgrading to a higher plan now: How to change Rocketspark subscription 

Walk-through tutorial - Click "Get Started"

(To make this tour bigger, click the arrows on the right or zoom in)

Written Instructions:

1. Log in to your Rocketspark Dashboard.
2. Click on the "My Forms" section on the left side of the dashboard.
   
   
   
3. To create a new form, click the "Create a new form" button. To edit an existing form, click the edit pencil icon next to the form you wish to modify.
   
   
   
4. In the form builder, click the "Add form field" button.
   
   
   
5. In the dropdown, select "Date" (calendar only) or Date Time (calendar plus time option).
   
   
   
6. Enter a label for the field, such as "Date of Appointment."
   
   
   
7. Save changes.
   
   
   
8. To make the field required, check the "Required" box.
   
   
   
9. Click "Save" again after making any more edits to the form. 
   
   
   
10. Add form to page: If you have edited an existing form that is already on a page, there is no need to upload this form again. If you have created a new form, here is how to add this to a page: How do I add a form on to a page?

With the form on the page, customers can either type in the date or click the calendar icon for a better view!

Please note that the date picker feature in a form is not a full booking system. Whilst you can get customers to select a date, it will not block certain dates from being selected. For an advanced booking system, you could use a 3rd party integration, such as Google's tools: How to embed Google Calendar

Please contact support@rocketspark.com if you have any questions.