我正在尝试创建自定义 Mailchimp 弹出窗口。我正在使用他们的可嵌入表单代码,但是使用来自单独文件的 JS(或 jQuery)单击按钮将表单 HTML 加载到页面上。我不希望用户在完成表单后被重定向到 Mailchimp 的感谢页面。当我不尝试单独加载表单 HTML 并将其放在主页上时,内联验证正在运行并且您不会被重定向到 Mailchimp 页面。但是,当我通过 JS 或 jQuery 从另一个文件加载相同的表单代码时,内联验证不起作用,您将被重定向到 Mailchimp 页面。有没有办法从另一个文件加载表单 HTML 并避免重定向?
我最初使用的是 jQuery,发现很多文章暗示问题是 Mailchimp 和 jQuery 之间的冲突,但推荐的修复似乎没有用,切换回 JS 也没有解决它。我已经尝试了很多不同的东西,但我对 JS 和 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&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 问题,就是这样(对 HTML 进行一些小改动以放入 onclick 函数等):
// 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 直接放在页面中,而不是加载它,那么弹出窗口会像预期的那样通过内联验证工作,并且不会引导用户离开该站点。这似乎与加载它的过程有关,导致了问题 - 我认为?
最佳答案
根据我的经验,如果 mailchimp 检测到页面上正在使用 Mailchimp 表单,它只会将其 Javascript 文件添加到页面中。当您动态加载表单时,Mailchimp 不会检测到它。
一个想法是显式加载必要的 Javascript 文件。
另一个想法是在页面上放置一个不可见的 Mailchimp 虚拟表单,以加载所有正确的文件以供动态加载的表单使用。
关于javascript - Mailchimp 内联表单验证不适用于 JS 加载的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29396167/