“成功” Netlify表单提交不显示在仪表板中 [英] "Successful" Netlify Form Submissions Don't Show in Dashboard
问题描述
我有一个部署到Netlify的create-react-app应用程序，并且正在使用 react-netlify-form 呈现我的表单。我的表单已在Netlify仪表板中注册，提交时得到了成功响应，但Netlify仪表板中未显示任何提交。
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 submission, I get the success response, but no submissions show up in my Netlify dashboard.
最初，我尝试了使用使用 react指南进行形式化。它已在Netlify仪表板中注册，但是提交不会显示。 （我确保在index.html文件中使用静态表单，而在react表单中使用表单名称的隐藏输入字段。）
Initially I tried creating a form using the netlify form with react guide. It registered in the Netlify dashboard, but submissions would not show up. (I made sure to use the static form in my index.html file, and the hidden input field with the form name in the react form.)
然后我尝试使用 react-netlify-form 软件包，即使提交返回成功状态，我仍然遇到同样的问题。
Then I tried using the react-netlify-form package, and I'm still having the same issue, even when a submission returns a success status.
何时我看了一下XHR请求，看到的响应代码为200：
When I look at the XHR request I see a response code of 200:
在我的index.html文件中，我有Netlify的静态表单：
In my index.html file I have my static form for 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 -->
在我的组件中，我正在渲染如下形式：
In my component I'm rendering the form like this:
<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: ex@abc.xyz">
<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中，呈现应用程序时，表单最终看起来像这样：
In my HTML when the app is rendered that form ends up looking like this:
<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: ex@abc.xyz"><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仪表板中识别出的表单以及提交成功消息，我希望提交的内容会显示在我的仪表板上，但那里什么也没有。
Based on the form being recognized in the Netlify dashboard, and the success message I get up on submission, I'd expect the submissions to show up in my dashboard, but there's nothing there.
推荐答案
我为此找到了解决办法以防其他人遇到类似问题。事实证明，内容类型 标头需要 application / x-www-form-urlencoded 。我最终取消了 react-netlify-form 程序包，并使用了对我有用的该组件。
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 <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;
这篇关于“成功” Netlify表单提交不显示在仪表板中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
