Jump to content

Custom Form : Insert a Date picker to the checkout form

Go to solution Solved by paul2009,

Recommended Posts

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.

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution
On 3/3/2020 at 5:47 PM, Trystan said:

I heard it can't be done with the checkout form for security reasons.

That's correct. It isn't possible to add code to the Squarespace Checkout page, which means that you cannot add a datepicker to the Checkout, including Custom Checkout Forms.

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

Is this possible to add this kind of input for every product at once instead of editing it one by one ?

Our datepicker extension can add an easy to use datepicker to any Custom Product Form, allowing you to prompt for a date when customers add a product to their cart. If you add the datepicker to the form once, you can then add the form to other products.datepicker-demo.thumb.gif.d3a3e0d6699e16f8408ff3e17273ce31.gif

 

Edited by paul2009
edited for clarity

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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.

Link to comment
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.

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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.

Edited by Trystan
Link to comment
  • 1 year later...

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. 

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.