Don’t know much HTML or CSS but want to create inline radio buttons in your WordPress form? Look no further. Ninja Forms has an easy way to help you accomplish that and much more.
In today’s article, you’ll learn how to create inline radio buttons in WordPress, and as a bonus, we’ll show you how to change the color of inline radio buttons. Believe it or not, you’ll realize adjusting your form’s look and feel has never been easier when using our Layout & Styles add-on. Ready to dive? Let’s go!
How to create inline radio buttons in WordPress for free
If you want to create inline radio buttons (radio list field) in your forms, you don’t need to edit your style sheet in your WordPress theme or write complicated CSS rules. Forget what you’ve just read. All you need is the Ninja Forms free core plugin and a little trick we have for you.
Step 1: Add the Radio List field to your form
First, add a Radio List field to your WordPress form. You can add as many options as you like but please remember, the more options you’ll add to your list, this will alter the responsive design of your inline buttons, especially when displaying on a mobile device. (It will also depends on your WordPress theme)
In our example, we created four options in our Radio List field.
Step 2: Add a Helper Class under the Display section of your Radio list field
As scary as this sounds, this is a very easy and quick step. Just head over to the Display section of your Radio list field and see the section Custom Class Names Container.
Now if you want to create inline radio buttons on your form, and display all these four options in four columns, you’ll add to your container four-col-list. Once you add it, this is how your Radio list field will show on your WordPress form:
If you would like your Radio buttons or other list field such as the Checkbox field neatly formatted into columns, you would follow the rule below:
- two-col-list
- three-col-list
- four-col-list
- five-col-list
- six-col-list
Please note, if you don’t see the Custom Class Names setting, please navigate within your site to Ninja Forms > Settings > Advanced Settings and enable the checkbox for “Form Builder Dev Mode”. This will allow advanced options to appear within your form.
That’s it, short and sweet. Now you know how to create inline radio buttons in your WordPress forms!
Change the color of the inline radio buttons in your form
We will be changing the Border color of the circle selection, so what you want to scroll down to, is the section called Element Styles and pick the Border color you want from the color picker shown below.
All you need to do is click on Select Color and pick the color you want. If you have your hex color code, just paste it here, click done, and that’s it.
Want to explore the possibilities of customizing your WordPress forms further, check our excellent blog post on How to Style Your WordPress Forms.
This in-depth guide is packed with a great amount of information that should leave you inspired and ready to turn your form into a beautiful and powerful WordPress tool to generate those leads!
Create inline radio buttons in WordPress and much more using Layout & Styles add-on!
Woohoo! How easy is it to create inline radio buttons in WordPress, right? It also takes minimum effort to change the styling of your forms with our Layout & Styles add-on. You can go wild with customizing your forms and do things such as:
- Change the layout of your WordPress forms (rows & columns)
- Style Submit button in WordPress
- Font styling (font size, font family, text color, font in email action)
- Apply style across all your forms & much more!
And if you dare, with little CSS knowledge, you can feel the full power of our styling plugin and do cool things such as making a gradient submit button, adding a radius border to your CTA button or form fields, and more. The possibilities are almost endless.
Intrigued? Unlike our competitors, we offer all existing add-ons including the Layout & Styles add-on individually, without signing up for a membership. Plus, the Ninja Forms core plugin is free, and we offer a 14-day money-back guarantee for all our products. Give it a go and become a designer on your own without any coding experience!
