Does Netlify change the form's formatting/styling?

Support
1

I converted a WordPress site to a static site via Simply Static and then uploaded it to Netlify. My contact form looks like the top.

Screenshot 2023-09-07 002714
Screenshot 2023-09-07 002714978×838 45.1 KB

However, when I add the “netlify” to the form element, the formatting is changed. One of the fields drops to the next line, and the next field is stretched, like the bottom.

Why is this happening? When I remove the “netlify” from the HTML, the form looks the way it’s supposed to, but then I obviously can’t receive form submissions. How can I fix this?

2

Hi @CardboardFoxDigital, Netlify does not change your form’s formatting/styling.
There must a problem with how your CSS is loaded.
If possible can you share a repository of your site or a link to site for me to help with the debugging.

Thanks.

3

That must be an issue with the page builder I’m using, Bricks. I only edited the HTML to include “netlify”.

4

I included the code.

5

Hi @CardboardFoxDigital, thanks for sharing your repository.
Took a look at your code and it seems you used Bricks editor
The reason why the Project Budget input is not inline with the How Did You Hear About Us input is because the width of the How Did You Hear About Us input is 95%.
Kindly change the width to 45% or use the Bricks editor since the other inputs width is 45%

#brxe-xlwbaq .form-group:nth-child(7) {
    width: 45%;
}

Screenshot 2023-09-07 at 10.54.13 PM
Screenshot 2023-09-07 at 10.54.13 PM3024×1804 329 KB

Screenshot 2023-09-07 at 10.57.27 PM
Screenshot 2023-09-07 at 10.57.27 PM1920×1145 140 KB

Thanks.

1 Like
6

First off, thanks for looking through the code. I don’t know why it’s the case, but the problem looks like a weird mislabeling issue. On my live server on VSCode, upon inspection, that field is the 6th child. When it’s uploaded, it becomes the 6th. So, I just have to premptively edit that, I guess. That’s kind of annoying, but no big deal. That’s odd how everything looks like it should when I remove the “netlify” attribute. Does that push the children or something?

7

Hi @CardboardFoxDigital, thanks for the feedback.

The quote below is from Netlify’s official documentation about how Netlify handles forms with the netlify attribute

When Netlify parses the static HTML for a form you’ve added, the build system automatically strips the data-netlify="true" or netlify attribute from the <form> tag and injects a hidden input named form-name . In the resulting HTML that’s deployed, the data-netlify="true" or netlify attribute is gone, and the hidden form-name input’s value matches the name attribute of <form> like this: <input type="hidden" name="form-name" value="contact">

Hope the above helps.
Thanks.

8

Ah. So, that hidden input pushes the children down. I bet this wouldn’t be an issue if I hand-coded it, but oh, well. Good to know. Thanks.

1 Like