一个列表的Mailchimp多个订阅表单

Mailchimp Multiple Subscription Forms for one list

本文关键字：Mailchimp 表单 列表 一个      更新时间：2023-09-26

我在 html 页面中嵌入了三个不同的自定义 mailchimp 表单，这些表单指向一个列表（每个表单有两个相似的字段和一个不同的隐藏字段）。

除了一件事之外，一切都有效。响应消息（成功或错误）仅显示在第一个表单的div #mce-response的同一页面中。在另外两个中，响应被加载并显示在另一个空白页中。我希望在所有三个表单的同一页面中显示回复。我不是Java脚本用户，但经过一些研究，我发现这涉及外部脚本：

<script type='text/javascript' src='http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>

是否有通过 mailchimp 设置或我们必须使用 JavaScript 文件的解决方案？

我知道这个脚本只对第一种形式有效。知道怎么做吗？谢谢

显然使用 iframe 有效。

请参阅此文章/视频。

文章中的文字用于解释：

不要将"注册表单嵌入代码"页中的代码粘贴到您的网站中，而是将其粘贴到文本文档中（使用记事本 （PC） 或文本编辑 （Mac）），并将其称为"注册表单.html"或类似的东西。您可能希望将表单包装在div 中以进行样式设置，并添加一些内联样式。因此，HTML 文档将如下所示： 

<style type="text/css">
<!--
lots of CSS to make your form look pretty
//-->
</style>
<div id="sign-up">
at least 50 lines of code copied from MailChimp goes here
</div>

然后将此HTML文档（"注册表单.html"或任何您称呼它的内容）上传到服务器上的某个位置。

然后，为了在页面上嵌入代码（根据需要多次），您可以使用如下所示的 iframe 调用 HTML：

<iframe src="http://your-site.com/mailchimp-form.html" frameborder="0" width="654" height="200">
<a href="http://link-to-form-on-mailchimp-site" target="_blank">Anchor text saying "click here to sign up" or something like that for people whose browsers can't read iframes</a>
</iframe>

使用 Ajax Chimp。这将 （1） 防止将您的订阅者重定向到您的页面，以及 （2） 允许多种表单。

https://github.com/scdoshi/jquery-ajaxchimp

如果将

每个 mailchimp 表单包装在 .... 中，然后在页面上运行此脚本，它将重新分配非焦点表单的所有 ID，并重新绑定提交事件。有点笨拙，但如果你陷入困境，它会起作用。

// only execute if confirmed more than 1 mailchimp form on this page
$(document).ready(function() {
    if ( $('.mc-form-instance').length > 1 ) {
        $('.mc-field-group > .required').on('focus', function() {
            var thisField = $(this);
            // backup all mc-form ids on this page
            $('.mc-form-instance [id]').each(function() {
                var currentID = $(this).attr('id');
                if ( currentID.indexOf('-bak') == -1 ) {
                    $(this).attr('id', currentID + '-bak');
                }
            });
            // change the current form ids back to original state
            var thisForm = thisField.closest('.mc-form-instance');
            thisForm.find('[id]').each(function() {
                var currentID = $(this).attr('id');
                if ( currentID.indexOf('-bak') != -1 ) {
                    $(this).attr('id', currentID.replace('-bak', ''));
                }
            });
        });
        // re-bind
        $.getScript('//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js');
    }
});
相关文章：