Hello,
I’m editing the error message on the Contact form, and I’d like the form itself to be horizontally distributed, but the error message itself to be shown below the form itself.
Currently, the error message also shows adjacent to the form itself, making it look very off.
How might I go about this? Thanks a lot in advance.
Here is my site Read-Only: LINK
Hi! I’ve attached a screenshot and highlighted the element causing the issue.
You just need to remove the class applied to the highlighted element — once you do that, the error message will correctly appear below the form instead of aligning horizontally with it.
Thanks
Hey @Koji_Hayashi ,
You can have a div block inside Form Block element and place the Field Wrappers and the button element inside it and have the styling as highlighted in the screenshot below.
This should place the success / error message below the form.
Hope this gives you some idea.
@Koji_Hayashi you used width: 400px that is not recomended always use max-width to make your element responsive to down breakpoint.
using fixed widths like width: 400px can break responsiveness on smaller screens. A better, responsive approach is to use max-width, optionally combined with percentages or viewport units, so elements scale naturally on different devices.
Thank you so much for looking into this! I’ll have a look today!
