Guide to the best Feedback form design in web apps with examples

Published in

UX Planet

6 min readAug 20, 2021

Feedback forms are a very wide-used format by websites to gather feedback. Let’s take a look into what constructs a clear, friendly, and pleasant feedback experience, with examples.

Whether you are a housing rental service, an online shoe store or a lawyer, disciplines from varied sectors are attracting more and more business from the net world. This makes the landing page an extremely important portal to handle visitors, convert them into users, and eventually paying customers. How do you measure the effectiveness of your landing page? Next to having actual data on your demographic, is to use a feedback form.

We’ve all seen them, attaching to the bottom of the screen, or a popup catches us by surprise asking for our input to improve the website experience. Now as a user, there are times when these things are perceived as nothing more than an extra lick, but as a designer, these small forms can go a long very in offering guidance and inspiration for future work.

Basis of designing

So let’s say you are in need of a solid feedback form design, where do you start? Here are some basics ideas to base from:

Always have a clear goal

The only thing worse than having to fill out a form is having to fill out a vague one. You are already on borrowed time when distracting your visitors from what they came onto your side to do.

So before you start designing your form, understand what is the purpose of your form, what are the most important questions you want answers to. This info will help you design a more structured form with clear priorities.

Decide how many answers you need to collect

When you have a feedback form, you are in essence breaking a pre-designed journey of a website.

This might cost you some conversion. While we can and will do all in our power to minimize the damage, set a goal of the number of answers, and in time, take down your feedback form to ensure the best experience of your website.

Decide how many questions you want/ need to add in

Some would say this belongs to the design stage. But there are some clear advantages in having It decided beforehand.

For one, if gives you an understanding of how long/ short your forms will end up becoming. The more questions the more screen real-estate your forms will take up, and of course more time it’ll require from users to fill in. These are crucial information to get a grip on before you start designing.

Tips on how to design a feedback form

With those three points laid down as a foundation, let’s dive into examples of different feedback forms and tips on how to design them well.

Tip 1: Always have a good title

This one is quite often overlooked, whenever a feedback form is created it’s usually labeled as “feedback form” or “feedback from of…”. Now there’s nothing wrong with this approach, only that it could appear a little rigid and doesn’t spark an interest. Instead of calling it by its name, a better approach can be “Share your opinions with us!” or “We are here to improve your experience!”.

Tip 2: Design your questions to be easy to understand and relevant

In the example shown here, this question is asking about the most preferred example material from users. This intention is clear but the question can be better cared out.

- Firstly, the options are not clearly labeled. This can cause uncertainties. The second option seems quite doubtful, and there’s no way for users to find out which material that is.

- Secondly, the logical connection between the image shown and the choices given is not obvious enough. Users would have to fill in the connection themselves, the vertical alignment namely.

- Thirdly, there is a lack of context from the question. for example on which surfaces are these materials applied onto? This is key information for users to decide on their preferences, without it, it would be very difficult to decide on the effectiveness of the answers collected.

This is an example of another form that could be improved. What we are seeing here is a series of open questions.

Open questions are tricky, we cannot assume our users have endless time and boundless enthusiasm to compose meaningful and structured responses which can guide our next breakthrough. We must be attentive to their time and effort reserved for our feedback form, see them as a very limited resource that they are. So when it comes to open questions, use them with caution.

“We cannot assume our users have endless time and boundless enthusiasm to compose meaningful and structured responses which can guide our next breakthrough”

Tip 3: have friendly interfaces

Your feedback form can be seen as a mini-program attached to your website. The more simple, engaging the interface looks, the more likely users will be going through with it.

In this example, we are looking at quite some questions put inside one chart. This might be a more efficient way to use limited screen space but it also immediately sends an intimidating vibe to users. It simply looks too much, too many questions, too much text.

If it’s really necessary to include this number of questions, then consider breaking them down into different parts to lessen to the visual impact of a conglomerate of text and choices. Like in this example. With spacing, the questions look less intimidating and a simple but clear color scheme makes it much more engaging.

Tip 4: Give it a nice look!

Granted, whenever something looks better we tend to like it more. That’s just another fact to be faced. So a visually pleasant design of a form can carry you a long way, making the difference between 100 answers to 1000. This makes the look & feel an important part of your form’s design.

Here’s an example of a well-designed feedback form.

As a user, the first impression I have is it’s very short. I know it won’t cost me the time I didn’t reserve. Then I see a variety of questions, that adds elements of fun in the filling out process. The questions are short and very easy to understand and don’t require deciphering, and there’s just one open question where I really need to type something on my keyboard, doable!

But! Most of all, what a nice feeling it brings! The pink and blue with relaxed illustration makes me feel I’m participating in something well thought of, my experience with this form now has a vibe of relaxation and friendliness. More to gain!

A great tool to create your feedback forms experience is Mockplus. As a design tool, Mockplus has quite a comprehensive set of pre-made interaction component like the star rating question, drop lists, checkboxes etc. Draw up a feedback form like shown in this image with full interaction takes a few minutes, and the best part is you can already send this interactive model to users for testing.

In conclusion:

Feedback forms are widely accepted by users and an effective tool to get feedbacks. A well-designed form not only shows your care to detail but also presents your company as a user-centered one. Your form helps you embrace your visitors and give them importance.