用户将被带到 MailChimp 页面,并要求在 React js 中再次在 MailChimp 页面上填写订阅表格
user will be taken to a MailChimp page, and asked to fill the subscription form again on MailChimp page in react js
实际上我的表单中有 2 个字段,姓名和电子邮件,当用户点击提交按钮时,该数据应存储到 mailchimp 中。但是发生的事情是当我点击提交按钮时它会将我重定向到 mailchimp 页面并要求填写另一个表格并且我可以订阅。所以我不希望用户在 mailchimp 页面上再填写一张表格。
下面是我的代码
import React, { Component } from 'react'
import './FormJoinWaitlist.css'
class FormJoinWaitlist extends Component {
constructor(props){
super(props);
this.state={
emailValue: '',
fNameValue: '',
showMessage:false
}
}
handleChange=(e)=>{
this.setState({
[e.target.name]:e.target.value
});
}
render() {
return (
<div className="model" onClick={this.handleCloseForm}>
<div className="JoinWaitList-model">
<div className="JoinWaitList-content">
<form className="JoinWaitList-form" action="https://walkingonearth.us#.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="####################"/>
<input type="hidden" name="id" value="##########"/>
<h1>Join the waitlist to get early access to our app</h1>
<div className="JoinWaitList-form-validation">
<div className="formInput">
<label htmlFor="">Full name</label>
<input type="text" className="modal-input" id="FullName" name="fNameValue" onChange={this.handleChange} placeholder="Enter your name" title="Full Name should be in letters only" required/>
</div>
<div className="formInput">
<label htmlFor="">Email address</label>
<input type="email" className="modal-input" id="Email" name="emailValue" onChange={this.handleChange} placeholder="Enter your email address" required/>
</div>
<button type="submit" className="JoinWaitList-model-input-optipn" id="mc-embedded-subscribe">Submit</button>
</div>
{/* <!-- people should not fill these in and expect good things --> */}
{/* <div class="field-shift" aria-label="Please leave the following three fields empty">
<label for="b_name">Name: </label>
<input type="text" name="b_name" tabindex="-1" value="" placeholder="Freddie" id="b_name"/>
<label for="b_email">Email: </label>
<input type="email" name="b_email" tabindex="-1" value="" placeholder="youremail@gmail.com" id="b_email"/>
<label for="b_comment">Comment: </label>
<textarea name="b_comment" tabindex="-1" placeholder="Please comment" id="b_comment"></textarea>
</div> */}
</form>
{this.state.showMessage && <h5>Thank you for sign up!</h5>}
</div>
</div>
</div>
)
}
}
export default FormJoinWaitlist
那是因为您的表单具有 URL 的操作,它将把您带到 URL。您需要研究 Mailchimp 拥有的任何 API,以便能够将该数据推送到他们的服务器。您必须实施一个操作,将道具从您的表单推送到您的 API Post.
这是 Mailchimp API 的 link - https://mailchimp.com/developer/
<form .. ***** THIS IS YOUR PROBLEM --> ***** action="https://walkingonearth.us#.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="####################"/>
<input type="hidden" name="id" value="##########"/>
<h1>Join the waitlist to get early access to our app</h1>
<div className="JoinWaitList-form-validation">
<div className="formInput">
<label htmlFor="">Full name</label>
<input type="text" className="modal-input" id="FullName" name="fNameValue" onChange={this.handleChange} placeholder="Enter your name" title="Full Name should be in letters only" required/>
</div>
<div className="formInput">
<label htmlFor="">Email address</label>
<input type="email" className="modal-input" id="Email" name="emailValue" onChange={this.handleChange} placeholder="Enter your email address" required/>
</div>
<button type="submit" className="JoinWaitList-model-input-optipn" id="mc-embedded-subscribe">Submit</button>
实际上我的表单中有 2 个字段,姓名和电子邮件,当用户点击提交按钮时,该数据应存储到 mailchimp 中。但是发生的事情是当我点击提交按钮时它会将我重定向到 mailchimp 页面并要求填写另一个表格并且我可以订阅。所以我不希望用户在 mailchimp 页面上再填写一张表格。
下面是我的代码
import React, { Component } from 'react'
import './FormJoinWaitlist.css'
class FormJoinWaitlist extends Component {
constructor(props){
super(props);
this.state={
emailValue: '',
fNameValue: '',
showMessage:false
}
}
handleChange=(e)=>{
this.setState({
[e.target.name]:e.target.value
});
}
render() {
return (
<div className="model" onClick={this.handleCloseForm}>
<div className="JoinWaitList-model">
<div className="JoinWaitList-content">
<form className="JoinWaitList-form" action="https://walkingonearth.us#.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="####################"/>
<input type="hidden" name="id" value="##########"/>
<h1>Join the waitlist to get early access to our app</h1>
<div className="JoinWaitList-form-validation">
<div className="formInput">
<label htmlFor="">Full name</label>
<input type="text" className="modal-input" id="FullName" name="fNameValue" onChange={this.handleChange} placeholder="Enter your name" title="Full Name should be in letters only" required/>
</div>
<div className="formInput">
<label htmlFor="">Email address</label>
<input type="email" className="modal-input" id="Email" name="emailValue" onChange={this.handleChange} placeholder="Enter your email address" required/>
</div>
<button type="submit" className="JoinWaitList-model-input-optipn" id="mc-embedded-subscribe">Submit</button>
</div>
{/* <!-- people should not fill these in and expect good things --> */}
{/* <div class="field-shift" aria-label="Please leave the following three fields empty">
<label for="b_name">Name: </label>
<input type="text" name="b_name" tabindex="-1" value="" placeholder="Freddie" id="b_name"/>
<label for="b_email">Email: </label>
<input type="email" name="b_email" tabindex="-1" value="" placeholder="youremail@gmail.com" id="b_email"/>
<label for="b_comment">Comment: </label>
<textarea name="b_comment" tabindex="-1" placeholder="Please comment" id="b_comment"></textarea>
</div> */}
</form>
{this.state.showMessage && <h5>Thank you for sign up!</h5>}
</div>
</div>
</div>
)
}
}
export default FormJoinWaitlist
那是因为您的表单具有 URL 的操作,它将把您带到 URL。您需要研究 Mailchimp 拥有的任何 API,以便能够将该数据推送到他们的服务器。您必须实施一个操作,将道具从您的表单推送到您的 API Post.
这是 Mailchimp API 的 link - https://mailchimp.com/developer/
<form .. ***** THIS IS YOUR PROBLEM --> ***** action="https://walkingonearth.us#.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="####################"/>
<input type="hidden" name="id" value="##########"/>
<h1>Join the waitlist to get early access to our app</h1>
<div className="JoinWaitList-form-validation">
<div className="formInput">
<label htmlFor="">Full name</label>
<input type="text" className="modal-input" id="FullName" name="fNameValue" onChange={this.handleChange} placeholder="Enter your name" title="Full Name should be in letters only" required/>
</div>
<div className="formInput">
<label htmlFor="">Email address</label>
<input type="email" className="modal-input" id="Email" name="emailValue" onChange={this.handleChange} placeholder="Enter your email address" required/>
</div>
<button type="submit" className="JoinWaitList-model-input-optipn" id="mc-embedded-subscribe">Submit</button>