How can I permanently style forms in Shopify with CSS?

[pearlerwork]

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

[EBOOST · 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;
}

[pearlerwork]

Yes this works great, thank you @EBOOST 

[PageFly-Victor]

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]

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]

Hi, did you find the solution? 

[NovakNorth906]

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

[aljassim]

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

[arslananwer03]

the form is add in the shadow root so only way to add css is injecting style in the parent element like this change the queryselector based on your code 

// Access the shadow root
const shadowRoot = document.querySelector('form-embed#app-embed').shadowRoot;

// Create a new <style> element
const style = document.createElement('style');
style.textContent = `
  /* Your CSS styles here */
  div {
    background-color: lightblue;
    color: black;
  }
`;

// Prepend the <style> tag to the shadow DOM
shadowRoot.prepend(style);

[ByAprilCo]

Hi there! Thank for you adding, can I confirm what the selector might be for the shopify form that sits at the bottom of this page: https://coast-opals.myshopify.com/pages/contact (P/W: CoastOpals)

Oh and what file do I add the above code to, is my css stylesheet ok?