Custom Form : Insert a Date picker to the checkout form

Hi.

I need a date picker for my store, when I edit the checkout -> Additional Fields  -> Edit custom form I have the possibility to add custom form input for my checkout page. But the default date input is not a date picker. Do I have the possibility to add a custom form to my checkout using HTML/CSS ?

I heard it can't be done with the checkout form for security reasons. Is this possible to add this kind of input for every product at once instead of editing it one by one ?

Thank you for your help.

So is this possible to add this kind of input form for a product one by one ?

A good solution would be to have a pop-up when the user enter the shop page, then the customer can enter a date and this date will be sent to us when he will checkout.

On 3/3/2020 at 5:53 PM, Trystan said:

So is this possible to add this kind of input form for a product one by one ?

Yes.

Ho ! I see you are the developer behind the Date picker extension.  I bought it earlier this day, I'm currently waiting for the extension to arrive in my mailbox.

I just find it ridiculous that Squarespace doesn't come with basic HTML editing for the form content. It's painful if we want to extend our websites.

For the store itself, the customers have to give a date of location for every product they are buying. The default squarespace date form is not very intuitive, so a need to get a date-picker for it.

Hi Trystan,

On 3/3/2020 at 7:47 PM, Trystan said:

Do I have the possibility to add a custom form to my checkout using HTML/CSS ?

Yes.  Here's a video on how to do that.

On 3/3/2020 at 7:47 PM, Trystan said:

I heard it can't be done with the checkout form for security reasons. Is this possible to add this kind of input for every product at once instead of editing it one by one ?

 

It can be done like in the video above, but this approach has some problems. In checkout you cannot add a date picker plugin (to make it visual instead of a crappy form). Also you cannot add time, only a date. You also cannot block off dates that you're unavailable on. Overall, its very easy to implement but my customers have gotten it to actually work smoothly. 

On 3/3/2020 at 7:53 PM, Trystan said:

So is this possible to add this kind of input form for a product one by one ?

A good solution would be to have a pop-up when the user enter the shop page, then the customer can enter a date and this date will be sent to us when he will checkout.

This is also possible. You can add date picker to a product one by one. This video shows you how. 

For this you can add a date picker plugin to make it a better user experience. There are few issues however

- You need to add the form to every product one by one
- Date picker plugins are nice, but they editing things like blocking off dates needs to be done via javascript coding (unless I'm mistaken).
- Customer can't input time, only a date. 
- If one customer chooses a date and it's then unavailable to others, you'll have to manually update the availability. 

So this method is only good for very simple things. 

Another option is to combine Squaresepace Scheduling with the Squarespace e-commerce.

In this approach, you're taking the Scheduling widget that's easy to use and has all the features you might need, and add it as part of the checkout process.

Scheduling is added before or after payment. This takes a bit of coding to set up, but the user experience will be a lot better than when using a date picker form.

I'm updating blog post & tutorial to feature methods, plugins etc on how to achieve this. 

Here are couple of videos that show how Scheduling + Squarespace E-commerce can work together:
Video 1 — Squarespace scheduling before checkout
Video 2 — Squarespace Scheduling after checkout

You can also use Shopify buy button + Shopify scheduling apps

I've implemented this on a few websites and believe I have a pretty deep understanding on what are the different methods to achieve this and what are their pros and cons. If you need help with adding a date picker or scheduling as part of the Squarespace checkout flow, send me a message and we can tailor something that works best for you.