5 Modern Form Fields Your Survey Needs

5 Modern Form Fields Your Survey Needs

This post was contributed by Nishant Agrawal of FormCrafts.

One of the easiest ways to figure out how to improve your product is to ask your customers what they want. While surveys are an amazing way to get actionable feedback, they also show you care about your customers and are actively looking for ways to improve.

Web forms have come a long way since they were first introduced as a part of the HTML specifications. The earliest use of forms was largely limited to contact forms and gathering structured data. While websites have evolved in their user experience to keep pace with the modern web, forms are still lacking. This is especially true for survey form fields.

What makes a good survey form? Three concepts:

  1. Well-thought-out questions
  2. Good user interface
  3. Ease of use

Questions are subjective and depend on the survey creator, but the other two elements (user interface and ease of use) largely rely on the survey tool. People are less likely to fill out surveys that look daunting or complicated.

A bad user experience is not an excuse anymore. More than 98% of internet users access the web with a modern browser, meaning forms can benefit from newer techniques.

Let’s look at five modern form fields or question types that you can use in your survey forms to increase your conversions.

1. Searchable Dropdown Field With Images

A dropdown field allows your users to click on a dropdown menu and choose one option from a list. Traditionally, this method is very limited since it doesn’t allow users to search options, edit the appearance of lists, add images, or even allow more than one selection. Dropdown fields that contain long lists (like countries) are particularly difficult to use.

Modern web techniques and a handful of form builders allow you to supercharge your dropdown fields, allowing you to create better survey forms.


  • You can create a dropdown list asking users for their favorite donut flavors. You can let them choose more than one option and accompany each donut flavor with an image.
  • You can create a dropdown list of countries with their flags and ask users their top 3 picks for their next vacation. Without a multi-select dropdown field, you would have to create 3 regular dropdown fields and label them Select Country 1, Select Country 2, and Select Country 3.

searchable dropdown survey form fields

2. Checkbox Field With Images

A checkbox field works like a dropdown in the sense that it allows users to select from a list. However, with the checkbox field, the options are visible without having to click on the field and the user can select multiple options.

There is also a sister field called radios which allows users to select only one option from a list. The downside to radios is that a user cannot uncheck an option and would have to refresh the page.

Until recently, browsers did not offer support for altering the appearance of this field. This issue led to an inconsistent user interface since checkboxes looked different on every device. It also prevented brands from having a consistent color and design philosophy on their forms.

Some modern form builders allow you to edit the appearance of the checkbox, alter the color, animate it, add a border around selections, add images for each option, and limit the minimum and maximum number of selections.


  • A checkbox field asking users their favorite donut flavors. Each option is a flavor with an image.
  • A checkbox field asking users the type of mobile device they use. You can use options like iPhone, Android, Windows Phone, and Other. You also can accompany each option with an image.

checkbox survey form fields

3. Smiley Rating Field

A smiley form field doesn’t exist in the HTML specification. However, one can emulate a smiley field using a checkbox field as the base, hiding the checkmark, and using images or emojis for the smileys.

The use of emojis is on the rise and gives people an amazing and real way to express how people feel. While it is possible to use emojis for smiley fields they look inconsistent across browsers and are usually not animated.

Coding a smiley field from scratch is a big task. Plus, not all form builders support smiley fields. However, new form builders make it possible to have a smiley rating field with custom animations, different mood colors, and custom labels.

smiley rating survey form fields

What do you think? Would you rather tap on the above face(s), or a checkbox with a number to show how you feel?

4. Showcase Field

Showcase field also is not a native HTML field. It came about with the advent of sliders. However, sliders are cumbersome and aren’t typically used in forms.

Your brain processes images a lot faster than text, in as little as 13 milliseconds. People are more likely to interact with images than text.

Why use a showcase field? Sometimes you want the image or product to be the center of attention. A showcase field is like a carousel field that allows your users to select an option, based primarily on images.

A showcase field works well for online shops, design elements, and UX surveys since their main purpose is to let users pick from different visuals. A good showcase field would work well on mobile devices, allowing users to swipe, and is adaptive to different image dimensions.


  • A field that lets users select their favorite typeface. Each option has an image of the typeface in action.
  • A UX survey that allows users to select their favorite design among a list of possibilities.

showcase survey form fields

5. Tabular Input Field

A tabular input field is like a collection of fields. Think of it as having a mini embeddable spreadsheet in your form. The advantage of a tabular input field over regular fields is that users can add an indefinite number of rows. You also can limit the minimum and maximum number of rows allowed.

A tabular field isn’t a part of the HTML specification and usually relies on a collection of input fields or other field types. Unlike an option-based field, a tabular field allows users to give text-based feedback via your survey form.

Here’s a tabular input field in action:

tabular input survey form fields

How to Use These Fields in Your Forms?

The difficult way to create a web form is to use HTML and CSS and then use a backend language, like PHP, to process forms. You can’t make changes or add new forms without having to rely on coding each time.

However, there are many form builders in the market that take away the heavy lifting for you with a drag-and-drop interface to create forms.

These form builders also integrate with customer experience automation platforms like ActiveCampaign, so you can turn your survey responders into new email subscribers, without writing a single line of code.

You can even map your survey fields to add tags to your subscribers. For example, you can map the donut flavor field to contact tags in ActiveCampaign. When World Chocolate Day comes, guess who’s getting an email?

Upgrade Your Survey Forms

While the number of form fields available natively is limited, modern web development techniques have made new options possible.

A well-designed form that uses modern question types creates a positive association in the user’s mind about your brand and increases the conversion rate.

You can view a live survey and feedback form here.

Never miss an update