@aamodtgroup/react-mailchimp-form 中文文档教程

Question

react-mailchimp-form

它提供了一个易于配置的组件，用于将 mailchimp 表单添加到您的 React 项目

Install

npm install react-mailchimp-form

请务必包含 --save 选项以将其添加为应用程序的 package.json 中的依赖项

Usage

首先，您必须配置您的 Mailchimp 帐户：

1. Create a new account or use an existing one
2. Add a new list or use an existing one
3. Personalize the fields on your list on "Settings > List Fieds"
4. Copy the HTML and extract the action from "Signup Forms > Embedded forms"

操作 URL将如下所示：

https://<YOUR-USER>.us16.list-manage.com/subscribe/post?u=XXXXXXXXXXXXX&amp;id=XXXXXX

我们将使用此 URL 来配置组件

import React, { Component } from 'react';
// import the component
import Mailchimp from 'react-mailchimp-form'

class App extends Component {
  render() {
    return (
        <Mailchimp
        action='https://<YOUR-USER>.us16.list-manage.com/subscribe/post?u=XXXXXXXXXXXXX&amp;id=XXXXXX'
        fields={[
          {
            name: 'EMAIL',
            placeholder: 'Email',
            type: 'email',
            required: true
          }
        ]}
        />
    );
  }
}

export default App;

Options

Multiple fields

您可以添加 Mailchimp 表单所需的所有字段，请记住您必须在“设置 > 列表字段”上配置它们

Messages

默认情况下个性化或更改消息语言

ClassName

添加个性化类以个性化您的表单

  <Mailchimp
  action='https://<YOUR-USER>.us16.list-manage.com/subscribe/post?u=XXXXXXXXXXXXX&amp;id=XXXXXX' 

  //Adding multiple fields:
  fields={[
    {
      name: 'EMAIL',
      placeholder: 'Email',
      type: 'email',
      required: true
    },
    {
      name: 'FNAME',
      placeholder: 'name',
      type: 'text',
      required: true
    }
  ]}
  // Change predetermined language
  messages = {
    {
      sending: "Sending...",
      success: "Thank you for subscribing!",
      error: "An unexpected internal error has occurred.",
      empty: "You must write an e-mail.",
      duplicate: "Too many subscribe attempts for this email address",
      button: "Subscribe!"
    }
  }
  // Add a personalized class
  className='<YOUR_CLASSNAME>'
  />

Demo

检查此处：react-mailchimp-form

Contributing

如果有人想要添加或改进某些内容，我邀请您直接在此存储库中进行协作：react-mailchimp-form

License

React-mailchimp-form 发布于MIT 许可证。