React 中的自定义 mailchimp 注册表单
Posted
技术标签:
【中文标题】React 中的自定义 mailchimp 注册表单【英文标题】：Custom mailchimp signup form in React 【发布时间】：2017-11-04 14:16:42 【问题描述】：我有一个想要添加 mailchimp 注册表单的 react 应用程序。我正在构建一个自定义注册表单，并让用户通过输入他们的名字和姓氏以及电子邮件进行注册。我不处理任何竞选活动。我想要实现的是，一旦他们注册，他们就会收到一封确认订阅的电子邮件。
我已经完成了 mailchimp 指南 http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms 中的内容，但它总是给我错误 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 signup form integration的建议
基本上将 u 和 id 与 url 一起传递，而不是在表单中输入。但这也没有用。
有人知道如何进行这项工作吗？谢谢！！
【问题讨论】：
我认为使用 Mailchimp 提供的带有 React 的自定义注册表单的示例代码是不可能的。您需要改用 Mailchimp API，但让您自己的服务器处理请求，因为它们不启用 CORS，因此 API 请求无法从客户端发出。 【参考方案1】：这是可能的。 [1]
正如您在link 中提到的，MailChimp 允许您在我们的客户端上发布表单元素的值，以便人们订阅您的邮件列表。比这更高级的东西，你需要使用他们的 API，因此需要 CORS（即客户端不能使用 API）。
如果您不使用 React – 您可以简单地复制/粘贴 MailChimp 的嵌入式表单构建器。但如果你在 React 中，你可以这样做：
1) 获取u 和id 值
上面的链接中对此进行了概述。或者，您可以进入表单构建器并找到操作字段：它将类似于https://cool.us16.list-manage.com/subscribe/post?u=eb05e4f830c2a04be30171b01&amp;id=8281a64779，其中u 和id 在查询参数中。
2) 为表单元素添加onChange和value属性
如果您只有一些简单的表单元素，您会注意到打字没有任何作用。键入不会在输入元素内呈现任何文本。阅读https://reactjs.org/docs/forms.html 了解原因。 （React 需要一个单一的事实来源）。
值需要更新。您可以通过更新绑定的函数中的状态来做到这一点。
<input
value=this.state.emailValue
onChange= (e)=>this.setState(emailValue: e.target.value);
/>
3) 奖励：包括 MailChimp 的反垃圾邮件字段
如果您阅读嵌入表单中的代码，您会注意到以下内容：
<!-- 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> 标签需要关闭，样式需要作为对象传递。
总之：这是一个完整的组件
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
【讨论】：
感谢您的示例。当我运行它时，我收到警告： 应该是htmlFor。谢谢你的收获。 2019 年 11 月，这仍然有效。感谢您发布所有代码和步骤，这让您更容易理解！ 不再工作了，它转到一个页面，上面写着“这很奇怪，此页面似乎丢失了。”【参考方案2】：我在尝试让表单在 React 中工作而不打开确认页面时遇到了很多问题。
有几种方法可以解决这个问题，最简单的方法是使用react-mailchimp-subscribe 包。这是超级海峡前进，包装相当轻。要使此表单正常工作，唯一需要的是 Mailchimp 在您的列表的嵌入表单页面上为您提供的操作 URL。
如果您不想使用该软件包，您可以深入研究源代码并非常简单地重新创建正在执行的操作。需要更改的几件事是来自
的 URLhttp://xxxxx.us#.list.com/subscribe/post?u=xxxxx&id=xxxx
到
http://xxxxx.us#.list.com/subscribe/post-json?u=xxxxx&id=xxxx
除了添加-json之外，您还需要添加空白参数c（这可以在jsonp请求中完成，也可以通过添加&c=?添加到url中）。
使用此实现，您不应再被重定向，所有消息将以 JSON 格式返回。另请注意，您不需要在页面上添加他们的脚本标签即可。
参考资料：
-
AJAX Mailchimp signup form integration
【讨论】：
【参考方案3】：如果有人正在寻找可立即使用的 React 解决方案（感谢 @adriendenat 在this 答案中）：
import jsonp from 'jsonp';
import queryString from 'query-string';
// ...
const subscribeToNewsLetter = () =>
const formData =
EMAIL: // your email string,
;
jsonp(`YOUR_URL/subscribe/post-json?u=YOUR_U&id=YOUR_ID&$queryString.stringify(formData)`, param: 'c' , (err, data) =>
console.log('err:', err);
console.log('data:', data);
);
【讨论】：
【参考方案4】：像@marco-gaspari 一样，我也遇到了很多与此相关的问题。我的答案是他们的一个变体，但对我来说，有一些调整是使其工作所必需的。
除了将action url 末尾的post 切换为post-json 并包括等于? 的c 属性（除了u 和id 属性来自原始网址；我选择将所有这些都合并为hidden 输入字段），我还必须将输出重定向到隐藏的<iframe>。否则，将打开一个带有 json 响应的新页面。
这可能是因为我使用了自定义表单；但对于也使用custom Mailchimp signup forms 的其他人，此解决方案可能会有所帮助。
<form action="https://xxx.usxx.list-manage.com/subscribe/post-json" method="post" className="validate" target="hiddenFrame" >
<!--u and id values from url generated by Mailchimp form builder -->
<input type="hidden" name="u" value="xxxxxxxx" />
<input type="hidden" name="id" value="xxxxxxx" />
<input type="hidden" name="c" value="?" />
</form>
<iframe name="hiddenFrame" src="about:blank" style=display:'none'></iframe>
【讨论】：
以上是关于React 中的自定义 mailchimp 注册表单的主要内容，如果未能解决你的问题，请参考以下文章