Question

我正在尝试创建自定义Mailchimp弹出窗口。我正在使用他们的可嵌入表单代码，但是使用JS（或jQuery）从单独的文件中单击按钮将表单HTML加载到页面上。我不希望用户在完成表单时被重定向到Mailchimp的Thank You页面。当我不尝试单独加载表单HTML并将其放在主页面上时，内联验证工作正常，您不会被重定向到Mailchimp页面。但是当我通过JS或jQuery从另一个文件加载相同的表单代码时，内联验证不起作用，并且您被重定向到Mailchimp页面。有没有办法从另一个文件加载表单HTML并避免重定向？

我最初使用jQuery并且发现很多文章暗示问题是Mailchimp和jQuery之间的冲突，但推荐的修复似乎不起作用，并且切换回JS只是修复它。我尝试了很多不同的东西，但对于JS和＆amp; jQuery可能会遗漏一些明显的东西 - 提前道歉！

这是我用于jQuery版本的HTML：

<!-- Form to be loaded into here on button click -->
<div id="mailchimp-popup-outer"></div>

<div class="mailchimp-popup-button">
   <h4>Subscribe to our newsletter:</h4>
   <button id="popup">Subscribe</button>
</div>

这是外部表单文件 - form.html（基本上只是Mailchimp嵌入默认值，只有一些编辑）：

<div id="insert-me">

    <!-- Subscribe popup -->
    <div class="mailchimp-popup-wrapper" id="form-popup">
       <div class="mailchimp-popup">
          <div id="mc_embed_signup">
             <form action="//skillsyouneed.us10.list-manage.com/subscribe/post?u=a868895a9768ad4ae0ec3c321&amp;id=b129192227" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                <img class="close-btn" id="close-popup" src="images/close-icon-3.png">
                   <h4>Subscribe to our Newsletter</h4>
                   <hr>
                   <div class="mc-field-group">
                      <label for="mce-NAME">First name  <span class="asterisk">*</span></label>
                      <input type="text" value="" name="NAME" class="required" id="mce-NAME">
                    </div>
                    <div id="mc_embed_signup_scroll">
                       <div class="mc-field-group">
                          <label for="mce-EMAIL">Email address  <span class="asterisk">*</span></label>
                          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                       </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>
                    <p class="text-success"><small>We <strong>will never</strong> share your email address or name with anybody else, you can unsubscribe from our newsletter at any time.</small></p><br>
                    <!-- 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;"><input type="text" name="b_a868895a9768ad4ae0ec3c321_b129192227" tabindex="-1" value=""></div>
                    <div class="text_align_center"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" onclick ="confirm_show()"></div>
                 </div>
              </form>
           </div>
           <!-- mc-validate -->
           <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';fnames[1]='NAME';ftypes[1]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
        </div>
     </div>                

     <!-- Confirmation Popup -->
     <div class="mailchimp-popup-wrapper" id="confirm-popup">
        <div class="mailchimp-popup">
           <div id="confirm-popup-inner">
              <img class="close-btn" id="close-confirm" src="images/close-icon-3.png">
               <h4>Thanks!</h4>
               <hr>
               <div id="confirm-text">Thanks for subscribing. You will receive an email with instructions on how to confirm your subscription.</div>
           </div>
        </div>
     </div>                

</div>

这是jQuery（在custom.js中）：

// Also tried avoiding using $ in case of conflict with Mailchimp's variables as suggested by other articles, to no avail.

(function($){ 
   $(document).on("click", "#popup", function () { 
      $( "#mailchimp-popup-outer" ).load( "form.html #insert-me", function() {
         $( "#form-popup" ).addClass( "display-block" );
      });
      event.preventDefault();
      return false;
   });

   $(document).on("click", "#close-popup", function () { 
      $( "#form-popup" ).removeClass( "display-block" ).addClass( "display-none" );
   });

   $(document).on("click", "#mc-embedded-subscribe", function () { 
      $( "#form-popup" ).removeClass( "display-block" ).addClass( "display-none" );
      $( "#confirm-popup" ).addClass( "display-block" );
   });

   $(document).on("click", "#close-confirm", function () { 
      $( "#confirm-popup" ).removeClass( "display-block" ).addClass( "display-none" );
   });

})(jQuery);

我也尝试过转换为JS，以防它以某种方式出现jQuery问题，这就是这个（对onclick函数中的HTML进行一些小改动等）：

// Display Popup Form
   function div_show() {
      document.getElementById('form-popup').style.display = "block";
   }
// Hide Popup Form
   function div_hide() {
      document.getElementById('form-popup').style.display = "none";
   }
// Display Popup Confirmation
   function confirm_show() {
      document.getElementById('form-popup').style.display = "none";
      document.getElementById('confirm-popup').style.display = "block";
   }
// Hide Popup Confirmation
   function confirm_hide() {
      document.getElementById('confirm-popup').style.display = "none";
   }
// Load form
   function loadPage(href) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", href, false);
      xmlhttp.send();
      return xmlhttp.responseText;
   }
   function subscribe_click() {
      document.getElementById('mailchimp-popup-outer').innerHTML = loadPage("form.html");
      div_show();
   }

令我困惑的是，如果我将表单HTML直接放在页面中，而不是加载它，那么弹出窗口就像希望的内联验证一样工作，而不是指导用户远离站点。它似乎是关于加载它的过程导致问题 - 我认为？

Answer 1

根据我的经验，如果Mailchimp检测到页面上正在使用Mailchimp表单，则只会将其Javascript文件添加到页面中。当您动态加载表单时，Mailchimp不会检测到它。

一个想法是明确加载必要的Javascript文件。

另一个想法是在页面上放置一个不可见的Mailchimp虚拟表单，以便加载所有正确的文件以供动态加载的表单使用。

Mailchimp内联表单验证不适用于JS加载的HTML

1 个答案: