使用 mailchimp 在同一页面上的两个订阅表单

Question

我想在 Shopify 商店的同一个登录页面中有两个 mailchimp 表单（链接到同一个 mailchimp 列表）。 *这是一个很长的着陆页，所以我希望他们能够在此过程中订阅两次。

似乎第二种形式不起作用，唯一的想法是刷新页面。我很确定他们的 ID 存在冲突，因为这两个表单具有相同的 ID ( id="mailchimp" )，但我相信他们必须这样做。

我可能有一个非常容易解决的问题，但我已经为此苦苦挣扎了一段时间。似乎没有关于它的文档（除了在 iframe 中插入其中一个表单 -> 我对这个解决方案不满意，因为我想用 GTM (GA) 客户成功提交等记录）。

表单的代码（在页面内被调用两次的sn-p）：

<!-- Newsletter Section -->
        <section id="services" class="small-section bg-gray-lighter">
            <div class="container relative">
                <form class="form align-center newsdown" id="mailchimp">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <div class="mb-20">
                                <input placeholder="Introduce tu email" class="newsletter-field form-control input-md round mb-xs-10" type="email" pattern=".{5,100}" required/>

                                <button type="submit" class="btn btn-mod btn-border-c btn-medium btn-round mb-xs-10">
                                    Suscribe
                                </button>
                            </div>


                            <div id="subscribe-result"></div>

                        </div>
                    </div>
                </form>

            </div>
        </section>
        <!-- End Newsletter Section -->

我该怎么做才能让这两个相同的表单在同一个页面上工作？请记住，我无权访问 javascript（因为 mailchimp 具有建立此连接的 Shopify 应用程序）。

Answer 1

如果您将每个 mailchimp 表单包装在一个 .... 中，然后在页面上运行此脚本，它将重新分配非焦点表单的所有 ID，并重新绑定提交事件。有点hacky，但如果你处于绑定状态，它就可以工作。

$(document).ready(function() {

// only execute if confirmed more than 1 mailchimp form on this page
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');
  }
});

Answer 2

看起来与两种确切的形式（相同的 javascript 等）存在冲突，所以我以不同的方式实现了第二种形式：

<!-- Newsletter Section -->
    <section id="services" class="small-section bg-gray-lighter">
        <div class="container relative">
             <form action="YOURACTION;id=YOURID" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                 <div class="row">
                     <div class="col-md-8 col-md-offset-2" style="text-align: center;">  
                         <div class="newsletter-label font-alt">
                            ¿Te interesa? Recibe más noticias y tutoriales exclusivos  
                            </div>
                            <div class="mb-20">
                                <input name="EMAIL" id="mce-EMAIL" placeholder="Introduce tu email" class="newsletter-field form-control input-md round mb-xs-10 required email" type="email" pattern=".{5,100}" required/>

                                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-mod btn-border-c btn-medium btn-round mb-xs-10">
                            </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>    
                  <!-- 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;" aria-hidden="true"><input type="text" name="b_5307a1008b76c5446a7303622_18658ede2a" tabindex="-1" value=""></div>
                            <div class="form-tip">
                                <i class="fa fa-info-circle"></i> Pocos emails, pero de calidad. Nunca Spam. Te servirán.
                            </div>
                            <div id="subscribe-result"></div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <!-- End Newsletter Section -->

<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]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='dropdown';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[5]='MMERGE5';ftypes[5]='url';fnames[7]='MMERGE7';ftypes[7]='text';fnames[6]='MMERGE6';ftypes[6]='birthday';fnames[8]='MMERGE8';ftypes[8]='text';fnames[9]='MMERGE9';ftypes[9]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->