Hello,
How can I make the following changes to my contact form?
Make the ‘Subject’ field as wide as the ‘Message’ field.
Thank you!
Topic summary
A user seeks to make the ‘Subject’ field in their Dawn theme contact form as wide as the ‘Message’ field, providing a screenshot showing the current narrow width.
Initial Solutions Attempted:
- One responder suggested adding CSS to
base.csstargeting#ContactForm-Subjectwithwidth: 100%, but this did not resolve the issue. - A follow-up CSS solution was provided using flexbox properties on
.contact__fieldsto force column layout, though confirmation of success wasn’t posted.
Additional Suggestions:
- Setting
width: 100%andbox-sizing: border-boxfor both fields. - Checking form builder customization settings if applicable.
- Using a CSS rule targeting
#subjectwith full width.
Current Status:
The discussion remains unresolved from the original poster’s perspective, as they confirmed the first CSS solution didn’t work but haven’t reported back on subsequent suggestions. The thread later became cluttered with off-topic posts about site migrations and unrelated Shopify services.
Hey @EstebanMontoya
Kindly share your Store URL and Password if enabled
To make the ‘Subject’ field as wide as the ‘Message’ field in your contact form, you’ll need to modify the CSS or styling of the form. If you have access to the code, you can adjust the width property of the ‘Subject’ field to match the width of the ‘Message’ field. If you’re using a form builder or plugin, check the settings or customization options to see if there’s a way to adjust the field widths. If you need specific guidance temps travail, please provide more details about your contact form setup, and I’ll be glad to assist further.
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
#ContactForm-Subject{
width: 100% !important;
}
In case the above code doesn’t work please send me the page URL so I can check it more thoroughly.
Hope that my solution works for you.
Best regards,
Henry | PageFly
Please try again with this code:
.contact__fields {
display: flex !important;
flex-direction: column;
}
To make the ‘Subject’ field as wide as the ‘Message’ field, adjust the CSS by setting width: 100%; and box-sizing: border-box; for both fields. If using a form builder, check the customization settings " Calcular Horas" for field width adjustments.
I have already a site I want to migrate my site into shopify store.
I am a Shopify sites Specialist, need any help ?
Here is the Example of Shopify site need any help ?
Hi @EstebanMontoya ,
You can achieve this by adjusting the CSS of your contact form site. Add the following CSS rule:
#subject {
width: 100%; /* Adjust to match the message field */
}
If you’re using a form builder or CMS, check for width settings under form customization options.
Thanks!
Can you help me to migrate my site into shopify store.
Here is an example of a Shopify store similar to what I want after my site migration
I need to convert my this site on the shopify store.
I have already a site I want to migrate my site into shopify store.
yes, I want to migrate this site.
I have a design created in Figma site and now I want to convert my Figma-based store into a fully functional Shopify store.
thanks ! now my site error is fixed.
Can I also migrate my drone site from wp to Shopify?
Hello @Johnsmith167 ,
Yes! You can migrate the drone site from WP to Shopify because Shopify provides some easy to access editable blocks, ai generator, and many more features. Can you please let me know which issue you are facing.