发表新帖
发表新帖

“Successful” Netlify Form Submissions Don't Show in Dashboard

前端 未结
关注
1 801
Happy的楠姐
Happy的楠姐 2021-01-26 03:48

I have a create-react-app application deployed to Netlify, and I\'m using react-netlify-form to render my form. My form is registered in my Netlify dashboard, and when I make a

1条回答
  • 情书的邮戳
    情书的邮戳 (楼主)
    2021-01-26 04:08

    I figured out a fix for this in case anyone else runs into a similar issue. It turns out the 'content-type' header needs to be 'application/x-www-form-urlencoded'. I ended up scrapping the react-netlify-form package and using this component which works for me.

    import React, {Component} from 'react';
import  './Contact.css';
import LinkButton from '../LinkButton/LinkButton';
import qs from 'qs';

class Contact extends Component {

  constructor(props){
    super(props);
    this.state = { 
      name: '',
      email: '',
      message: '',
      canSubmit: false,
      submitResponse: false
    };  
  }

  handleSubmit = e => {

    e.preventDefault();

    if (!this.state.canSubmit) {
      return false;
    }

    let formData = {
      "form-name": this.props.name,
      "name": this.state.name,
      "email": this.state.email,
      "message": this.state.message,
    }

    fetch( window.location.href + "/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: qs.stringify(formData)
    })
    .then(
      response => {
        console.log(response)
        console.log(response.status)
        if (response.status > 199 && response.status < 300){
          this.setState(prevState=>({
            submitResponse: 'success'
          }))
        } else {
          this.setState(prevState=>({
            submitResponse: 'error'
          }))
        } 
      }
    )
    .catch(
      error => {
        console.log(error)
        this.setState(prevState=>({
          submitResponse: 'error'
        }))
      }
    );
  }

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
    if ( this.state.name !== '' && this.state.email !== '' && this.state.message !== '') {
      console.log('fields filled in');
      this.setState(prevState => ({
        canSubmit: true
      }));
    } else {
      this.setState(prevState => ({
        canSubmit: false
      }));
    }
  }

  render() {

    const { name, email, message, canSubmit } = this.state;
    let containerClasses = 'jo-contact-form-container';
    if (!canSubmit) { containerClasses += ' inactive'; }
    if (this.props.colorScheme == 'dark' ) containerClasses += ' dark-bg';
    let nameClasses = 'input100';
    if (name !== '') nameClasses += ' has-val';
    let emailClasses = 'input100';
    if (email !== '') emailClasses += ' has-val';
    let messageClasses = 'input100';
    if (message !== '') messageClasses += ' has-val';


    return 
    
      
    Contact
    
      {!this.state.submitResponse &&