Mailchimp - Make interest group a required field on sign up form - wordpress

Question

I'm importing a mailing list into MailChimp and am having trouble with implementing interest groups correctly. Here's my situation: subscribers have opted in to receive updates for one or more geographic area (NYC, Boston, etc.) The vast majority of users belong to only one group, but it's important to allow people to sign up for more than one group. MailChimp groups work for this perfectly, EXCEPT for the fact that groups can't be made required fields...except using the advanced form design mode.
Per the Mailchimp documentation:
Group fields can not be set to required for a sign up form. The logic in our database is such >that Groups shouldn't be required because they are considered to be a list of options or >interests for segmenting and it is valid for someone to have no interests. If you are an >?>advanced user or have a developer that can help out, a required Groups field could be custom >coded using the Advanced forms option(available only to paid accounts) in your account.
I've done a ton of searches to find even the first steps to addressing this through the advanced form mode but have come up empty so far. I'm no expert on HTML/Javascript/PHP but I know enough to tinker and get things done through trial and error. Also, the form will ideally be hosted on a WordPress page.

Answer 1

I have experienced same problem with you.
What i did is added a javascript validation to the Mailchimp embed code.
This is the example of the code. I was using radio buttons.
I'll just remove the form action button for personal reasons
<!-- 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-->

Answer 2

Have you tried adding class="required" to each group field in the advanced editor? When I look at my required fields, they are declared with this class (except the email, which seems to have a special "email required" class:
<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>
In this example, taken from one of my forms (hosted on a WP page), FNAME is required, but LNAME is not.