How to design, test and launch custom forms to increase conversion? - Tips for UX designers

Creating Custom Forms in Figma

Forms have taken a special place in the digital environment in the past decade. As a user, you might have noticed that you are now filling out more and more various forms. Companies from basically any industry use forms to manage customer support, receive product requests, test new features, collect feedback and of course use them to collect leads.

However, whether you are a private user or a company, you probably hate forms. Customers don't like wasting time on filling in countless fields, whereas businesses fear a huge drop-off rate at this exact stage. Yet, the reality is that forms are not really avoidable nowadays.

Forms can improve customer experience

So, what you need to do, is to make sure that you will increase customer experience from a design perspective. Because it does work! Furthermore, not only does it work, but it can also serve to your advantage. And although you might think that creating forms is a boring "monkey" job, there are actually lots of UX opportunities in creating and optimising forms.

In this article we'll be talking about creating forms from A to Z. We will also cover why Google Forms is not always the best choice and which tools to use to build forms. Finally, we'll  give you some tips on the user experience aspects of form design and address the specifics of building forms in Figma. Last but not least, we'll show you a trick to test and launch fully customised forms in a few simple steps.

Why customised forms are better than Google Forms?

Perhaps one of the first tools that springs to mind when you think of building forms is Google Forms.

Building a form in Google Workspace is really simple and intuitive. Its plain interface allows you to focus on the quality of the content without any time-consuming clutter.

Essentially, Google Forms lets you choose a question type including multiple choice and simple dropdown. It also allows integration of images and YouTube videos into the form and supports conditional logic. In addition, it is a totally free service which makes using Google Forms even more convenient.

Nonetheless, there are quite a few limitations. First of all, and perhaps most importantly, customisation in Google forms is extremely limited. As you know, it's all about visual design and user experience today, and lacking in either one can seriously discourage your prospect from filling out a form.

It's true that sometimes Google forms can be life saving but the lack of a professional touch in design and top notch features make it less usable for businesses.

On the other hand, there are custom forms that deliver a totally different level of user experience. It feels better when you fill out a non-standard looking form that was not designed in a few seconds. Apart from prettiness, custom forms are also much more flexible in terms of content and functionalities.

Form Building Software: best tools to build forms

Form building software enables users to create fillable forms for surveys, feedback, lead capturing and more by using a drag-and-drop interface. We would say that software in the form building category are the next step towards customisation after more generic ones like Google Forms.

Later, we'll talk about other options to design super custom forms that the tools below will not allow you to do.

Typeform

People typically associate Typeform with elegant forms. Its design and interface look stylish and sophisticated. With Typeform you can create a large variety of forms, such as order, feedback, application, request, evaluation forms and more without a single line of code.

Depending on your goal, you can use a pre-designed template (there's a bunch of them available), or you can also start from scratch and build whatever you want on your own.

What we like about this tool is its ability to handle survey logic branching. Furthermore, Typeform also supports multi-branching logic jumps. This is a truly cool feature, as it allows you to redirect your respondents from the form to a follow-up page based on their selected answers.

Forms created in Typeform are also quite versatile, as they they can be deployed on many different platforms. Another great feature is its built-in analytics tool,  which not many competitors offer.

Speaking of the drawbacks, a common complaint among users is that many features are only available in Typeform’s paid version. Hence, the price is often a discouraging factor and many people end up turning to Google Forms even though it is not their top choice.

And another thing — Typeform has a specific universal style of forms. So, if you want more customisation than that, you might need to consider learning some design skills and creating your forms in a different tool.

JotForm

Jotform has thousands of form templates and plenty of widgets to offer, accompanied by over a hundred of app integrations. The latter is probably Jotform's biggest strength, as the large number of integrations makes it really powerful in the form building arena. For example, unlike Jotform, its rival Typeform doesn't directly integrate with PayPal.

This tool is perfect for someone who has very little design skills or is not particularly tech savvy. Its numerous templates and remarkably user-friendly interface allow you to easily create impressive forms.

Building a form is a basic process that only involves dragging and dropping the desired functionality you want your form to have. Of course, you can also start with a blank template and create a form from zero. In addition, the tool enables offline response collection which we find really cool.

Although Jotform doesn't require much extra learning and offers a heap of templates, for some users it does not provide enough customisation with regards to form design (and that's why we suggest you to look at our next section about design software)

It also lacks data analysis tool and can get quite complex in use once you start using more and more advanced features.

Paperform

Paperform stands out among other tools in the form building software market. It offers all the same features that its competitors do but aims for improving the quality of these features to maximise customer experience.

This form building tool provides 650+ pre-built form templates for various categories which are somewhat more unique than the ones of competitors.

Paperform is proud to have one of the strongest UIs out there. The interface seems intuitive and makes it really easy to switch between different stages of the workflow. The tool also claims to offer a higher degree of customisation than its competitors.

When it comes to questions, there are 25+ supported different fields.

Although Paperform's integrations might be slightly more limited than the ones in Jotform, it does outperform Typeform’s integrations. For example, whereas Typeform integrates only with one payment system (Stripe), Paperform integrates with over 80 payment processors like Stripe, PayPal Business, Square, and Braintree.

Paperform is considerably cheaper than other form builders but basically has the same or sometimes even better functionality. In addition, the tool has built-in data analytics. This feature gives you deeper insights into the behaviour of your customers, visitors, prospects, and of course form respondents.

Judging by the feedback from its users, there is not much you can criticise Paperform for. Nevertheless, as it applies to all form building software, it's impossible to reach full customisation with Paperform either.

Design software: tools to achieve full customisation for your form

designing a customised form

Many of our readers build forms more often than just setting up a subscription form once a year, or collecting user feedback once per quarter. Therefore, they might need to be able to design a fully tailored form.

At some point, the line between designing a form and designing a product starts to blur. You can't even call your form a form anymore due to its complexity and a very high level of customisation. Sounds familiar?

In this case, form builders like Typeform will not serve the purpose. Instead, a design tool will come in handy.

Figma

UX design teams working in insurance, banking and many other "form-demanding" industries actually extensively use Figma for building forms.

As a UX designer you’ll typically already be familiar with tools like Figma. Moreover, you’ll also have quite some design assets residing in your favourite design tools and will be hesitant to use external tools for specific purposes (like building forms for example).

Figma is loved by designers for its responsive feature, the fact that designs can be used on different screen sizes and much more. Creating forms in Figma is not hard if you're generally familiar with this design tool.

Technically, there is no built-in form design feature in Figma. However, Figma gives you total freedom to design whatever you want. You can build an incredibly customised form by adding fields manually and not being restricted by question types or anything else.

And luckily, there is such a thing as Figma community, where you can get a copy of Form Builder Components.

With this free set of form builder components, it is much easier to create any kind of forms in Figma. The file includes input, select list, text area, checkboxes, radios and switches. Thanks to the Auto Layout feature that the author used upon creating this magic file, Figma will automatically adjust the width and height of the components used in your design.

It is not currently possible to launch a form in Figma, but it is quite simple to do so using a third-party plugin. There are several plugins available for this purpose. We'll tell you in detail how to test and set your form in one of the next sections.

Justinmind

Justinmind is an interesting tool. In principle, it is a prototyping software that lets you create high-fidelity designs. At the same time, it is also a competitor to Figma, as it forces you to create your design in Justinmind itself and later apply all the advanced prototyping features.

It is also possible to design forms in Justinmind. What's great about this tool, that after designing a form, you can test your prototype. To create a form in Justinmind, you'll need to use widgets. These widgets include input text fields, checkboxes, radio buttons, select lists, and more. The platform also offers you their pre-made forms which you may upload to a widgets palette.

By creating interactive forms in your prototypes you can simulate user input experiences, such as registration, login, and search forms.

Yet, there is also one considerable disadvantage. Justinmind doesn't collect or analyse responses. Therefore, it is a great tool for testing usability of the form and building a very customised one, but it doesn't allow you to actually launch it.

Sketch

Basically, building forms in Sketch is the same as doing it in Figma. It all comes down to what tool you as a designer prefer and are used to. Although there is no specific form design feature in Sketch either, you get lots of flexibility to build any type of form the way you see it.

Sketch and Figma have almost identical features, yet there are some distinctions that for us at weave.ly make Figma superior. For instance, Figma is much stronger for the construction of a Design System, and its newly introduced components properties are really powerful.

One of the biggest downsides of Sketch for us is that it doesn't have auto layout. This means that if you're working on a complex design, you have to manually resize all elements, or use an external plugin. Also, bear in mind that Sketch is designed exclusively for Mac users. It is not possible to install this tool on a Windows computer, nor is there a web browser version of Sketch.

Here you can find a tutorial on how to design a simple form in Sketch. While this example is quite basic, remember there is a big room for creating a truly customised form.

Form design: Best Practices that optimise conversions

It's not a secret that the majority of respondents drop off because of the UX-related issues. Even if at first you're eager to submit a form, once you see countless fields, you lose any desire to do it. So, how to design a form that will be appealing to the respondents?

Here is our top 3 aspects to pay attention to when designing a form:

Form structure

Experts claim that a single question per screen increases conversion. Such an approach gives respondents a feel that it's unlikely there will be 100500 steps in a form , and they tend to continue at a much higher rate. It also reduces fatigue, especially for mobile users, as they don't need to endlessly scroll down to answer all questions on the page. And obviously, solo questions are simply easier to comprehend - our eyes prefer a larger font and bigger icons.

One- vs multiple-column form has been a subject to debate among designers for a long time. Usually, it is advised to use single-column fields, since such a layout helps respondents keep vertical momentum. However, a study by Hubspot disproves this theory. In their experiment, a multi-column form converted 22% better than a single-column one.

In our opinion, both methods can and should be used but depending on the length of your form. It's quite intuitive that if you have 15 fields, it makes more sense to split them into two different columns. But if it's a form containing 5 fields, better to stick to one column. By the way, don't forget to align the text of the fields to the left! This concerns the labels above the fields too — choose the top left corner and always outside the input field.

So yes, a one-column form is considered to be a golden standard, but there always should be a logical approach to any best practice.

Form elements

Form elements are text fields, checkboxes, radio buttons, submit buttons, etc. A good UX-friendly form has a balanced number of such elements and aims for limiting the count of buttons and fields.

When you first come up with a draft of your form, there is a high chance it contains too many fields. In reality, you can collect all must-have data in just a few fields. One of the simplest examples is instead of asking for the user's name and surname separately, to combine this data in one field. Also, we would recommend to stick to single-line text fields. Since they're used for short written responses, people tend to answer such questions while dropping off at the large text areas.

Minimising the need to type down the text is another aspect of a good form. Help users to fill in text by creating a dropdown menu. Try to keep it short and include a search option. Scrolling through the list of 195 existing countries on our planet is not always fun, is it?

If you have input fields where a respondent needs to type in the text, make sure to include explanations about the required input and formatting. This will save your users lots of time (and nerves ;)) For instance, you can specify the number and type of characters for the password, or attach a placeholder text demonstrating the correct format on a real example.

Selecting the right CTA button style could probably be a new form of science. Our key recommendations here would be: make the button look clickable, meaning distinguishable between other fields; apply bright contrasting colours and keep the size balanced — larger (or different shape) than other fields but small enough not to break the hierarchy of your form.

Submission process

Progress indicators! If your form is complex and takes more than two minutes to complete, visually show your users the flow of the form and indicate their completion progress. This in turn contributes to building a trustworthy relationship with the user. Also, it is advisable to inform users in advance about the average time needed to fill out the form.

Sometimes respondents drop off at the very end when they have spent time and effort on completing a form. Why? — Because they probably made a mistake while filling out one of the fields but the error message was not clear. After re-submitting the form for several times, they gave up. Hence, the clarity of error messages is vital.

Use inline errors. Indicating a problem somewhere in the top right corner is useless when a user experiences a problem with a particular field fully focusing their vision on it. An error message should appear right in or immediately below/above the input accompanied by the explanation of the problem.

How to test and launch a form designed in Figma?

Test and launch a form with the weave.ly plugin for Figma

Once you've designed a form, it's important to test it for functionality and user-friendliness. Prototyping forms may often reveal UX-related issues that you might not have thought of previously.

We really like the saying that testing your form is a way to make sure you and your users speak the same language.

When the validation is done, the next step is to launch and collect responses. If you use a form building software, launching a form is fairly easy. However, when designing your own complex custom form in a design tool, this process gets slightly more tricky. Essentially, highly customised forms will require custom software development.

Luckily, there is a solution. With the weave.ly plugin for Figma you can automatically turn your design into a working form in a few simple steps.

How does it work with weave.ly?

First, you design your custom form directly in Figma. Then, you'll just have to tag elements of your form with desired functionality using weave.ly (you don't need to leave the Figma environment for that), and determine how data flows across your form. For example, you can trigger certain interactions based on user input such as text values or selection options. After completing these steps, your form will automatically be deployed as a progressive web app that collects submissions.

You can embed it on your website or share the link with respondents directly. Weave.ly's built-in analytics tool will show you how respondents interact with your form with the help of heat maps, time-to-completion and user flows.

Weave.ly turns your Figma design into working web apps