Hide form on index.html (ReactJS)

I am implementing a contact page on my site and (naturally) want to include a form. I have deployed the commit which contains the form and it shows up on the live site, however as this is done using ReactJS, I needed to add a separate form in public/index.html for the server - gracious-babbage-21fe68 - to begin collecting submissions.

Although I have a hidden attribute on the form (e.g, <form name="contact" netlify netlify-honeypot="bot-field" hidden>) it still shows up when the site is built.

Can I use display: none in CSS here, or is there something else I should be doing to make this form invisible?

@chrisfinazzo

You can definitely use CSS there. Netlify doesn’t really take CSS styling into consideration when processing forms.

Also, You need not necessarily add the form in index.html. You can create a separate file called form.html and add the form to it. It would still work. And since it’s on a different page, you need not do any hiding, unless you want to.

1 Like

@Hrishikesh,

Originally, I was following along with another tutorial using Forms, but in a site built with Gatsby which outputs static files - Create React App obviously doesn’t do this and I think that’s where the confusion came in.

I was able to sort this out by changing an attribute - “data-netlify” appearently works better than just “netlify” to trigger form handling. There’s still some testing to do as I style the form, but at least I know it works correctly and I am notified by email on each submission as expected.

1 Like