How can I style product forms?

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.

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?

At a minimum I want to make the button blue with a white background.  Also, each form has a unique name.

Could we have a look?

This is the form.  I'd likely want to change the font color for the name and the color of the submit button.

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

I haven't published the site yet.  

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.  

I will include the URL after an online show concludes.  We have suspended online ordering temporarily during the show.

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.

Perfect!   Thanks so much @bangank36.  Much appreciated.

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?

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

Yes sure this is the link https://www.tojldn.co.uk/ready-to-ship/p/new-product-page-design

22 hours ago, EmilieJohansen said:

Yes sure this is the link https://www.tojldn.co.uk/ready-to-ship/p/new-product-page-design

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

Amazing thank you worked like a charm 🙂

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.

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.

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

Is there any way to add images to the custom product forms?

For example, i want to display different designs and color options to show clients as a reference when they select options. Attaching image for reference: This is a Shopify's custom product form -- wondering if it's possible to do something like this for squarespace?

On 7/11/2024 at 10:22 PM, lovex3you said:

Is there any way to add images to the custom product forms?

For example, i want to display different designs and color options to show clients as a reference when they select options. Attaching image for reference: This is a Shopify's custom product form -- wondering if it's possible to do something like this for squarespace?

 

Yes. It is possible. I used to help a case, we use option with some text, then use CSS code to change these option text to custom image.