Os envios de formulários do Netlify "bem-sucedidos" não aparecem no painel

jqlee85

Eu tenho um aplicativo create-react-app implantado no Netlify e estou usando o react-netlify-form para renderizar meu formulário. Meu formulário está registrado no meu painel do Netlify e, quando faço um envio, recebo a resposta de sucesso, mas nenhum envio aparece no meu painel do Netlify.

Inicialmente, tentei criar um formulário usando o formulário netlify com o guia de reação . Ele foi registrado no painel do Netlify, mas os envios não apareceram. (Certifiquei-me de usar o formulário estático em meu arquivo index.html e o campo de entrada oculto com o nome do formulário no formulário react.)

Em seguida, tentei usar o pacote react-netlify-form e ainda estou tendo o mesmo problema, mesmo quando um envio retorna um status de sucesso.

Quando vejo a solicitação XHR, vejo um código de resposta de 200: solicitação xhr para envio de formulário netlify

Em meu arquivo index.html, tenho meu formulário estático para 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 -->

No meu componente, estou renderizando o formulário assim:

<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>

No meu HTML, quando o aplicativo é renderizado, o formulário fica assim:

<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>

Com base no formulário que está sendo reconhecido no painel do Netlify e na mensagem de sucesso que recebo no envio, espero que os envios apareçam no meu painel, mas não há nada lá.

jqlee85

Eu descobri uma solução para isso, caso alguém tenha um problema semelhante. Acontece que o cabeçalho 'content-type' precisa ser 'application / x-www-form-urlencoded' . Acabei descartando o pacote react-netlify-form e usando este componente que funciona para mim.

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;

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Disparar tag de script somente em envios de formulário bem-sucedidos

Os envios do formulário Netlify estão em branco

Os envios do formulário Netlify estão em branco

Os arquivos bem-sucedidos do Xcode 7.2 não serão exibidos no organizador, mas serão exibidos na pasta de arquivos sobre a pasta de dados derivados

Os arquivos bem-sucedidos do Xcode 7.2 não serão exibidos no organizador, mas serão exibidos na pasta de arquivos sobre a pasta de dados derivados

Os DAGs do Airflow são bem-sucedidos, mas as tarefas não estão em execução

Os DAGs do Airflow são bem-sucedidos, mas as tarefas não estão em execução

AJAX sempre pensa que os retornos de php são bem-sucedidos, mesmo após a falha

Como evito o desempacotamento ao converter um vetor de Opções ou Resultados apenas para os valores bem-sucedidos?

Por que as instalações de aplicativos pagos para Android são mais do que pedidos bem-sucedidos?

Os campos do modelo de usuário não aparecem no painel de administração do Django

Os dados do Módulo Dinâmico não aparecem no painel de administração do sitefinity

Bootstrap JavaScript para desativar os envios de formulários se houver campos inválidos e o restante do formulário não estiver funcionando conforme o esperado

O Gradle não tem conhecimento sobre a biblioteca de configuração automática personalizada - os testes falham no Gradle, mas são bem-sucedidos no IDE

Por que os dados de resposta da solicitação AJAX vêm com erro e não são bem-sucedidos?

Os eventos personalizados do Firebase não aparecem no painel

Os registros do código da nuvem não aparecem no painel de análise

Como envio os envios de formulários de contato do ApostropheCMS por e-mail?

Os testes de Karma são bem-sucedidos, mas o PhantomJS retorna "Um erro foi lançado em afterAll" SyntaxError: Token inesperado ','

Estou tentando obter as coordenadas de localização atuais usando GoogleClientApi, estou obtendo resultados bem-sucedidos em todos os dispositivos, exceto alguns telefones micromax

Pipeline de lançamento do Azure Devops - execute esta condição personalizada de trabalho quando determinados estágios forem bem-sucedidos

Obtenha todos os trabalhos bem-sucedidos com API de monitoramento Hangfire

O formulário GatsbyJS + Netlify não recebe envios

Mocha: oculta a saída do console.log de testes bem-sucedidos

Incapaz de extrair o tempo sozinho apesar de data e data e hora serem bem sucedidos

O ApplicationSignInManager mantém uma lista de logins bem-sucedidos?

Como obter logs de eventos CodeDeploy mesmo quando são bem-sucedidos?

Vários envios de formulários usando a mesma função

Os formulários html não aparecem na navegação do modelo

TOP lista

quentelabel

Arquivo