Mailchimp表单操作 - HTML

Mailchimp是一种电子邮件营销工具，它允许用户创建和管理电子邮件订阅列表，并使用可定制的HTML表单来收集订阅者信息。此处我们将讨论如何在HTML中使用Mailchimp表单。

步骤

1. 在Mailchimp中创建一个账户并登录。

2. 转到“列表”并选择要添加表单的列表。如果你还没有列表，则需要创建一个。

3. 选择“账户”>“额外”>“Web表单”。

4. 在“Web表单”页上，你可以选择创建表单或从模板中选择表单。我们将使用“嵌入代码”选项，因为这将允许我们在HTML中嵌入表单。

5. 对于“嵌入代码”选项，你可以选择包含表单的HTML或JavaScript代码。如果你选择HTML，则需要使用HTML表单元素来包含Mailchimp表单代码。

以下是一个HTML示例：

<form action="https://your-username.us7.list-manage.com/subscribe/post" method="POST">
  <input type="hidden" name="u" value="your-u-code">
  <input type="hidden" name="id" value="your-list-id">
  <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label>
    <input type="email" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="mc-field-group">
    <label for="mce-FNAME">First Name </label>
    <input type=text" name="FNAME" class="" id="mce-FNAME">
  </div>
  <div class="mc-field-group">
    <label for="mce-LNAME">Last Name </label>
    <input type="text" name="LNAME" class="" id="mce-LNAME">
  </div>
  <div class="mc-field-group">
    <label for="mce-MMERGE4">Phone Number </label>
    <input type="text" name="MMERGE4" class="" id="mce-MMERGE4">
  </div>
  <div id="mce-responses" class="clear">
    <div class="response" id="mce-error-response" style="display:none"></div>
    <div class="response" id="mce-success-response" style="display:none"></div>
  </div>
  <!-- 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_your-u-code" tabindex="-1" value=""></div>
  <button type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">Subscribe</button>
</form>  

请注意，上面的代码包含隐藏的输入字段，这些字段用于确保表单数据传输到正确的账户和列表。你需要用自己的u-code和list-id替换这些值。

6. 自定义表单的样式。 Mailchimp表单提供了一些自定义选项来帮助你调整表单的外观和感觉。

7. 在HTML页面中添加表单代码。你可以在希望添加表单的位置插入代码。

结论

在HTML中使用Mailchimp表单是一种有效的方式来收集电子邮件订阅者信息。 在创建HTML表单代码时，请确保使用正确的账户和列表ID，并考虑自定义表单以适应你的品牌。