我有一个部署到 Netlify 的 create-react-app 应用程序,我正在使用react-netlify-form来呈现我的表单。我的表单已在我的 Netlify 仪表板中注册,当我提交时,我收到了成功响应,但我的 Netlify 仪表板中没有显示任何提交。
最初我尝试使用带有react指南的netlify 表单创建一个表单。它在 Netlify 仪表板中注册,但提交的内容不会显示。(我确保在我的 index.html 文件中使用静态表单,并在react表单中使用带有表单名称的隐藏输入字段。)
然后我尝试使用react-netlify-form包,即使提交返回成功状态,我仍然遇到同样的问题。
当我查看 XHR 请求时,我看到响应代码为 200:

在我的 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: 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 中,当应用程序呈现时,表单最终看起来像这样:
<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 仪表板中识别的表单,以及我在提交时收到的成功消息,我希望提交内容显示在我的仪表板中,但那里什么也没有。