Jump to content

Restyle Custom Forms in Product/Checkout

Recommended Posts

Site URL: https://point-manatee-dntb.squarespace.com/shop/p/leatherette-coffee-table-book

Is it possible to restyle a Customer Form in the checkout process? 

If variant limitations weren't a thing I'd have an Album Colour option which would have 12 options, but this is expending my variant limit, hence the Custom Form. The trouble is it doesn't look particularly nice! 

Also, in an ideal world I would include a field below Cover Text if a customer selected Yes, in order to capture the text they want to include (with a character limit since it's an ideal world) - rather than have it on the customer form. Is this possible somehow?

Help most appreciated! 

 

Screenshot 2022-01-06 at 20.25.01.png

Link to comment

I'm interested in doing the same thing on my site. I'd like to trigger different forms based on which product variant my custom selects.

So given 3 options for color patterns - Solid, Two Tone or 3 Tone - when they select "Solid" it will give them a list of the solid colors available. "Two Tone" would trigger a form for the two tone colors I have and "Three Tone" a third form that corresponds with the three tone colors available.

Much like DreamrW, I'm only doing this to get around the 250 Variant limit. Again, if there were a way around that I'd just run more variants.

Link to comment

@PWMachining It's difficult for us to understand the context without a link to the site (or screenshots) but have you considered splitting the product into several different products by one of the variants, for example one product that requires the customer to provide custom information and one that doesn't? You can then either have fewer options for the remaining variant selections or a separate custom product form for each product.

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
20 minutes ago, DreamrW said:

I've split my products as far as I can without compromising the customer experience. 

You're limited to the built-in options that are available on Squarespace as there isn't a way to extend the variant options with code. To be fair, managing complex variants is difficult on many 'off-the-shelf' commerce solutions, especially when variant choices affect the product price. If they didn't, you could simply use the Custom Product Form for the custom options, as you have for the colours. 🙂

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
9 minutes ago, DreamrW said:

is there any way to make the Custom Forms look better?

Yes, you can add Custom CSS (to Design > Custom CSS) to style the form. For example, to change colours, font styles/sizes and so on. There are a number of posts that cover some of the options.

However, CSS won't allow you to selectively hide/show the text field depending on the variant that the customer selected.

I hope this helps.

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
  • 4 months later...
On 5/14/2022 at 12:13 AM, NOAcollective said:

I'm wanting to change the colour and fonts of my custom form - how do I do this? Thanks!

Screenshot 2022-05-13 at 18.08.18.png

Can you share link to product in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 8/1/2022 at 10:47 PM, natashaboorer said:

Hey! yes sure! Sorry I completely missed your reply - link to product is here: https://www.shopnoa.co.uk/shop/p/letterbox-wax-bar-bundle

Hi,

Change color of dropdown text or form background color...?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.