Успешные отправки формы Netlify не отображаются на панели инструментов

У меня есть приложение create-response-app, развернутое в Netlify, и я использую react- netlify-form, чтобы отобразить мою форму. Моя форма зарегистрирована на моей панели инструментов Netlify, и когда я отправляю заявку, я получаю ответ об успешном завершении, но на моей панели Netlify не отображаются отправленные данные.

Сначала я пытался создать форму с помощью форма netlify с руководством по реакции. Он зарегистрирован на панели управления Netlify, но материалы не отображаются. (Я обязательно использовал статическую форму в моем файле index.html и скрытое поле ввода с именем формы в форме реакции.)

Затем я попытался использовать пакет response-netlify-form, и у меня все еще возникает та же проблема, даже если отправка возвращает статус успешной.

Когда я смотрю на запрос XHR, я вижу код ответа 200: Запрос xhr для отправки формы netlify

В моем файле index.html у меня есть статическая форма для Netlify:

<!-- Netlify static HTML form -->
<form name="contactform" netlify netlify-honeypot="__bf" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message"></textarea>
</form>
<!-- End Netlify static HTML form -->

В моем компоненте я визуализирую такую ​​форму:

<NetlifyForm name='contactform'>
    {({ loading, error, success }) => (
      <div>
        {loading &&
          <div>Loading...</div>
        }
        {!loading && !success &&
          <div className="jo-contact-form">
            <h2 className="jo-contact-form-title">
              Contact
            </h2>
            <div>
              <div className="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
                <label htmlFor="name">Your Name</label>
                <input className={nameClasses} type="text" name="name" placeholder="Enter your name" value={name} onChange={this.handleChange}/>
                <span className="focus-input100"></span>
              </div>
              <div className="wrap-input100 rs1-wrap-input100 validate-input" data-validate = "Valid email is required: [email protected]">
                <label htmlFor="email">Email</label>
                <input className={emailClasses} type="email" name="email" placeholder="Enter your email addess" value={email} onChange={this.handleChange}/>
                <span className="focus-input100"></span>
              </div>
            </div>
            <div className="wrap-input100 validate-input" data-validate = "Message is required">
              <label htmlFor="message">Message</label>
              <textarea className={messageClasses} name="message" placeholder="Your message here..." value={message} onChange={this.handleChange}></textarea>
              <span className="focus-input100"></span>
            </div>
            <LinkButton text="Send" linkType="form" />  
          </div>
        }
        {error &&
          <div className="jo-contact-form-submission-message jo-contact-form-error">
            <div>
              Your information was not sent. Please try again later.
            </div>
          </div>
        }
        {success &&
          <div className="jo-contact-form-submission-message jo-contact-form-success">
            <div>
              Thanks for the message! Expect a reply shortly. 
            </div>
        </div>
        }
      </div>
    )}
</NetlifyForm>

В моем HTML, когда приложение отображается, эта форма выглядит так:

<form name="contactform" action="/" data-netlify="true" data-netlify-honeypot="__bf">
  <input type="hidden" name="form-name" value="contactform"><input type="text" name="__bf" style="display: none;">
  <div>
      <div class="jo-contact-form">
        <h2 class="jo-contact-form-title">Contact</h2>
        <div>
            <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required"><label for="name">Your Name</label><input class="input100" type="text" name="name" placeholder="Enter your name" value=""><span class="focus-input100"></span></div>
            <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: [email protected]"><label for="email">Email</label><input class="input100" type="email" name="email" placeholder="Enter your email addess" value=""><span class="focus-input100"></span></div>
        </div>
        <div class="wrap-input100 validate-input" data-validate="Message is required"><label for="message">Message</label><textarea class="input100" name="message" placeholder="Your message here..."></textarea><span class="focus-input100"></span></div>
        <div class="jo-link-button-wrapper">
            <div class="jo-link-button undefined form">
              <button type="submit" style="background-color: rgb(25, 25, 25); border: 1px solid rgb(25, 25, 25); color: white;">
                  <span class="button-text">Send</span>
                  <span class="button-arrow">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 476.213 476.213">
                        <polygon fill="white" points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5  345.606,368.713 476.213,238.106 "></polygon>
                    </svg>
                  </span>
              </button>
            </div>
        </div>
      </div>
  </div>
</form>

Основываясь на форме, распознаваемой на панели инструментов Netlify, и сообщении об успехе, которое я получаю при отправке, я ожидал, что отправленные материалы появятся на моей панели инструментов, но там ничего нет.


netlify reactjs create-react-app
person jqlee85    schedule 18.02.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я выяснил, как это исправить, если кто-то еще столкнется с аналогичной проблемой. Оказывается, заголовок 'content-type' должен быть 'application / x-www-form-urlencoded'. В итоге я отказался от пакета response-netlify-form и использовал этот компонент, который мне подходит.

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 <div className="jo-contact-form">
      <h2 className="jo-contact-form-title">Contact</h2>
      {!this.state.submitResponse &&
        <form name={this.props.name} method="post" onSubmit={this.handleSubmit} data-netlify-recaptcha="true">
          <div className={containerClasses}>
            <input type="hidden" name="form-name" value="contactpageform"/>
            <div>
              <div className="wrap-input100 rs1-wrap-input100 validate-input">
                <label htmlFor="name">Your Name</label>
                <input className={nameClasses} type="text" name="name" value={name} onChange={this.handleChange}/>
                <span className="focus-input100"></span>
              </div>
              <div className="wrap-input100 rs1-wrap-input100 validate-input">
                <label htmlFor="email">Your Email</label>
                <input className={emailClasses} type="email" name="email" value={email} onChange={this.handleChange}/>
                <span className="focus-input100"></span>
              </div>
              <div className="wrap-input100 validate-input">
                <label htmlFor="message">Message</label>
                <textarea className={messageClasses} name="message" onChange={this.handleChange} value={message}/>
                <span className="focus-input100"></span>
              </div>
              {canSubmit && <LinkButton size="large" text="Send" linkType="form" />}
              {!canSubmit && <LinkButton size="large" text="Send" linkType="form" inactive={true} />}
            </div>
          </div>
        </form>
      }
      {this.state.submitResponse == 'success' &&
        <div className="jo-contact-form-submission-message jo-contact-form-success">
          <div>Thanks for the message! Expect a reply shortly.</div>
        </div>
      }
      {this.state.submitResponse == 'error' &&
        <div className="jo-contact-form-submission-message jo-contact-form-error">
          <div>Your information was not sent. Please try again later.</div>
        </div>
      }
    </div>
  }
}

export default Contact;
person jqlee85    schedule 20.02.2019