Trends

8 Tips for Creating Fun and Functional Forms That Don’t Fail Visitors

Create well-designed forms that are intuitive for your site visitors, with these 8 tips.

You’ll be hard-pressed to find a website that doesn’t feature some kind of form. Whether it’s to help visitors get in touch, download an offer, subscribe to your site, or simply log in, forms play an essential role in how we share and retrieve information online.

Creating an effective form involves more than just displaying a few fields and adding a “Submit” button underneath. Forms should be user-friendly and help users towards completing the form quickly and easily without feeling like they’re in boring paperwork. Badly designed forms that are long and confusing can be frustrating for users and result in them abandoning your site.

To help you create well-designed forms that are intuitive for your site visitors, here are 8 tips to keep in mind.

Don’t Ask Too Many Questions

Only ask for the details you actually need. Most people don’t have the patience to complete long exhaustive forms. They will only get annoyed if they feel you are asking for unnecessary information.

The main objective of your form is to collect enough information to get a conversation started – you can collect any extra information you need after the user has made first contact.

For example, do you really need to know someone’s phone number when they are seeking a quote for your services? If you work locally with clients in your city, by all means, ask. But, if you’ll be corresponding by email then there’s no point making your form longer than it needs to be.

Where possible, it’s also helpful to show the user how far along they are in completing your form using a progress bar. Or use asterisks to show which questions are required and which ones aren’t so users can skip the fields they don’t want to fill in.

One of my favorite examples of a site that sticks to asking information that’s absolutely necessary is Emporium Pies. Not only does the ordering page only ask users for information needed to order pies online, but it does so in a visual way that makes it fun to complete.

Emporium Pies’ online order form is fun and functional.

Include Useful Error Messages

If a user fills out your form incorrectly – i.e. misses a field or enters their name in the email field – it’s important to display helpful error messages that clearly explain where they went wrong or what information they’re missing.

If possible, offer feedback in real-time, such as highlighting fields the user hasn’t filled in, so the user can correct their mistake before they hit the “Submit” button.

Healthcare provider Oscar does a great job of helping new customers in real-time as they fill in their quote form. The form asks for one piece of information at a time so as not to overwhelm users. And when you fail to fill in your details properly, an error message is displayed underneath that briefly conveys what you need to do to proceed.

Health insurer Oscar’s website features a very modern and user-friendly quote form.

Display Trust Signals

Nowadays, people are more reluctant than ever to share their personal information online, mostly due to spam but also because hackers target people’s sensitive information.

To address this, ensure your form is well-designed and professional – you want to make sure it looks legit. It’s also useful to include a link to your privacy policy and display the logos of any security organizations you are affiliated with, such as Norton. These elements will help make users feel more comfortable sharing their private information with you and instill confidence in your website.

Offer Autofill

Nobody likes filling out paperwork. It’s boring, and even more so when you have to do it over and over again, as you tend to do when shopping online. To help increase the likelihood of users completing your form – and hitting reaching the checkout part of your store, if you have one – save user information in form fields using cookies so the next time they visit their information will be pre-populated in form fields, saving them a bunch of time.

Don’t Use the Word “Submit”

Using the word “submit” isn’t really appropriate in the context of online forms. While it describes what the system does, it’s not helpful for users. Instead, try “Send,” “Join Our Newsletter,” or “Sign Up.”

Use words that are meaningful and describe the action you want the user to carry out. Using great copy delights users and encourages them to complete your form. So, avoid technical language or system words that mean more to computers and developers than regular users.

Check out how Cornflower Creamery’s newsletter subscription form asks users to “subscribe”, not “submit” or “send”. The button’s language tells users they are subscribing to a newsletter so there’s no confusion about how the user’s email will be used.

Cornflower Creamery’s newsletter subscription form is short and sweet.

Fulfill Offers Immediately

If a user has filled in a pop-up or other type of form on your site promising an incentive, the moment they enter their information and hit “send” (or whatever other language you choose to use), the incentive should be already on its way to their inbox. Alternatively, you might choose to display a download link on a thank you page that loads after the user clicks “send.”

The idea here is that you want to provide immediate gratification for the user. Nowadays, no one likes to wait, and there’s really no reason why anyone should have to wait for a downloadable file online (unless you’re drip feeding content as part of a campaign. But, that’s an article for another day).

Use Responsive Design

With so many people viewing websites on mobile phones these days, it’s crucial your form looks and functions well across the full range of devices, from smartphones to desktop. This is easier said than done, however, especially for complex forms such as eCommerce checkouts.

Ensuring your forms are responsive yet user-friendly can be a tough task. But, it’s an important one you should tackle. So, whenever you’re creating a new form, consider how it will be displayed on different devices from the outset.

For example, a pop-up newsletter subscription form might include some graphical elements, text and an email field for desktop users, but on mobile might just include some brief text and the email field.

Likewise, you could split a checkout form into multiple pages for mobile users so they don’t have to scroll forever to buy an item from your store.

Shopify uses a very simple design for its sign up form. When you enter your email address on the homepage to get started creating a new store, a modal immediately displays that asks for more details. The below image is what it looks like on an iPhone 8, and on desktop it looks pretty much the same, just with wider text fields. 

Shopify uses a basic design to capture new user details so you can get started creating a new store quickly.

Take the Time to Say “Thank You”

Taking the time to say “thank you” to users who fill in your forms is not only a nice thing to do but informs the user that they have successfully completed your form without error.

For example, have you ever filled in a contact form and hit “Send” only for the page to reload without any confirmation that the message actually sent as if your message has simply disappeared into thin air? It’s a confusing and frustrating.

Ensure your forms either display some kind of confirmation message or redirect to a “thank you” page upon completion that tells them what the next steps are.

Even better, you could personalize the confirmation message using the information provided in the form, i.e. “Thanks for subscribing, Robert! You’ll receive our next awesome newsletter in your inbox tomorrow.”

Bonus: Useful Plugins for Creating Forms

Below, I’ve put together a collection of some of the best-selling form building plugins you’ll find in our plugin marketplace.

With more than 20,000 downloads and an average 4.75-star rating, QuForm is the most popular form building plugin in our marketplace. It offers a stack of features including drag and drop, live preview, complex form layouts, 11 themes, on-submit conditions and conditional logic.

FormCraft is another popular plugin with 13,000+ downloads. Like QuForm, it offers drag and drop and features an intuitive and easy-to-use interface for creating forms. There are lots of useful add-ons for newsletters and other form functions, such as MailChimp and Recaptcha. It also features advanced logic, math formulas and responsive design.

eForm is a great multipurpose form solution that enables you to create any kind of form, from surveys and checkouts to quizzes and subscription forms. There are lots of themes (including 38+ inspired by Material Design). If you get stuck trying to build a form, there are demos, tutorials and support available to help you out.

This feature-packed plugin offers everything you need to create advanced forms including conditional logic, cost estimation, interactive forms, multi-step forms, pop-ups, responsive design, anti-spam protection, autoresponder and AJAX. There’s so much more but I’d be here all day writing it out. So instead, click through to the plugin page and check out the live preview.

Conclusion

I hope these tips have inspired you to create fun and functional forms of your own. With a little inspiration and using plugins from our marketplace, you can easily build forms for your site that encourage users to share their information with you, whether it’s their email or payment details for your online store.

Don’t forget to test your forms regularly to ensure they’re working. Just the other day I heard a client horror story about a site owner who set up a new website but didn’t check her contact form actually worked. Potential clients tried to get in touch with her but her form did nothing when people clicked “Send.”

If you liked that, you'll love this


Jenni McKinnon

About the Author Jenni McKinnon

A long-time web developer, writer, consultant and WordPress instructor, Jenni McKinnon is a Co-Founder at Words By Birds, a copywriting agency for busy web businesses. A WordPress nerd, she names her test sites after references from The Simpsons.