Mailchimp - 使兴趣小组成为注册表单上的必填字段

时间:2013-10-27 20:58:36

标签: wordpress forms mailchimp

我正在将邮件列表导入MailChimp,并且无法正确实施兴趣组。这是我的情况:订阅者已选择接收一个或多个地理区域(纽约,波士顿等)的更新。绝大多数用户只属于一个群组,但允许人们注册多个群组非常重要。 MailChimp小组完美地为此工作,除了使用高级表单设计模式之外不能将组成为必需字段这一事实。

根据Mailchimp documentation

  

无法将组字段设置为注册表单所需。我们数据库中的逻辑是这样的>不应该要求组,因为它们被认为是选项列表或>用于分段的兴趣,并且对于没有兴趣的人是有效的。如果您是>?>高级用户或者有可以提供帮助的开发人员,则可以使用您帐户中的高级表单选项(仅限付费帐户)自定义>编码所需的“群组”字段。

我已经完成了大量的搜索工作,甚至找到了通过高级表单模式解决这个问题的第一步,但到目前为止还是空了。我不是HTML / Javascript / PHP方面的专家,但我知道通过反复试验来修补和完成任务。此外,理想情况下,表单将托管在WordPress页面上。

2 个答案:

答案 0 :(得分:0)

您是否尝试将 class =“required”添加到高级编辑器中的每个组字段?当我查看我的必填字段时,它们会在此类中声明(电子邮件除外,它似乎有一个特殊的“需要电子邮件”类:

<div class="mc-field-group"><label for="mce-FNAME">First Name <span class="asterisk">*</span>  
</label>  
<input class="required" id="mce-FNAME" type="text" name="FNAME" value="" /></div>  
<div class="mc-field-group"><label for="mce-LNAME">Last Name </label>  
<input id="mce-LNAME" type="text" name="LNAME" value="" /></div>  

在此示例中,取自我的一个表单(托管在WP页面上),FNAME是必需的,但LNAME不是。

答案 1 :(得分:0)

我遇到过同样的问题。 我所做的是为Mailchimp嵌入代码添加了一个javascript验证。 这是代码的示例。我正在使用单选按钮。 我会因个人原因删除表单操作按钮

  <!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:650px;margin:auto;}
.mc-field-group{width:50% !important;margin:auto;}
.mc-field-group.input-group{width:96%  !important;margin:auto;}
#mc-embedded-subscribe{
margin: auto;
width: 150px !important;
height: 30px !important;
font-size: 15px !important;
background: #eb593c !important;
position: relative !important;
color: #fff !important;
margin-left: 38% !important;
}

    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<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 class="mc-field-group">
    <label for="mce-FNAME">First Name </label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group input-group">
    <strong>How Often Would You Like to Hear From Us: <span class="asterisk">*</span></strong>
    <ul><li><input type="radio" value="4" name="group[10709]" id="mce-group[10709]-10709-0"><label for="mce-group[10709]-10709-0">Somewhat Weekly: THRIVING IS THE NEW YOU Blog Posts sent via Email</label></li>
<li><input type="radio" value="8" name="group[10709]" id="mce-group[10709]-10709-1"><label for="mce-group[10709]-10709-1">Monthly Vibrancy Roundup: It's like a E-Newsletter but way groovier.</label></li>
</ul>
</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;"><input type="text" name="b_ef38bee7ba91bb0815db87917_22d8d62dc8" tabindex="-1" value=""></div>
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</form>
<script type="text/javascript">
var forms = document.getElementById('mc-embedded-subscribe-form');
try {
    forms.addEventListener("submit", function(event)
        {
            var off_payment_method = document.getElementsByName('group[10709]'); //this is the name of the radio buttons
            var email = document.getElementById('mce-EMAIL');//email field
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

            if (!filter.test(email.value)) {
                alert('Please provide a valid email address');
                event.preventDefault();
                return false;
            }

            var ischecked_method = false;
            for ( var i = 0; i < off_payment_method.length; i++) {
                if(off_payment_method[i].checked) {
                    ischecked_method = true;
                }
            }
            if(!ischecked_method){
                alert("Please choose from How Often Would You Like to Hear From Us:");
                event.preventDefault();
                return false;
            }else{
                return true;
            }
        }, false);
} catch(e) {
    forms.attachEvent("onsubmit", function(event)
    {
        var off_payment_method = document.getElementsByName('group[10709]'); //this is the name of the radio buttons
        var email = document.getElementById('mce-EMAIL');//email field
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if (!filter.test(email.value)) {
            alert('Please provide a valid email address');
            event.preventDefault();
            return false;
        }

        var ischecked_method = false;
        for ( var i = 0; i < off_payment_method.length; i++) {
            if(off_payment_method[i].checked) {
                ischecked_method = true;
            }
        }
        if(!ischecked_method){
            alert("Please choose from How Often Would You Like to Hear From Us:");
            event.preventDefault();
            return false;
        }else{
            return true;
        }
    }); //Internet Explorer 8-
}
</script>
</div>
<!--End mc_embed_signup-->