Custom Checkboxes & Radio Buttons

Updated February 14, 2023 17:38

Using Memberstack 2.0? There is an updated version of this article for radio buttons, groups of checkboxes, and individual checkboxes.

How to build custom forms with radio buttons and checkboxes that collect and store user data.

About this article:

Difficulty level: Medium
Technical background needed: Intermediate
Estimated time required to complete: 5-10 mins

What and Why?

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice.
Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several.

Checkboxes and radio buttons are particularly tricky input types to work with, but a quick read through this article will clear things up.

As you probably noticed, Memberstack treats all custom fields equally. However, if your website builder supports data attributes, we have a workaround for you.

Note: If your checkboxes or radio buttons do not appear to be working, make sure your CSS is correct. Some custom checkboxes and radio buttons have to be clicked on to show any changes.

Checkboxes

1. Add a checkbox to your site.

Set up your checkbox field exactly as you would for any other form.

2. Add a new field to Memberstack for each checkbox.

Click Add custom fields on the Forms & Fields page. After that, select the field and click the Hide from profile toggle so members can't make free-form edits.

3. Add the attribute to your input field.

Save it, and you're ready to test! Memberstack will record true or false and save that to the member's profile. If the member checks the box and reloads the page, Memberstack will remember and automatically check the box for them.

A few things to remember:

The data-ms-member attribute has to go on the actual <input>. In most site builders, this is the actual checkbox and not the label or element wrapper.
Memberstack will record true or false, so be sure to name your checkbox something descriptive.
The checkbox has to be in a <form> with the data-ms-form="replaceFormType"

Radio buttons

Radio buttons let a user select only one of a limited number of choices and give you more design control.

1. Add a group of radio buttons to your site.

Set up your radio button fields exactly as you would for any other form.

2. Add a single custom field to Memberstack for each radio group.

Click Add custom fields on the forms page. After that, select the field and click the Hide from profile toggle button so members can't make free-form edits.

3. Add the same attribute to every <input> in the group.

Save it, and you're ready to test! Memberstack will record the value of the selected radio button and save that to the member's profile. If a member checks a radio option and reloads the page, Memberstack will remember and automatically check that same radio button.