Radio Buttons? Checkboxes? How to Choose the Correct Form Field

How to choose the correct form fieldYou’ve used forms on the web – either entering a user name and password, filling out a contact form, taking a survey, or purchasing something. Each of those fields in a form has a name and a specific function.

It helps to know the purpose of each field type when creating your own form. If you’re working on something for your site and you need to choose which form field to use, here’s what you should know. My examples discuss form fields used to add an item to a shopping cart, but can be used on any type of form.

When setting up your product options, you will be able to choose from a few different option types. Choose these carefully, as they will affect how your customer is allowed to purchase the item.

Check box:

Test it out:
Cherry
Watermelon
Raspberry

Customers can check or uncheck to add or remove an option, and they can check more than one option at a time. Check boxes would work well if the option is something additional you can add to your order, like adding an envelope when you buy a greeting card. If you use more than one check box on an item, your customer can check as many as they want. If you only want them to be able to choose one (i.e. pick one color for a hat), a check box isn’t the right solution.

Drop down:

Test it out:

With a drop down, your customer can only select one option at a time. This is good for colors and sizes, where you don’t want customers picking more than one color or one size.

Radio button:

Test it out:
Cherry
Watermelon
Raspberry

This functions in the same way as a drop down (you can only pick one), but all the options are visible on the page (whereas in the drop down, your customer has to peek in it to see what you offer). Once you’ve selected a radio button, you can choose another option, but you can’t un-select completely. So radio buttons aren’t good if it’s something optional, and instead should only be used when your customer must make a choice between options..

Text field:

Test it out:

This can be used if your customer may enter her own text, such as a name for product customization, or to give you any additional instructions.

Text area:

Test it out:

This is the same as the text field, but allows a roomier area to write more content.

Was this helpful? Let me know if you’d like more articles like this, or if there is a particular aspect of coding or adjusting a website that you’d like to have clarified.

Of interest:

Get More Traffic & Make More Sales

Grab your free PDF guide to making more money from your online shop. How to grow your traffic and improve conversion rate.

Privacy Policy

You will also get weekly business building tips. Powered by ConvertKit