如何将输入框+按钮+JS脚本与Mailchimp集成实现邮件订阅功能

Let's fix this step by step—your form just needs a few key tweaks to talk properly to Mailchimp's backend. Here's what to do:

1. Grab Your Mailchimp Form Submit URL #

First, log into your Mailchimp account, navigate to your target subscriber list, and go to Signup forms > Embedded forms. You'll see a generated form snippet; copy the action attribute value from that <form> tag. It'll look something like this (the u and id parameters will match the ones in your existing script):

https://yourdomain.us17.list-manage.com/subscribe/post?u=db2de4cdb7f3405b9fa0d298f&id=a3d9fbac0ac1eb37d0633a6d0

2. Update Your HTML Form #

Modify your existing form to include Mailchimp-required attributes, field names, and anti-spam hidden fields. Here's the revised version of your code with all necessary changes:

<div class="oana" data-wow-delay="500ms">
  <div class="bg-overlay bg-pink opacity-7"></div>
  <!-- Updated form with Mailchimp attributes -->
  <form class="search-box position-relative bg-change" 
        action="YOUR_MAILCHIMP_SUBMIT_URL" 
        method="post" 
        id="mc-embedded-subscribe-form" 
        name="mc-embedded-subscribe-form" 
        target="_blank" 
        novalidate>
    <h5 class="color-white font-weight-600 text-capitalize mb-3">Newsletter</h5>
    <p class="color-white newsletter-para mb-4"> 
      Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus. 
    </p>
    <div class="input-group">
      <!-- Added name="EMAIL" (required by Mailchimp) -->
      <input type="email" class="form-control" placeholder="Enter email..." required name="EMAIL">
      <!-- Added name="subscribe" for the submit button -->
      <button type="submit" class="search-addon" name="subscribe">
        <i class="fa fa-envelope line-height-35px"></i>
      </button>
    </div>
    <!-- Anti-spam hidden field (matches your script's u/id values) -->
    <div style="position: absolute; left: -5000px;" aria-hidden="true">
      <input type="text" name="b_db2de4cdb7f3405b9fa0d298f_a3d9fbac0ac1eb37d0633a6d0" tabindex="-1" value="">
    </div>
  </form>
</div>

Key Changes Explained: #

• action & method: Connects your form directly to Mailchimp's subscription endpoint.
• id & name: Matches the identifiers your existing Mailchimp script uses to hook into the form.
• name="EMAIL": Mailchimp requires the email input to have this exact name to recognize the field.
• Anti-spam hidden field: Prevents bot submissions—this field's name is built from your script's u and id values (format: b_{u}_{id}).

3. Verify the Script & Test #

Your existing Mailchimp script (<script id="mcjs">...</script>) will automatically handle form validation and submission flow once the form is properly configured.

Test it by entering an email and submitting: you should be redirected to Mailchimp's confirmation page (or see an inline success message if you enabled that in Mailchimp's form settings), and the email should appear in your Mailchimp list after confirmation.

内容的提问来源于stack exchange，提问作者user12700811