I need a second form on my website to capture customer details, separate to my contact form with 5-10 fields to fill in. I couldn’t find a way to duplicate the contact liquid code file as I’m not savvy enough and didn’t want to mess anything up backend and have it affect the other form, or anything else on the site.
I have instead chosen to go for Shopify’s app ‘forms’ which builds in nicely into the section in my page. I have made my form and everything looks almost there BUT my only issue is that the forms width is half the width of the container, its centred in the middle so it looks okay but its just kinda small and looks silly in relation to the other parts of my site. I’d like to make the form 800px (approx across) or whatever the usual container width is to stretch it out. I need it to downscale on mobile too though.
Looking through the inspect tool I can’t seem to pin point the correct class to make any adjustments and the other bit in the inspect tool that I can play about with to change anything is the
max-width: var(–inline-container-max-width); bit which if you click goes right to : host { and then --inline-container-max-width: 450px;, my experience in web design is just html & css on a basic level so this :host bit and var() i have no clue about but if i edit that 450px to 950px etc. is changes the width, how do I reflect this on my actual website rather than the inspect tool!!
Hope someone can help ;-; thank you!
The form is a custom component with a custom element of form-embed, and is rendered via the shadow dom.
You can set / override the values for CSS variables as follows:
form-embed {
–inline-container-max-width: 650px;
}
( Put that code in your CSS file, or a CSS setting in your theme settings ).
Hi @a_duffy 
Hi! I think you’ve taken a sensible approach by using Shopify Forms rather than modifying your existing contact form, especially if you want to keep the two forms completely separate.
Since changing --inline-container-max-width from 450px to a larger value in Inspect gives you the result you want, you’ve at least identified what is controlling the form width. The reason it resets when you refresh is that DevTools only changes the styling temporarily in your browser—it doesn’t modify your actual theme or the Shopify Forms component.
Before trying to override it with code, I’d check whether your theme gives you a Custom CSS field for that specific section or page. Some themes also have layout settings that control the width of the section containing the app block, so it may be worth checking those first. If the Shopify Forms block itself is enforcing the 450px maximum width, however, a normal theme CSS override may not always work as expected, especially if the form is using its own component styling.
One possible workaround would be to adjust the container or section around the form rather than editing your original contact form. That way, you can keep your existing contact page untouched and only change the layout of this new page.
If you keep running into limitations with Shopify Forms, another option could be using a dedicated form builder. I’ve used Easify Box Bundle Builder BYOB for creating separate forms with multiple fields without having to duplicate or edit the theme’s contact form. It can be useful when you need more control over the form setup and want to keep everything independent from your existing contact form.
But since your form is already working, I’d first see if the width can be adjusted through your theme or the surrounding section before replacing the setup entirely.