Jump to content

How can I style product forms?

Go to solution Solved by Beyondspace,

Recommended Posts

I have a form which appears after a customer clicks add to cart.  I can't figure out how to style the form -- I've looked through the product and color options and nothing seems to change.  The form currently is black text on a white background and want to use the site colors on this form for some of the text and the button. Is this a CSS thing or is there a configuration option I missed.  I have four different forms, and they  appear for most of my products as a part of the ordering process.  Thanks in advance.

 

Edited by Skor
Link to comment

I think custom product form can be changed in style but we need to add custom css for it, how is your site look like?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Could we have a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Sorry Skor,

Seems like you dont want to share the current site url for checking the style by inspector so I can't help you on this, I'm sure there are supporters around here can help

Edited by bangank36
Edits

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution
11 minutes ago, Skor said:

For example, here's one of the product links:
https://www.carolynkdesigns.com/shop/p/1139

If you click add to cart a form pops up.  The second form is what I'd like to change the button color and potentially the title color.  Thanks in advance.

I may use the same color code of your current site

Design->Custom Css

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-title {
  color:  #2c67af;
}
.sqs-async-form-content .form-wrapper input[type=submit] {
  background-color:  #2c67af;
}

image.png.c8a7cdc1a9fdef85e156e5794671a578.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 7 months later...
18 hours ago, EmilieJohansen said:

Hey! I would love some help with this as well as I too am adding add to cart pop up form and I'd like the colours and fonts to match my website www.tojldn.co.uk. Would anyone be able to help me?

Can you share link t oa product where you use popup form? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
22 hours ago, EmilieJohansen said:

Add to Design > Custom CSS

/* product lightbox form */
body.collection-type-products .lightbox-inner * {
    font-family: hydrophilia-liquid !important;
}
body.collection-type-products .lightbox-inner input.button {
    background: #2f5056;
    font-family: futura-pt !important;
}

image.thumb.png.63fd3445346fb360c48e4d6becd93864.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...
On 11/18/2023 at 7:59 AM, bwsharkey said:

I've been trying to change the button color but I can't figure out how, whenever I hover over it the texts turns black but otherwise its invisible. I've tried changing the site colors as well.

Screenshot 2023-11-17 at 16.57.58.png

Can you share link to this page? We can help easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.