在React中自定义mailchimp注册表单

Question

我有一个反应应用程序,我想添加mailchimp注册表单.我正在构建一个自定义注册表单,并通过输入他们的姓名和电子邮件让用户注册.我不是在处理任何竞选活动.我想要实现的是,一旦他们注册,他们会收到一封确认订阅的电子邮件.

我已经完成了mailchimp指南http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms中的内容,但它总是给我500错误.

这是send事件的代码

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注册表单集成的建议

基本上将u和id与url一起传递而不是在表单中输入.但那也不起作用.

任何人都知道如何使这项工作？谢谢!!

Answer 1

有可能的.[1]

正如您在链接中提到的,MailChimp允许您在我们的客户端上发布表单元素的值,以便将人员订阅到您的邮件列表.任何比这更先进的东西,你需要使用他们的API,因此需要CORS(即客户端无法使用API​​).

如果您没有使用React - 您可以简单地复制/粘贴MailChimp的嵌入式表单构建器.但如果你在React,你可以做以下事情:

1)获得u和id价值

这在上面的链接中列出.或者,你可以进入你的表单生成器,找到行动领域:它会是这样的https://cool.us16.list-manage.com/subscribe/post?u=eb05e4f830c2a04be30171b01&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

Answer 2

我在尝试让表单在 React 中工作而不打开确认页面时遇到了很多问题。

有几种方法可以解决这个问题，最简单的方法是使用react-mailchimp-subscribe包。这是超海峡前进，包装相当轻。使此表单工作所需的唯一内容是 Mailchimp 在您的列表的“嵌入表单”页面上为您提供的操作 URL。

如果您不想使用该包，您可以深入研究源代码并非常简单地重新创建正在执行的操作。必须更改的几件事是来自

http://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 请求中完成或通过添加添加到 url 中&c=?）。

使用此实现，您不应再被重定向，所有消息都将以 JSON 格式返回。另请注意，您不需要在您的页面上有他们的脚本标签才能工作。

参考：

1. AJAX Mailchimp 注册表单集成

Answer 3

如果有人正在寻找现成的 React 解决方案（在此答案中归功于 @adriendenat ）：

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);
  });
}