Netlify Forms Not Working

Support
1

Site-name: www.josharsenault.dev

Github Repo || Contact Form Component

I’m trying to get contact form submissions working, but they are not sending. I’ve tried:

  • Changing attribute data-netlify="true" to netlify
  • Removing form submission function
  • Checking Stackoverflow/Google for answers
  • Yelling at it

Can someone explain why it’s not working?

2

Hey @dev.josh

I usually start with this. Begin with niceties, and ramp up to lots of expletives! :smiley: :rofl:

A quick look through the repository and I don’t see a HTML form, i.e. a plain HTML form. As you are working React the Work with JavaScript-rendered forms is the place to look which says:

Create a hidden HTML form with the data-netlify="true" attribute or a netlify attribute and input fields with name attributes to match the inputs of your JavaScript-rendered form.

You can add this form to the index.html in the public directory, or any other .html file in public so it is copied during build. Netlify will detect and process the form then. The data-netlify="true" goes on this form, not the main form in the component.

For an example check out coelmay/netlify-react-contact which has AJAX and non-AJAX versions.

3

I’m a little confuzzled on your answer. So you’re saying I should create a 2nd form in the /public folder which has the bare minimum, while keeping the custom form i’ve created. Somehow this will work?

4

Yes.

Example:

The “hidden” form on the AJAX branch of the repository shared above: here

The “actual” form on this branch in the component: here

React compiles JavaScript and Netlify can’t read that, so you have to make a HTML form that Netlify can read.

5

I can barely operate a fork let alone get this code to work. I’m going to have form submissions sent through firebase I think. Thanks very much for your time

6

You don’t have to change your code at all. All you need do it put the following (which is form stripped back) into a form.html file in public

<form
    name="contact"
    data-netlify="true"
    data-netlify-honeypot="bot-field"
>
  <input type="text" name="name" id="formName" >
  <input type="email" name="email" id="formEmail">
  <textare
    id="formMessage"
    name="message"
  ></textarea>

  <input type="hidden" name="form-name" value="contact" />
</form>
7

So you’re saying all I need to do is add this code to /public, and remove the attributes from the ContactForm component, and it should work with no extra steps?

Edit: Added this code, and it shows form submissions are now enabled. But when submitting form info, it’s not updating on the form submissions sections.

Edit: Updated contact form code: Github code

8

That will depend on whether everything else in your code is correct, which I suggest it isn’t. Have a look over the following article/tutorial (which is where my example is taken from, though implemented slightly differently)

1 Like