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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

If your site is private, you can setup password & share url

On 10/28/2020 at 10:08 PM, Skor said:

I haven't published the site yet.  

 

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
  • 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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

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
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

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.