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:
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á.
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.
deixe-me dizer algumas palavras