Using the Forms App: Impossible to style forms to match rest of the site

Using the Forms App: Impossible to style forms to match rest of the site

Descendant123
Visitor
1 0 0

Hello.

 

I'm using the Forms App on my site. Why can't I style them to match the rest of my site?

Locating the code to target the header and body font is impossible?

 

Does anyone know how to target the forms for basic styling to change fonts, colors and widths of elements?

 

Thanks in advance

Replies 2 (2)

Keshan97
Shopify Partner
63 9 22

Hi there,

 

The Forms App may not offer all the styling options you need directly within the app. However, you can use custom CSS to make the necessary changes to match the rest of your site.

 

To apply custom styles to your forms, you’ll need to:

 

1. Identify the Form Elements: Inspect the form on your site to find the specific classes or IDs used by the Forms App. You can do this using your browser’s developer tools (right-click on the form element and select “Inspect”).

2. Add Custom CSS:

•From your Shopify admin, go to Online Store > Themes.

•Find the theme you are currently using, then click Actions > Edit code.

•In the left sidebar, under Assets, find and click on your theme.scss.liquid or theme.css file (depending on your theme).

3. Write Your Custom CSS: Add your custom CSS targeting the form elements. For example:

 

/* Example of custom styling */
.custom-form-class h1 {
    font-family: 'Your Font Family', sans-serif;
    color: #YourColor;
}

.custom-form-class input,
.custom-form-class textarea {
    width: 100%;
    border: 1px solid #YourBorderColor;
}

.custom-form-class button {
    background-color: #YourButtonColor;
    color: #YourButtonTextColor;
}

 

Make sure to replace .custom-form-class with the actual class or ID of your form elements and adjust the properties to fit your design.

 

If you need further assistance with this, please let me know!

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com
Jordz_Joestar
Shopify Partner
6 0 2

With the Shopify Forms app, it seems regardless of targeting input fields or the containers with CSS, they will not apply to the form.

I've tried multiple ways including trying to inject CSS via jquery. The Embed form doesn't want to read it due to its own constructed stylesheet.

 

If anyone has found a way to style the form please let me know.