{"id":4210,"date":"2015-12-05T14:40:36","date_gmt":"2015-12-05T12:40:36","guid":{"rendered":"https:\/\/usersnap.com\/?p=4210"},"modified":"2025-07-30T14:50:05","modified_gmt":"2025-07-30T12:50:05","slug":"designing-web-forms-examples","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/designing-web-forms-examples\/","title":{"rendered":"Designing forms for your website: The good, the bad and the ugly of web forms."},"content":{"rendered":"\n

Building a web page or web app takes a lot of time, resources and patience. I get that. And because of these reasons, the little things get overlooked.<\/p>\n\n\n\n

When building a new website or application, you probably count your website form as one of those little things.<\/p>\n\n\n\n

But it really shouldn\u2019t be overlooked, this little thing.<\/p>\n\n\n\n

That is why I\u2019m going to talk about the UI mystery of web forms<\/strong> and how you can build an awesome form<\/a> for your website yourself.<\/p>\n\n\n\n\n\n\n

Try Usersnap for Your Design Project<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

What is a web form?<\/h2>\n\n\n\n

Before we take a look at the UI of great and bad forms, we need to come up with a common understanding of what a website form is.<\/p>\n\n\n\n

According to Wikipedia<\/a>, a form – or web form – can be defined as the following:<\/p>\n\n\n\n

\n

A webform […] allows a user to enter data that is sent to a server for processing.<\/strong><\/p>\n<\/blockquote>\n\n\n\n

Or as W3C<\/a> would describe it:<\/p>\n\n\n\n

\n

The form element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.<\/strong><\/p>\n<\/blockquote>\n\n\n\n

Forms can therefore have various options and fields. A form can used for entering payment data, or it can be used to search for a keyword on a search engine.<\/p>\n\n\n

\n
\"google<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

To sum it up, web forms are a useful tool for tracking certain information from your website visitors.
And they are probably the most important element on your website when it comes to achieving your business goals.<\/p>\n\n\n\n

Modern elements of web forms<\/h2>\n\n\n\n

Typically, forms are made up of all kinds of different input fields. Nowadays, the following form elements are quite common in a website form.<\/p>\n\n\n

\n
\"elements<\/figure>\n<\/div>\n\n\n


and many more<\/a>.<\/p>\n\n\n\n

As seen in the example below, we\u2019re making use of radio buttons in order to let our website visitor choose the preferred pizza size:<\/p>\n\n\n\n

<form><\/span>\n <p><label>Customer name: <input><\/label><\/p><\/span>\n <fieldset><\/span>\n  <legend> Pizza Size <\/legend><\/span>\n  <p><label> <input type=radio name=size> Small <\/label><\/p><\/span>\n  <p><label> <input type=radio name=size> Medium <\/label><\/p><\/span>\n  <p><label> <input type=radio name=size> Large <\/label><\/p><\/span>\n <\/fieldset><\/span>\n<\/form><\/span><\/pre>\n\n\n\n
What\u2019s the design goal?<\/h2>\n\n\n\n
Websites always have a purpose. This purpose could be something as simple as to inform people about something.<\/p>\n\n\n\n
Or entertain them. It could also be that the purpose is something more direct and the website wants you to buy something or even actively help you achieve something.<\/p>\n\n\n\n
For many businesses, the website becomes a sales funnel<\/a>. And the contact form might be your call to action.<\/p>\n\n\n\n
The current state of web forms and how to design them.<\/h2>\n\n\n\n
If you\u2019ve ever looked into it, you\u2019d already know.<\/p>\n\n\n\n
The differences between a great form and a bad one can be almost too subtle to notice or even be completely counterintuitive.<\/p>\n\n\n\n
The color of a button, the placement of the form, you name it, everything seems to have an impact on a form\u2019s performance. It\u2019s hard to give specific guidelines on designing web forms since there\u2019s no one true solution. But there are some best practices that give you a great idea of where to start.<\/p>\n\n\n
\n
\"example<\/figure>\n<\/div>\n\n\n

(login form on invisionapp.com)<\/p>\n\n\n
\n
\"typeform<\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
(sign up form on typeform.com)<\/p>\n\n\n\n
<\/p>\n\n\n
Try Usersnap for Your Design Project<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n
Place the form somewhere relevant<\/h2>\n\n\n\n
When talking about great form designs we have to consider the user story<\/a>. Forms can be bad not because of design or copy, but because of where you place them.<\/p>\n\n\n\n
Your subscription form should be placed near the part that tells them about what to expect. It\u2019s all about flow, and your form\u2019s placement is key to converting your users and keeping them in that flow.<\/p>\n\n\n
\n
\"change<\/figure>\n<\/div>\n\n\n
Some examples of bad forms can be found on badforms.com<\/a>:
<\/p>\n\n\n\n
Contrast is your friend<\/h2>\n\n\n\n
Once you\u2019ve guided your audience to the form, make sure that it stands out on its own.<\/p>\n\n\n
\n
\"web<\/figure>\n<\/div>\n\n\n
Your users should know something\u2019s expected from them just from the look of the form. Use colors to your advantage to make it stand out. Contrast is your friend.
<\/p>\n\n\n\n
(source: http:\/\/badforms.com\/labels-inside-fields\/<\/a>)<\/p>\n\n\n\n
Copy has a style as well<\/h2>\n\n\n\n
Text should stand out and be readable.<\/p>\n\n\n\n
The styling should be consistent and well thought-out. Most importantly, the position of the text and how it\u2019s represented can make a huge difference to your conversion rate.<\/p>\n\n\n\n
Content is king<\/h2>\n\n\n\n
You\u2019ll probably be telling people all about your product or service. While the design part of the web form has a big impact on making it stick out and making it \u201cfeel\u201d relevant, the copy actually makes it remarkable and is what convinces people to click through after they\u2019ve had that first glance.<\/p>\n\n\n\n
Now, copy goes beyond just the words and here too, styling makes a difference.<\/p>\n\n\n\n
Simple things like font colors and background colors can make or break a form.<\/p>\n\n\n\n
But even font sizes, copy placement and other seemingly small elements can have a tremendous impact on the performance of the form.<\/p>\n\n\n\n
When you know that, there are also couple of things you should think about when you\u2019re designing web forms which are really only due to the content, not the styling.<\/p>\n\n\n\n