时间戳

首页 > 解决方案 > 如何使用 Input + Button + JS 脚本和 Mailchimp 发送电子邮件

javascript - 如何使用 Input + Button + JS 脚本和 Mailchimp 发送电子邮件

问题描述

我有这个 html 代码：

    <div class="oana" data-wow-delay="500ms">
         <div class="bg-overlay bg-pink opacity-7"></div>
              <form class="search-box position-relative bg-change">
                        <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">
                           
       <input type="email" class="form-control" placeholder="Enter email..." required>
       <button type="submit" class="search-addon"><i class="fa fa-envelope line-height-35px"></i> </button>
    
       </div>
            </form>
    </div>

另外，我有这个来自 Mailchimp 的自定义网站代码>

<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/db2de4cdb7f3405b9fa0d298f/a3d9fbac0ac1eb37d0633a6d0.js");</script>

谁能告诉我如何将这个 JS 脚本集成到表单中，以便电子邮件工作得很好。因为我之前放了这个脚本我检查了连接，没问题，但时事通讯仍然无法正常工作。

标签： javascripthtmlformsvalidationmailchimp

解决方案

首先，你不再需要那个 JS 脚本了，它只是为了你在 SignUp 之后在 setup mailchimp 上建立的连接。您必须遵循这两个简单的步骤：

第一步：登录 mailchimp.com 并转到“注册表格”->“嵌入式表格”部分

例如，请参阅此图像：

在此处输入图像描述

第二步。默认情况下，您可以将该 mailchimp 代码复制到 html 页面上的任何位置。

但是如果你已经有一个表单，就像我已经有一个，你必须记住/遵循 mailchimp 代码中的那 4 行： <form action=，<input type=，<button type=和<script type=

您只需要从 mailchimp 表单中复制<form action=、名称和ID并将其粘贴到您的表单上。另外，复制所有<script type=行

就我而言，这是更新后代码（从一开始）的样子。提到<script type=</head>行，您可以在标记之前复制并粘贴它。但我将其保留在表单标签中。

  <div class="oana" data-wow-delay="500ms">
            <div class="bg-overlay bg-pink opacity-7"></div>
             <form action="https://neculaifantanaru.us1.list-manage.com/subscribe/post?u=db2de4cdb7f3405b9fa0d298f&amp;id=e55f160948" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="search-box position-relative bg-change" 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. My website is https://neculaifantanaru.com </p>
                <div class="input-group">

      <input type="email" name="EMAIL" id="mce-EMAIL" class="form-control" placeholder="Enter email..." required>
      <button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="search-addon"><i class="fa fa-envelope line-height-35px"></i> </button>

                </div>
            </form>
        </div>
  <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
    </div>

注意：如果您 <script type=..</script>在订阅表格上留下线路代码，就像我在上面的代码中所做的那样，人们将能够注册但不会收到任何确认。但是如果你在</head>标签之前复制它，人们将被重定向到一个新的窗口确认页面。

有关在此处安装的更多信息：https ://mailchimp.com/help/host-your-own-signup-forms/

推荐阅读