Forms App - how to edit CSS for button hover?

Shopify Apps

Topic summary

Styling a Shopify Forms app submit button via theme CSS is failing. Targeting the block ID (#shopify-block-…) applies styles globally to all text inside the form (fields and disclaimer), while targeting the button class (button._formSubmitButton_1ll8d_81) has no effect. Desired styles include uppercase, bold, font-size, and hover to match site buttons; the app UI only lets you set button color.

A related community post is cited as addressing similar styling limitations, implying the app’s markup/CSS may not be easily targetable from theme styles.

New issue: The form works on its own page but won’t render on the homepage. The Forms app requires a custom template assigned to a page, and the store uses an older, non‑sections theme. Choosing the newsletter page in homepage settings renders nothing, and the user asks how to assign the template to the default home page or otherwise embed the form on the homepage.

Status: Unresolved. Guidance requested on CSS targeting and homepage placement options.

Summarized with AI on December 18. AI used: gpt-5.
1

Here is my form https://www.bunburyfabrics.com/pages/ns-test

I want it to match the buttons on my page with hover etc but when I attempt to add the following to my assets/styles.css.liquid I am not able to target a specific class, the only thing that seems to work is targeting the whole block.

For instance this works and will uppercase the button text, but will also uppercase the text in all 3 fields and the disclaimer text. The bold does not work and the font-size does not work at all or do not apply as I think they are not applicable to this block ID.

#shopify-block-ecc86ca6-0a04-4531-9ef2-8d8af21a3c99 {
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

When I attempt to target the class it does not work at all

button._formSubmitButton_1ll8d_81 {
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

The form itself you can only choose button color, you cannot specify hover or bold or anything like that. My goal is to make the form submit button match the button you see in my footer.

2

Found this post that addresses this same issue

https://community.shopify.com/post/2780655

3

I have my form working great now, but cannot get it to render on my homepage, because the forms app requires a custom template that is assigned to a page. How do I assign my template to my default home page? I have an older theme that does not have sections but In my homepage settings I can choose a page to display under my homepage products, but selecting the working newsletter page does not render anything. How can I get this form to display on my homepage?