# Moving Inline Form

**URL:** <https://community.shopify.com/t/moving-inline-form/629220>\
**Category:** Technical Q&A\
**Tags:** design, customizations, shopify-themes\
**Created:** [May 25, 2026, 8:18am UTC](https://community.shopify.com/t/moving-inline-form/629220 "2026-05-25T08:18:27Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nathancondren](https://avatars.discourse-cdn.com/v4/letter/n/ba8739/32.png) [@nathancondren](https://community.shopify.com/u/nathancondren)\
**Post date:** [May 25, 2026, 8:18am UTC](https://community.shopify.com/t/moving-inline-form/629220/1 "2026-05-25T08:18:27Z")

</div>

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:

> **[condren](https://condrennn.com/password)**
>
> condren

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](https://canada1.discourse-cdn.com/shopifyforum/original/4X/f/d/5/fd552df5e3a14b12a4b61d753f47fcf67e400c8a.png)

---

<div class="post-metadata">

**Author:** ![Moeed](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/moeed/32/407464_2.png) [@Moeed](https://community.shopify.com/u/Moeed)\
**Post date:** [May 25, 2026, 8:23am UTC](https://community.shopify.com/t/moving-inline-form/629220/2 "2026-05-25T08:23:58Z")

</div>

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

```auto
<style>
form._formFieldset_cit2d_82 {
    flex-direction: unset !important;
    justify-content: center !important;
}
</style>

```

**RESULT:**

 ![image](https://canada1.discourse-cdn.com/shopifyforum/original/4X/e/b/3/eb3bccc54120f365772b94e5739b6be66bb527cb.jpeg)

* * *

###### 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

---

<div class="post-metadata">

**Author:** ![nathancondren](https://avatars.discourse-cdn.com/v4/letter/n/ba8739/32.png) [@nathancondren](https://community.shopify.com/u/nathancondren)\
**Post date:** [May 25, 2026, 8:28am UTC](https://community.shopify.com/t/moving-inline-form/629220/3 "2026-05-25T08:28:46Z")

</div>

Hi,

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

---

<div class="post-metadata">

**Author:** ![tim\_tairli](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/tim_tairli/32/283567_2.png) [@tim\_tairli](https://community.shopify.com/u/tim_tairli)\
**Post date:** [May 25, 2026, 8:54am UTC](https://community.shopify.com/t/moving-inline-form/629220/4 "2026-05-25T08:54:12Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![nathancondren](https://avatars.discourse-cdn.com/v4/letter/n/ba8739/32.png) [@nathancondren](https://community.shopify.com/u/nathancondren)\
**Post date:** [May 25, 2026, 9:21am UTC](https://community.shopify.com/t/moving-inline-form/629220/5 "2026-05-25T09:21:31Z")

</div>

> [@tim\_tairli](#):
>
> ```auto
> <script>
> window.formStyles || (window.formStyles = new Map);
> formStyles.set('custom-form-rules', `
> form {
> flex-direction: row !important;
> justify-content: center ;
> }
> `);
> </script>
> 
> ```

thank you very much, this worked.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/b/b/7bbfe07c91e3f502d9c876612b0b445245662ef9.png) [@system](https://community.shopify.com/u/system)\
**Post date:** [June 20, 2026, 2:16pm UTC](https://community.shopify.com/t/moving-inline-form/629220/6 "2026-06-20T14:16:28Z")

</div>

Unlisted on June 20, 2026, 2:16pm UTC



---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/b/b/7bbfe07c91e3f502d9c876612b0b445245662ef9.png) [@system](https://community.shopify.com/u/system)\
**Post date:** [July 3, 2026, 4:33pm UTC](https://community.shopify.com/t/moving-inline-form/629220/7 "2026-07-03T16:33:02Z")

</div>

Listed on July 3, 2026, 4:33pm UTC