Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Styling Shopify Forms (Popup)

Solved

How can I permanently style forms in Shopify with CSS?

pearlerwork
Shopify Partner
76 1 10

I'm using the Shopify Forms app and I'm having issues making certain styling changes with CSS. 

 

For example, the container has a border and box shadow. I'd like to remove the box shadow and match the border colour to my theme. The code I'm using works for a time, however the class itself changes every so often and then the styling comes undone. How can I change this at the root?

 

 

/** Shopify Forms Popup 🟒 🟒 🟒 **/
._formContainer_1n0rq_29 {
  box-shadow: none !important;
  border: 0.1rem solid rgba(var(--color-foreground),1) !important;
  border-radius: 0px !important;
}

 

 

Store: https://manifest-a-pearler.myshopify.com/

Password: pearler

Theme: Dawn

Accepted Solution (1)

EBOOST
Shopify Partner
1247 324 373

This is an accepted solution.

Hi @pearlerwork 

May I suggest code below

/** Shopify Forms Popup 🟒 🟒 🟒 **/
section[data-testid="form-container"]{
  box-shadow: none !important;
  border: 0.1rem solid rgba(var(--color-foreground),1) !important;
  border-radius: 0px !important;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

Replies 7 (7)

EBOOST
Shopify Partner
1247 324 373

This is an accepted solution.

Hi @pearlerwork 

May I suggest code below

/** Shopify Forms Popup 🟒 🟒 🟒 **/
section[data-testid="form-container"]{
  box-shadow: none !important;
  border: 0.1rem solid rgba(var(--color-foreground),1) !important;
  border-radius: 0px !important;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
pearlerwork
Shopify Partner
76 1 10

Yes this works great, thank you @EBOOST 

PageFly-Victor
Shopify Partner
7865 1786 3116

Hi @pearlerwork 

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

 

Online Store ->Theme ->Edit code

Assets ->custom-styles.css

section[data-testid="form-container"]{
  box-shadow: none !important;
  border: 0.1rem solid rgba(var(--color-foreground),1) !important;
  border-radius: 0px !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

ByAprilCo
Shopify Partner
45 0 10

Hey Victor! Sorry to chime in buthoping you could help with something similar, I am trying to apply css (font customisation specifically) to a Shopify Form heading, is this even possible? 🙂

Leonpojen
Pathfinder
103 2 10

Hi, did you find the solution? 

NovakNorth906
Shopify Partner
39 4 5

I am in the same boat. Haven't found a solution

aljassim
Shopify Partner
4 1 2

Same here, nothing worked for us and none of the css is getting applied on the form.