title: Submitted react stateful form with Netlify always return 404
body: <p>I've created a form using React and Bulma. Now I wanted to incorporate Netlify and just use their form handling. I've included 'data-netlify'='true' and 'data-netlify-honeypot'='bot-field' and used their suggested way of incorporating the fetch request onSubmit. But I always return a 404 on submit and I don't know why. Any help would be greatly appreciated.</p>
  
  <p>I've tried all the steps that Netlify has suggested. At least I think I have.</p>
  
  <pre><code>import React, { Component } from 'react';
  import 'bulma/css/bulma.css';
  import '../css/ContactFormAndFooter.css';
  import Fade from 'react-reveal/Fade';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { faUser, faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons';
  
  const encode = (data) =&gt; {
  return Object.keys(data)
        .map(key =&gt; encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
        .join("&amp;");
  }
  
  class ContactInfoForm extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        'name': '',
        'email': '',
        'phone': '',
        'details': ''
      }
    }
  
    handleInputChange = e =&gt; this.setState({ [e.target.name]: e.target.value })
  
    handleSubmit = (e) =&gt; {
      fetch('/', {
        method: 'POST',
        headers: { 'Content-Type': "application/x-www-form-urlencoded" },
        body: encode({ "form-name": "contact", ...this.state })
      })
        .then(() =&gt; {
          this.setState({
            name: '',
            email: '',
            phone: '',
            details: ''
          });
          alert('Success!');
        })
        .catch(error =&gt; alert(error));
  
      e.preventDefault();
    }
  
    render() {
      const { name, email, phone, details } = this.state;
      return (
        &lt;section className='section contact-section'&gt;
          &lt;Fade left&gt;
            &lt;h3 className='title is-3'&gt;Please introduce yourself and tell me a little bit about your project&lt;/h3&gt;
          &lt;/Fade&gt;
          &lt;Fade right&gt;
            &lt;div className='container is-centered card box contact-container'&gt;
              &lt;form 
                name='contact' 
                method='POST' 
                onSubmit={this.handleSubmit} 
                data-netlify-honeypot='bot-field' 
                data-netlify='true'
              &gt; 
                &lt;input type="hidden" name="form-name" value="contact" /&gt;
                &lt;p className="hidden"&gt;
                  &lt;label&gt;Don’t fill this out if you're human: &lt;input name="bot-field" /&gt;&lt;/label&gt;
                &lt;/p&gt;
                &lt;div className='field'&gt;
                  &lt;div className='control has-icons-left'&gt;
                    &lt;input 
                      className='input has-text-weight-light' 
                      name='name' 
                      type='text'
                      value={name}
                      onChange={this.handleInputChange}
                      placeholder='First and Last Name' 
                    /&gt;
                    &lt;span className='icon is-small is-left'&gt;
                      &lt;FontAwesomeIcon icon={faUser} style={{'color':'#4B0082'}} /&gt;
                    &lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className='field'&gt;
                  &lt;div className='control has-icons-left'&gt;
                    &lt;input 
                      className='input has-text-weight-light' 
                      name='email' 
                      type='email' 
                      value={email}
                      onChange={this.handleInputChange}
                      placeholder='Email' 
                    /&gt;
                    &lt;span className='icon is-small is-left'&gt;
                      &lt;FontAwesomeIcon icon={faEnvelope} style={{'color':'#4B0082'}} /&gt;
                    &lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className='field'&gt;
                  &lt;div className='control has-icons-left'&gt;
                    &lt;input 
                      className='input has-text-weight-light' 
                      name='phone' 
                      type='number' 
                      value={phone}
                      onChange={this.handleInputChange}
                      placeholder='Phone Number'
                    /&gt;
                    &lt;span className='icon is-small is-left'&gt;
                      &lt;FontAwesomeIcon icon={faPhone} style={{'color':'#4B0082'}} /&gt;
                    &lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className='field'&gt;
                  &lt;label className='label has-text-grey-light has-text-weight-light'&gt;Project Description&lt;/label&gt;
                  &lt;div className='control'&gt;
                    &lt;textarea 
                      className='textarea' 
                      name='details' 
                      value={details} 
                      onChange={this.handleInputChange}
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className="control has-text-centered"&gt;
                  &lt;button className='button has-text-white' type='submit'&gt;Submit&lt;/button&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/Fade&gt;
        &lt;/section&gt;
      )
    }
  }
  
  export default ContactInfoForm;
  </code></pre>