Use Checkboxes to select all Checkbox List input in a Form

[Gally_Articola]

I'm using checkbox lists for all of my checkboxes, and have the main options grouped in fieldsets. When a user checks either "subscribe to all" or "unsubscribe from all" (which are currently set up as two boolean fields that feed data back to Marketo) I want to check or uncheck all checkbox lists in the fieldset. I'm using the script described in this discussion, which works perfectly when my "subscribe to all/unsubscribe from all" fields are using the checkbox input, but it falls apart when I change them to a checkbox list: Re: Marketo Form: Uncheck other boxes when a certain checkbox gets checked

How can I check or uncheck all fields in a fieldset using individual fields set up as checkbox lists?

Here's my form, hosted on a Marketo landing page.​

[Bryan_Epstein]

Gally, the one thing to consider here is whether or not a checkbox is your best option here. (Side note: your form and main content on the landing page do not appear to be centered.)

You could have better luck in utilizing two buttons for your form (1 to submit or subscribe to all and the other to unsubscribe from all). I have done a form submit utilizing a button where un-check all of the subscription options on the page along and submit the form (bringing you to a subscription confirmation or unsubscribe confirmation). To do this, you'll need to export the fields from your database to get all of the API names.

In this case, you would have two buttons with two different IDs (i.e. #SubscribeToAll and #UnsubscribeFromAll).

Here is how I did it utilizing two buttons that are not part of the form itself. The only difference for the two buttons/JS is that you would change everything from "false" to "true."

Since you have the subscribe to all and unsubscribe from all checkbox fields made, you would put those as hidden fields in the form with NULL values.

// Find the button element that you want to Unsubscribe
var Unsub = document.getElementById("UnsubscribeFromAll");
Unsub.onclick = function() {
// Change button text to say Please wait... (this is to mirror the action of the standard submit button)
  Unsub.style.cssText = 'opacity: .5; filter: alpha(opacity=50); /* IE8 and lower */';
Unsub.innerHTML = 'PLEASE WAIT...';
// When the button is clicked, get the form object and submit it
    MktoForms2.whenReady(function (form) {
// Set the values of subscription fields to false
    form.vals({ "FieldAPIName-1":"false","FieldAPIName-2":"false"});
// Submit the Form
form.submit();
//Add an onSuccess handler
    form.onSuccess(function(values, followUpUrl) {
        // Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl
        location.href = "Link to Unsubscribe Landing Page";
        // Return false to prevent the submission handler continuing with its own processing
        return false;
    });
    });
};

If you did want to put the button inside the form using Rich Text, you would add the following code.

window.onload = function() {
// Re-use Code from Above Here
};

Anyone can feel free to check my syntax. Let me know if this works for you or if you have any questions.

[Gally_Articola]

Thanks, Bryan Epstein​! I do like the idea of using a button for the subscribe to all/unsubscribe from all, though I went with a checkbox initially as it visually shows the user what they're unsubscribing from and displays an unsubscribe survey before they submit the form. Of course, I'm always looking for ways to improve our forms!

I tried adding a test value adding the <script> to RichText and nothing displays in the form itself, it looks like Marketo adds CDATA to the code when I try to add it to a Rich Text field.

A few additional questions:

1. How can I style these two buttons?

2. Is it possible to simplify this so it unchecks/checks all fields of a particular type (i.e. unchecks all checkbox inputs) instead of entering each value separately?

3. Since this redirects to a new page, what's the best way to add an unsubscribe survey?

[Bryan_Epstein]

So you would add something like below to the part outside of the form. This would go inside of the <div> tag where you say "Choose what you want to receive." If someone is clicking to unsubscribe, it is likely that they are assuming that all fields will be changed to false.

<button id="UnsubBtn" class="unsub_button" type="button">UNSUBSCRIBE</button>

1. How can I style these two buttons?

Using the button id, you would utilize it in the stylesheet (i.e. #button { background: red; } ). There would obviously be much more that you would style, but that is a start. You can create in-line styles within the landing page using <style type="text/css"> </style>, but that is not really a best practice technique for coding.

2. Is it possible to simplify this so it unchecks/checks all fields of a particular type (i.e. unchecks all checkbox inputs) instead of entering each value separately?

If I understand you correctly, you are asking if you are able to uncheck or check the box utilizing this Javascript code without copying and pasting each of the API names. If so, I do not believe there is a way to do so. Think about it this way, each of your form fields is a unique field. Because of that, you have to physically mark each as true or false, respectively. This is no different than utilizing the flow step of Change Data Value and having to use a flow step for each field.

3. Since this redirects to a new page, what's the best way to add an unsubscribe survey?

You would put the unsubscribe survey on an unsubscribe confirmation page. This way, it is more apparent that you want them to fill out a form. If you hadn't said anything about there being a survey, I would've never known. Thus, you could create a better user experience and hopefully get more unsubscribe surveys filled out.

[Dave_Roberts]

Bryan, could you maybe do something like:

When #SubscribeAll is checked, for each checkbox inside a fieldset -- fieldset input[type=checkbox] -- prop a value of "checked", AND prop value of unchecked for #UnsubscribeAll, .
When #UnsubscribeAll is checked, for each checkbox inside a fieldset, AND #SubscribeAll prop a value of "unchecked".

there might be a few examples here: jquery - Check/Uncheck checkbox with JavaScript? - Stack Overflow that demonstrate the idea.

[Bryan_Epstein]

Technically, you could do something along those lines. In this form specifically, the two checkboxes function are not mutually exclusive. You can have both checkboxes clicked at the same time. In using checkboxes, you're also adding a step to the subscribe/unsubscribe process by making someone scroll to the bottom of the page.

You could definitely check/un-check based off of your written logic, assuming that a user will click to update their profile at the bottom of the form.

[Gally_Articola]

Bryan Epstein and Dave Roberts I am 100% open to new suggestions for the best way to accomplish this if a checkbox is overly complicated and comes with plentiful problems! As some background, this is a change I'll need to make across multiple forms (20+ to be exact), so I'm definitely looking for the most streamlined way to check/uncheck all checklist lists in a form!

I suppose from a user experience perspective, I like the idea of having a singular "submit" button near the bottom for two reasons; if the user subscribes to all they may want to also update their contact information. If they unsubscribe from all, we'll want to capture the reason why so we can analyze our marketing strategy.

Would it maybe be possible to use one field (Unsubscribe from all) and set it as a radio button so the user can choose between Subscribe to all (with a value of NULL) or Unsubscribe from all (with a value of "yes")? Then have some javascript work off of that so the "NULL/subscribe to all" checks all checkboxes and "Yes/Unsubscribe from all" unchecks all checkboxes?

If that's doable, do you know how to split up a specific radio button list into two columns so the options are horizontally aligned in the center of the form?

[SanfordWhiteman]

Whole recipe for that if you search my CodePen.

[Dave_Roberts]

First time flipping thru your pens, holy smokes ... you're a busy dude Good stuff here

https://codepen.io/figureone/

MktoForms2 :: Select All Checkbox https://codepen.io/figureone/pen/JKvRQv

[Dave_Roberts]

Hey Gally-

I put together some CSS to help center the form and get it to be a bit more responsive on your page.

Here's what the styles look like when you apply them to the form and resize the page:

Here's a look at the styles I used -- there are some CSS comments to help explain the different pieces. If you'll want to adjust the max-width of the form, you can update the 800px to any value you'd like (on line 14).

/* header adjustments */
div#lpeCDiv_5710 {
    width: 100%;
    position: initial;
    margin: 0px auto !important;
    display: block;
}
/* wrapper adjustments - make it fluid (full-width) */
.mktoContent.wrapper {
    max-width: 100% !important;
}
/* form container adjustments */
div#lpeCDiv_5711 {
    width: 800px !important; /* adjust to control max-width of form */
    position: initial;
    max-width: 100%;
}
/* form width */
form#mktoForm_3596 {
    max-width: 100%;
}
/* eliminate horizontal scrolling in body */
body {
    overflow-x: hidden;
}