Trying Forms on React deploy

[CristianVogel]

Hi,

Tried to setup a form inside a JSX React app. Followed closely the instructions on the knowledge posts, but the form does not send anything - at least not from the Preview deploy site. Any advice?

PLEASE help us help you by writing a good post!

• we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app

TwoTone

• DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
• Build problems? Link or paste the FULL build log & build settings screenshot

The better the post - the faster the answer.

[coelmay]

Hi @CristianVogel

I am unable to load the site shared because of the following errors

I see no form, only a spinner

[CristianVogel]

Thats odd, because I don’t get these errors, and can load the app fine.

Isn’t that the point of the deploy service? Once built?

[coelmay]

Using Chrome it does work.

In FeedbackForm.js I see:

 body: encode({ "form-name": "contact", ...this.state })

However I see the form name is actually feedbackForm

<form name="feedbackForm"
 netlify="true" netlify-honeypot="bot-field"
 method="POST" onSubmit={this.handleSubmit} >
<input aria-hidden="true" type="hidden" name="form-name" value="feedbackForm" />

[CristianVogel]

Thanks! Ok, Netlify dashboard connects to the form. I have followed the hack for JSX rendered forms at How to Integrate Netlify’s Form Handling in a React App

So far no test submissions showing up though.

*What browser were you using when you saw the db errors?

[CristianVogel]

I am still not getting any messages coming through.

TwoTone

After following the official ‘using forms with React’ tutorial to the letter, I am still not getting submissions.
FeedbackForm.js

	body: encode({ 'form-name': 'feedbackForm', ...this.state })

… in the JSX render

	<form name="form-name" value="feedbackForm" method="POST" onSubmit={this.handleSubmit} >

and I have set the hidden field in the JSX

	<input aria-hidden="true" type="hidden" name="form-name" value="feedbackForm" />

as instructed in the Netlify post I added this to my the public html

<!--	form for Netlify deploy -->
<!-- A little help for the Netlify post-processing bots -->
<form name="feedbackForm" netlify netlify-honeypot="bot-field" hidden>
	<input type="text" name="name" />
	<input type="email" name="email" />
	<select name="subject" />
	<input type="text" name="browserInfo" />
	<textarea name="messageText"></textarea>
</form>
<!--end form for Netlify-->

[CristianVogel]

sooner someone from Netlify support helps me out, sooner the forms submissions start paying!

[audrey]

Hey @CristianVogel ,

Sorry but I can’t seem to find the form on the page I see the Select Data Source input area where I can drag and drop files, but I don’t see input fields for name, email, subject, browserInfo. Very sorry if I missed something obvious!

[coelmay]

Hey @audrey

I clicked everything and found the modal under this button.

Not the most intuitive UI IMHO @CristianVogel

[audrey]

Thanks @coelmay and good to meet you !

When I click on the airplane nothing happens. I tried Chrome and Opera

[coelmay]

@audrey, pleasure.

@audrey

When I click on the airplane nothing happens. I tried Chrome and Opera

Very curious

@CristianVogel

*What browser were you using when you saw the db errors?

Firefox 96 is where the errors appeared @CristianVogel

[CristianVogel]

hey @audrey - thanks - try refreshing the page and clicking on it again. I am noticing on deploy that sometimes, the form functionality isn’t loading up first time. Its not a pop-up, so it shouldn’t be blocked…

Also the app is only really going to work properly with MIDI on Chrome, because Firefox doesn’t have WebMIDI support

[CristianVogel]

thanks for the feedback, noted… of course i’d LOVE to be able to receive your feedback through the Netlify form integration , which doesn’t work even though I have carefully followed the rather hacky workaround at How to Integrate Netlify’s Form Handling in a React App

[coelmay]

I’m not a React Dev, however, using the code in the article you shared (which I have previously used but cannot find) I added an ajax-form branch to the basic Netlify/React Conact Form public demo: coelmay/netlify-react-contact/tree/ajax-form. This is deployed to ajax-form–confident-raman-fc2e11.

This is the submission I made

So I can confirm the code works. If you would like to share the repository you are deploying from, I am sure someone will happily assist you in debugging your code.

[CristianVogel]

Ok, I see that your code there seems pretty much the same but you don’t have the hidden field hack from that support article.

If anyone can help, that would be great. I inherited the code base, and I am not a React Developer either… it has been a tonne of work to get to this stage, but here are some pointers into the codebase where the Form integrations are supposed to happen

Here is the component that renders the form dialog.

https://github.com/sonifydata/twotone/blob/pre-beta/src/components/FeedbackForm.js

here is the ‘hidden form’ part in an HTML file located in public/

https://github.com/sonifydata/twotone/blob/pre-beta/public/feedbackForm.html

and here is the parent component handling the form interaction
https://github.com/sonifydata/twotone/blob/pre-beta/src/components/AppHeader.js ( line 188 )

[CristianVogel]

Also , I have been following this post very carefully.

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

I am suspecting some minify webpack plugin might be stripping the tags that the Netlify bots are looking for. It’s a theory. Will experiment.

[perry]

let us know what you find out!

[CristianVogel]

My tests along the WebPack config are inconclusive. Netlify Form is still not working in my project.

i have deployed a number of times, deleted the form and retriggered builds, but nothing gets through. I am well and truly stuck.

[coelmay]

I see you have a subject in the FeedbackForm.js component, however this is missing from the placeholder form in index.html.

@CristianVogel

you don’t have the hidden field hack from that support article.

Under the section Form Handling with a Stateful React Form you’ll notice the hidden form-name attribute is missing e.g.

<input aria-hidden="true" type="hidden" name="form-name" value="feedbackForm"/>

This is because this information is added in the handleSubmit function and is thus not required as a hidden value

handleSubmit = e => {
  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

    /* **
     * form-name attribute added here
     */
    body: encode({ 'form-name': 'feedbackForm', ...this.state })

  })
    .then(() => alert('Success!!'))
    .catch(error => alert(error));

  e.preventDefault();
  this.handleFormClose(e);
};

[CristianVogel]

Thanks.

Ok so what you seem to be suggesting is that the html placeholder Form need to have EXACTLY the same structure as the Javascript /JSX rendered form we are actually trying to get data from?

Except for the hidden input field ‘hook’?