How to Add Radio Buttons to your Signup Forms with HTML
Collecting data about your subscribers and leads is very important because it allows you to send highly personalized and targeted emails.
But data collection is a pain in the ass if you don’t help your visitors do it faster.
This is why radio buttons on signup forms are a good solution: you just ask for 1 click instead of using one more input field to be filled out.
In this step-by-step guide, I’m showing you how to add radio buttons to your signup forms!
What is a “radio button”? Why is it useful?
Radio buttons are choices you give your visitors. It’s not a simple checkbox because they can only choose 1 from the options.
For example, you can ask this:
“What is your favorite color?”
You can pick only one, you can’t have blue and red as your favorite color, only blue or red or green or other.
So basically radio buttons are categories that can’t have intersections with each other. If you think that you belong to 1 category there is no option to belong to other too at the same time.
In reality, it can be a very useful way of collecting information on a signup form for marketers: you can create segments easily based on this information and send personalized, targeted messages based on it.
In this guide, I’m showing you how to add radio buttons to your signup forms. My example is a signup form that collects information about the fillers’ gender via 3 options:
In this guide, you will convert an input field into a radio button
If you would like to add radio buttons to your signup form, you have to convert a custom field into radio buttons, because you want to grab the data and send it straight to your email marketing software.
If you would add it without using the process below, you wouldn’t be able to pass data to your email automation solution. So adding HTML without synchronizing it with your custom fields is unfortunately not enough.
You will achieve the state below on the picture after you finish this step-by-step guide:
Step 1: Create a completely new signup form
In Automizy go to the Contacts -> SignUp Forms menu and click on the “Create Signup Form” button.
Name your form. Use a name that is related to your signup form’s offer: newsletter subscription, lead magnet, ebook name, etc.
Build your form as you want and create a new “Text type custom field”. As the example is about gender, create a custom field for “Gender”.
Add this new custom field as the last input field into your form before the CTA button.
You can design your form by setting the width of it, you can hide or show the label, customize the placeholder text, the header, and the subheader too.
Use your own brand color on your CTA button. Although’ your “Subscribe” or “Download” button should grab the attention of your visitors but still, if it doesn’t fit your website’s color scheme, it will look very bad. Using the right colors will help you build a seamless experience for your visitors.
On the Actions tab you can customize your welcome messages: add an email and a thank you page to finish the signup funnel for your newly generated leads. You can even add a link to your “thank you page” which asks the visitor to join your online community (social media profiles).
After you designed your form, click on “Insert” and copy the generated HTML code.
Step 2: Customize the created form and convert the last field to a radio button
Now that you created the HTML of the signup form, download (or use other tools) Notepad++ (it’s free).
This tool is mainly for developers but for now, we will use it too. I recommend using this tool anyway because it will delete any type of styling your copied texts have. As you probably know, getting rid of styling easily is important as in lots of cases it might ruin the styles you add later to it. And it’s especially good for handling HTML codes.
After you installed it, insert the generated HTML form into notepad++. It looks nice, isn’t it? 🙂
Now open a new page in notepad++, copy and paste the HTML code below (or search for radio button HTML on W3School).
<input type="radio" name="Gender" value="female"> Female<br> <input type="radio" name="Gender" value="male"> Male<br> <input type="radio" name="Gender" value="other"> Other
As you probably know, these are the HTML codes of the “Female”, “Male” and “Other” radio buttons.
You can easily customize it. If you modify the values after the “value=” part, you will change values the form sends to your email software. By customizing the labels that will be seen by your visitors on your site you can show different types of things to your visitors.
So if you want to add positions related values, e.g. CMO, CEO, CTO, other, your code will look like this:
<input type="radio" name="Position" value="CMO">CMO<br> <input type="radio" name="Position" value="CEO">CEO<br> <input type="radio" name="Position" value="CTO"> CTO<br> <input type="radio" name="Position" value="other"> Other
The <br> means “next line” in the code. It pushes the next radio button below the actual one.
Now search in the original HTML form source code for “Gender” in the other notepad++ window (or any type of custom field you would like to convert to Radio Button and you created previously).
You will find it in the third <div> section (if you want to convert that last input field into the radio button).
Hit enter and paste the radio button code into the new line:
This is how it will look like after you insert the code:
Now change the name=”Gender” (or any custom field you use) part in the inserted lines of code to the original, generated HTML code part.
In our actual example, it is “name=”fields” but it will always be different and unique to the form you create.
This is where you can find it (right after the “<input class=”automizy-form-input” name=” code):
And this is how it looks after you changed every name=”Gender” with the actual custom field code:
Now delete the row before the inserted lines of code:
After you deleted the line, you are finished!
Just Copy the code and insert it into the section of your web page you prefer and you will see the signup form there with radio buttons!
Just a hint: you can check and test your brand new form without inserting it into your own webpage. In the NotePad++ click “Save as” and add a .html file extension to the name of your HTML when you name it.
Go where you saved the code on your computer and double-click on it. It will open the HTML form in your browser so you will see how it looks and modify the source code if whenever you want.
In Automizy, you will see people getting values as a custom field from the form, because you tricked it: it thinks the person who just clicked on one of the radio buttons typed it in the placeholder.
Get started with segmentation and personalization! Check out our FREE email course. 😉