React中的自定义mailchimp注册表单 [英] Custom mailchimp signup form in React
问题描述
我有一个我想向其中添加mailchimp注册表单的react应用.我正在建立自定义注册表单，并通过输入用户的名字和姓氏以及电子邮件来进行注册.我没有处理任何竞选活动.我要实现的目标是，一旦他们注册，他们就会收到一封电子邮件以确认订阅.
I have a react app that I would like to add mailchimp signup form to. I am building a custom signup form and have user sign up by entering their first and last name and email. I am not dealing with any campaign stuff. All I am trying to achieve is that once they sign up, they get an email to confirm subscription.
我已完成mailchimp指南 http:中的操作: //kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms ，但它总是给我错误500.
I have done what's in the mailchimp guide http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms but it's always giving me error 500.
这是发送事件的代码
subscribe(event) {
event.preventDefault();
axios({
url: 'https://xxxxxx.us15.list-manage.com/subscribe/post',
method: 'post',
data: this.state,
dataType: 'json'
})
.then(() => {
console.log('success');
});
}
这是表格
<form onSubmit={this.subscribe.bind(this)}>
<input type="hidden" name="u" value="xxxxxxxxxxx" />
<input type="hidden" name="id" value="xxxxxxxxxxx" />
<label>First Name</label>
<input name="FNAME" type="text" onChange={this.handler.bind(this, 'FNAME')} required="true"/>
<label>Last Name</label>
<input name="LNAME" type="text" onChange={this.handler.bind(this, 'LNAME')} required="true"/>
<label>Email</label>
<input name="EMAIL" type="email" onChange={this.handler.bind(this, 'EMAIL')} required="true"/>
<button type="submit" name="submit">Subscribe</button>
</form>
我也在此链接中尝试了建议 AJAX Mailchimp注册表单集成
I have also tried the suggestion in this link AJAX Mailchimp signup form integration
基本上将u和id以及url传递，而不是以表格形式输入.但这也不起作用.
basically passing the u and id along with the url instead of input in the form. but that didn't work either.
任何人都对如何使这项工作有想法吗?谢谢！
Anyone has idea on how to make this work? Thanks!!
推荐答案
有可能. [1]
如您在链接中所述，MailChimp允许您在我们的客户端上发布表单元素的值，以使人们订阅您的邮件列表.比这更高级的东西，您需要使用其API，从而需要CORS(即，客户端无法使用该API).
As you mentioned in your link, MailChimp allows you to post the values of form elements on our client to subscribe people to your mailing list. Anything more advanced than that, and you need to use their API, thus requiring CORS (i.e. the API can't be utilized by the client).
如果您不使用React，则可以简单地复制/粘贴MailChimp的嵌入式表单生成器.但是，如果您在React中，可以执行以下操作:
If you aren't using React – you can simply copy/paste MailChimp's embedded form builder. But if you are in React, here's what you can do:
1)获取u和id值
1) Get the u and id value
在上面的链接中对此进行了概述.或者，您可以进入表单构建器并找到操作字段:它将类似于https://cool.us16.list-manage.com/subscribe/post?u=eb05e4f830c2a04be30171b01&id=8281a64779，其中u和id在查询参数中.
This is outlined in the link above. Or, You can go into your form builder and find the action field: it will be something like https://cool.us16.list-manage.com/subscribe/post?u=eb05e4f830c2a04be30171b01&id=8281a64779 where u and id are in the query arguments.
2)添加onChange和value属性以形成表单元素
2) Add onChange and value attributes to form elements
如果只有一些简单的表单元素，您会注意到键入不会执行任何操作.键入不会在输入元素内呈现任何文本.阅读 https://reactjs.org/docs/forms.html 以了解原因. (反应需要状态的唯一真实来源).
If you just have some simple form elements, you'll notice that typing doesn't do anything. Typing doesn't render any text inside the input elements. Read https://reactjs.org/docs/forms.html to understand why. (React needs a single source of truth for state).
该值需要更新.您可以通过在bind'd函数中更新状态来做到这一点.
The value needs to be updated. You can do this by updating state in a function that's bind'd.
<input
value={this.state.emailValue}
onChange={ (e)=>{this.setState({emailValue: e.target.value});} }
/>
3)奖励:包括MailChimp的反垃圾邮件字段
如果您阅读嵌入式表单中的代码，则会注意到以下内容:
If you read the code inside the embedded forms, you'll notice things like:
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_eb05e4f830c2a04be30171b01_8281a64779" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
您可以通过更改Babel和JSX的适当字段将它们包括在React中. class必须是className. <input>标签需要关闭，样式需要作为对象传递.
You can include these in React by changing the appropriate fields for Babel and JSX. class needs to be className. the <input> tag needs to be closed, and style needs to be passed as an object.
总而言之:这是一个完整的组成部分
In sum: here's an entire component
import React from 'react'
class SubscribePage extends React.Component {
constructor(props) {
super(props);
this.state = {
emailValue: '',
fNameValue: '',
lNameValue: '',
};
}
render() {
return (
<form action="https://cool.us16.list-manage.com/subscribe/post" method="POST" noValidate>
<input type="hidden" name="u" value="eb05e4f830c2a04be30171b01"/>
<input type="hidden" name="id" value="8281a64779"/>
<label htmlFor='MERGE0'>
Email
<input
type="email"
name="EMAIL"
id="MERGE0"
value={this.state.emailValue}
onChange={ (e)=>{this.setState({emailValue: e.target.value});} }
autoCapitalize="off"
autoCorrect="off"
/>
</label>
<label htmlFor='MERGE1'>
First name
<input
type="text"
name="FNAME"
id="MERGE1"
value={this.state.fNameValue}
onChange={(e)=>{this.setState({fNameValue: e.target.value});}}
/>
</label>
<label htmlFor='MERGE2'>
Last name
<input
type="text"
name="LNAME"
id="MERGE2"
value={this.state.lNameValue}
onChange={(e)=>{this.setState({lNameValue: e.target.value});}}
/>
</label>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="button"/>
<div style={{position: 'absolute', left: '-5000px'}} aria-hidden='true' aria-label="Please leave the following three fields empty">
<label htmlFor="b_name">Name: </label>
<input type="text" name="b_name" tabIndex="-1" value="" placeholder="Freddie" id="b_name"/>
<label htmlFor="b_email">Email: </label>
<input type="email" name="b_email" tabIndex="-1" value="" placeholder="youremail@gmail.com" id="b_email"/>
<label htmlFor="b_comment">Comment: </label>
<textarea name="b_comment" tabIndex="-1" placeholder="Please comment" id="b_comment"></textarea>
</div>
</form>
)
}
}
export default SubscribePage
[1]:请注意，该用户将被带到MailChimp页面，并被要求通过单击其电子邮件中的链接来验证订阅.为了避免这种情况，您必须使用API
[1]: Note that the user will be taken to a MailChimp page, and asked to verify the subscription by clicking on a link in their email. To avoid this, you gotta use the API
这篇关于React中的自定义mailchimp注册表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
