Moving Inline Form

Technical Q&A
, ,
1

Hi,

I am writing this to inquiere on how I would be able to customise my inline form. My current inline form can be seen on my URL:

I would like to be able to move the black box which says “SIGN UP” to be next to the email fill out section, rather than below it. I have provided a ohoto reference which perfectly shows what I want:

Screenshot 2026-05-22 07.57.19
Screenshot 2026-05-22 07.57.191907×936 14.4 KB

2

Hey @nathancondren

Just to be clear I’m not 100% sure if this code would work for you or not but worth giving it a try.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find password.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
form._formFieldset_cit2d_82 {
    flex-direction: unset !important;
    justify-content: center !important;
}
</style>

RESULT:

image
image508×493 43.7 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

Hi,

Thanks fir your help, but sadly it didn’t work. Have you got any other solutions?

4

Shopify Forms content lives inside Shadow DOM, so most of the CSS rules in your document do not apply to the form.

One way is to use Javascript code to push your rules into adoptedStylesheets inside this Shadow DOM.

Or you can piggy-back to the way App uses to pass styles into Form.
When shadow DOM is created, app code pulls styles from the window.formStyles and you can add styles there like this from your liquid code:

Create a “Custom liquid” section before your “Shopify Forms” app embed section and paste code like this:

<script>
  window.formStyles || (window.formStyles = new Map);
  formStyles.set('custom-form-rules', `
      form {
        flex-direction: row !important;
        justify-content: center ;
      }
  `);
</script>
5

thank you very much, this worked.