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

[Descendant123]

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

[Keshan97]

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!

[Jordz_Joestar]

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.

[SavyAgency]

Yes, it’s really annoying. It uses some sort of embedding and all the CSS selectors get ignored. Same with overriding the CSS variables. The only way to change the look is using the customizer, but you can only change colors and placement, so it’s lacking.

[MC_Elliot]

Hello, I faced the same issue (stemming from the use of a custom element and a shadow DOM), where the CSS styles were not being applied within that element.

However, it is possible to enforce them with JavaScript by modifying the existing shadow DOM stylesheet (it’s not the most elegant solution, but at least it works).

Here’s an example (I had to add an observer to ensure the app is fully loaded):

Have a great day!

[MullerMan]

This code works for me as well! I’m using Shopify Forms on a Dawn-based theme. Only thing is I didn’t know where ‘.form-container’ was supposed to be, so I changed mine to ‘#app-embed’. Great find, thank you for sharing!

[ernestheh]

Where does this code go?

[MullerMan]

In my case, I added it to my custom.js file. If you put it in a .js file, you should remove the tags at the beginning and end of the above code. If you have a global.js file in your theme, that would be a good place to put it (if not, maybe look for main.js or script.js).

[ernestheh]

Thanks!

[dlevens]

I am having this exact issue which I posted here thank you for sharing this, will give this a try. But why is Shopify making an app for their own platform and then making it work in this way instead of just adopting the theme CSS?

[dlevens]

@MC_Elliot thanks for this code, I was able to get the form to match my site, but any chance you were able to figure out display it on the homepage? My form displays fine on any page but not my homepage. When I customize my theme and choose the form page in a section on my homepage it does not display. I am on a vintage theme (Outofthesandbox Retina v2.1). The way the forms app works is you have to modify the page template, which I am not sure how to do for the default template which I assume my homepage is using and I am not sure how to change the homepage to use the updated form template? Hoping you might have a tip or suggestion here?

[spathan]

Thanks this code works for me.

[xnyjyh]

so ive added this to my global.js. after the main CSS you already had, then I add the other classes and edit to my look. but it does not apply the CSS still. Is there a specific way to edit your script for different styling?

i added the class for submit button, but it did not take. What am I doing wrong? i have so much CSS editing for this stupid app to do.

const sheet = new CSSStyleSheet();
  sheet.insertRule(`
    input, button[aria-expanded], textarea , button._formSubmitButton_1ll8d_81 {
      border-radius: 0px !important;
      border: none !important; 
      }
      _formSubmitButton_1ll8d_81 {
      font-weight: bold !important;
      }
  `);

[BryanPal]

Thanks @MC_Elliot !

I’m trying to implement this code myself and I’m getting an error ;

Uncaught TypeError: formContainer is null

The only variation from your original code was to put everything in a separate .js file and reference this in my theme.

I’ve since tried to change out the sector to a few different IDs and Classes but it’s made no difference. Any thought’s on where the issue may be?

[MullerMan]

Hmm yeah sounds like something with this line: const form = document.querySelector(‘.form-embed’**). Have you tried const form = document.querySelector(‘#app-embed’**)? That worked with my form code. You need to find a class or id in the divs in your element that doesn’t change when you reload the page. Maybe if the id on your form-embed stays the same, you can use that. Double check your syntax on your variable declaration too. Below is my code for the form and I show where I pulled my ID from.

[MullerMan]

Does your first declaration for border radius and border work? Your second one will not work because it’s a class and you don’t have a period at the front. It should be:

._formSubmitButton_1ll8d_81 {
   font-weight: bold !important;
}

If no classes are being applied, the next step is to check your browser console for JavaScript errors.

[BryanPal]

Heya @MullerMan , yeah I have tried that app-embed id and also a couple of others but it still shows the same error in the console and doesn’t seem to be having any impact on styling.

Quick question, if you don’t mind looking for me, are you seeing any errors in your console?

[MullerMan]

No I don’t have any errors in my console. Were you able to look through your source code and find what your id is in that spot I circled?

[RobertoLopezMon]

Hello @MullerMan , I am trying to follow your steps but for some reason I am still unable to change the font size of my forms app. Attached is the code that I entered in the global.js as well as the custom code that I am trying to apply to the website. I would appreciate if you could help me out finding out where my mistake is.

Thanks so much in advance!

[MullerMan]

Hey @RobertoLopezMon yes I see what’s going on. You are adding your CSS in the wrong spot. You don’t need to add any in the Custom CSS section, only in the Javascript file on line 1285 where it says sheet.insertRule(``). Replace the contents of it with your css declaration from the top Custom CSS section in the admin. Also, you should add important to it…so font-size: 40px !important;