Web design is not only about design, and you know it. To increase your chances to find customers, or to keep them, you need to be able to design a functional website. By functional, I am talking about one element in particular: the webflow form. All the forms present on the sites you create must work efficiently. How can you make sure of this? This guide on webflow forms and everything you need to know about them will surely help you!

🌈Survey

In your opinion, are forms mandatory or not for a website?

What a question! Of course it is!

No, they can very well be replaced by other features.

Others ? Don't hesitate to share your opinion in comments.

Contents

How to add a Webflow form?

Which elements should be set in the form?

Modification of the form

Zoom on the form elements

Configuration of success and error messages

Advice on creating forms

1. Do not overflow the field
2. Do not complicate the content
3. Don't leave potential customers in the dark
4. Do not hide anything from site visitors
5. Do not limit yourself to one form
6. Do not use multiple columns
7. Do not complicate the process
8. Do not make the texts illegible
9. Show them what to do
10. Show question labels above the fill-in fields
11. Do not abuse certain elements
12. Don't settle for a lifeless form

Conclusion

Video

How to add a Webflow form?

It's easy, when you have opened the page where you want to insert a form, go to the panel of adding elements, then to elements. Finally, you will see "form". I hope you haven't forgotten: on Webflow, the drag-and-drop system prevails. To insert this form, you will have to click on it, not let go, but immediately drag and drop it on the page. The Webflow constraint is that you have to drag it to the right place, but if you manage Webflow, you know what I'm talking about.

Which elements should be set in the form?

I'm sure that the Webflow form created, in its raw state, will not suit your taste. You need something more personalized. So you will have to modify these 3 parameters (we will see each of them during this guide):

• Modification of the form itself (fields to be added or deleted, to be personalized or not)
• The confirmation message
• The error message of the form

Modification of the form

By default, a form contains only the essential elements (name, message, button). However, here are some other elements that can be added:

• Input: Is the one that collects the data that the users have entered. Only, it is presented in a single line.
• Text area: Similar to the input area. The only difference is that you can write a long text (several lines). It is generally used to receive messages from Internet users.
• File upload: As the name suggests, it is set up to receive attachments.
• Checkbox: Is an option selector. Visitors can choose to select only one option or several options.
• Radio button: This element is similar to the Checkbox, but visitors will only be able to select one option.
• Select: It acts like a drop-down list. Your client then tells you what information they would like to add to this list so that their prospects can make their choice.
• ReCAPTCHA: You must have already encountered reCAPTCHA when browsing various sites. This is a service from Google that is used to prevent spam. I don't know anyone who is happy to receive emails notifying them of spam from the forms they have installed on their site!
• Finally, the submit button: It is MANDATORY. It is the only element that must be included in the form, because it is the one that will trigger the action.

Not all of these elements will necessarily appear on a site. Depending on your client's needs, you may not need all of these things; perhaps you'll just use the default ones. As a web designer who works for many different types of businesses, I think it's important to have all of these things in your back pocket though!

In case you need to insert one or more of these fields in a form, just go to Form wrapper, then to Form element , and drag and drop the concerned element.

Note that these elements can only be added in the block reserved for the Webflow form.

Focus on Webflow form elements

We have only quoted and explained the different elements proposed by Webflow. What about modifying them? Each of them can be modified. To do so, you just have to double-click on the element in question. Another way to do it is to select the element and then press the enter key on the keyboard.

For each element, here are the possible customizations:

• Label: This is the description of the function of the field concerned.
• Required option: To let the user choose whether or not to fill in a field (let's say your client wants to have the email address of his prospects. In this case, you have to check the required option of the email field).
• Placeholder: Text is usually displayed in form fields. For example, in the email field, we enter terms like exemple@tondomaine.com. So I would say that the placeholder was put in order to guide the user on what to write. It can be a simple word or a long sentence.
• Text type: It is the one that defines the type of data that can be inserted in a field (email, password, phone number...). For the password field, for example, the texts entered are immediately hidden. For the phone number field, it only accepts encrypted data. In short, the field in question only accepts content corresponding to the type entered. If necessary, it shows an error message when pressing the submit button.
• Autofocus: By activating this option on an element, the web page automatically redirects users to that form element once it has finished loading.
• Submit button: For this one, the only parameters to configure are the texts displayed in normal mode, and in send wait mode. By default, they are respectively submit and please wait.

Configuration of success and error messages

How do I know if the data is being sent correctly or not?

On the prospect's side, a notification in the form of a message appears. It indicates whether or not the information has been sent to the site owner or manager. You can customize these messages by going to form wrapper, element setting (shortcut: D, on the keyboard), and finally, show state options . 3 states are shown :

• Normal to show the current state of the Webflow form, exactly as you see it in edit mode.
• Success To let people know that the message is going well.
• Error to indicate that a form submission problem has been encountered.

If possible, I advise you to include an email address to contact the person in charge, in the error message. This is to avoid that prospects give up contacting the owner of the site under the pretext that there was an error. That would be a shame!

On your side (or your client's side), a notification will be sent when the message has been sent. To specify to whom this notification will be sent, you just have to specify it in the settings(project settings in the form tab). Let's take your case (you, who created the site). You too will be entitled to notifications about this form on your Webflow dashboard. Nothing could be easier. Even better, the files you will have collected can be exported in CSV file.

Advice on creating forms

1. Do not overflow the field

It is true that there is nothing better than a good amount of information about prospects to better understand them. However, I don't advise you to try to collect them by form. Just looking at the amount of fields you have to fill in is discouraging! Sometimes you don't need more than your email address and first name.

Moreover, studies show that by reducing the number of fields to be filled in a form (to a maximum of 4), the conversion rate of sites increases by 120%.

2. Do not complicate the content of the Webflow form

Have you ever thought about why you want to put a form on your site? Is it to encourage readers to write to you, to convert your prospects into customers or something else? What I want to tell you is that each form has a specific purpose. So you have to make sure that you explain that purpose as clearly as possible.

That's why short sentences are preferred. I'm talking about form description sentences or form completion prompts. Secondly, don't clutter it up with frivolous things, things you probably won't need. If you're asking your customers to fill out a newsletter sign-up form, what's the point of asking them for their phone number?

Finally comes the submission button. It too has its role to play. And above all, it must be explicit. The fact that you are creating a professional website does not mean that you have to write in a very formal tone. A simple sentence can do the trick (as long as it is explicit enough). For example: I register, receive my code, buy, etc.

3. Don't leave potential customers in the dark

You have to explain that by filling in a form, the users are sure to receive something in return. For a contact form, for example, they will understand that the webmaster or your client will respond to their email, i.e. they will receive information on a specific subject. What about other types of forms?

When subscribing to a newsletter, potential customers would certainly like to know the frequency of the mailing (weekly or monthly), the content of the mails they will receive (help, blog or promotion), the number of existing subscribers, etc. If possible, an example of a newsletter already written in the past would be a plus!

On the other hand, if you're going to keep all the information you collect confidential, so much the better! It's the smartest thing to do. But how will future prospects know that their data is secure? You should mention this too. A way to gain their trust.

4. Don't hide anything from site visitors

This tip is somewhat related to the previous one, but we focus mainly on privacy and personal data protection. If you need to ask for sensitive information (email, phone, salary...), it is better to do it with a lot of tact. Why not explain clearly what you are going to do with it? Maybe you'll make a phone call, send them an email, need it for a study...?

5. Do not limit yourself to one form

You know the site well, it is normal because you are the one who designed it. But this is not the case for all the other users of the site. For one reason or another (such as carelessness), some of them may miss the form. That's why it's important not to limit yourself to just one! On different (strategic) places of the site, it is necessary to put some.

If we take the example of the Yoast.com site, if I am not mistaken in my account, it has 3 forms. Maybe that's one of the reasons why they managed to have more than 96,000 subscribers (yes, it's written on their site; I didn't make it up).

6. Do not use multiple columns

I don't know about you, but I never liked the fact that I had to bounce from one column to another when I had to fill out a form. It just makes things more complicated, a big waste of time in my opinion. Unless you have to (because your client wants to collect a lot of information and one column isn't enough), I suggest you keep it simple. In fact, a form with simple columns can be called "simple". Just the way Internet users like it!

7. Do not complicate the process

What if your client really wants to have a lot of information? Instead of splitting the column into 2 or 3, I suggest a better solution. Divide the form submission process into multiple steps. This is what e-commerce sites that need a lot of information about their customers do.

Once potential customers have entered some of their contact information in the first part, there is a good chance that they will continue the step to the end, and thus provide the additional data. Again, there is a certain strategy to apply: start by asking for the most important information.

8. Do not make texts illegible

As long as the texts are typed, there's no chance they'll be unreadable. Is that what you think? But it's not true! If you put all the texts in capital letters, not only does the form not look good, but the text does not make you want to read it. It is not forbidden to use capital letters, especially for words or short sentences. You can even use them to emphasize certain things. I just don't think you should overdo it.

9. Show them what to do

Have you ever entered a desired password in a field only to be told that it wasn't enough? Have you tried more than once? Don't do this to people trying to use your registration forms.

Don't make the password requirements too complex either, as users like to use the same passwords for their online registrations, and forcing them to enter a password that is too complicated will cause them to forget it the next time they visit and they may only order from you once instead of several times.

10. Display question labels above the fill-in fields

Once you have finished a draft of the form, put yourself in the shoes of the users for a second. Is it easy to fill out? Can you make it even easier, for example by displaying labels above each field? We usually make the mistake of not putting labels because we think it detracts from the design of the site. But is this really the case?

In fact, studies have been conducted on this subject. It has been found that by putting labels on top of fields, the time it takes to fill a field is faster. Internet users need to make very few eye movements. This is why.

And so, next to the fields, it is not advised? To be honest, there are no specific rules about this. But if you decide to put these labels on the side, preferably line them up so that they are easy to read.

11. Do not abuse certain elements

Your objective remains unchanged so far: to make it easier to fill in the form so that people will get on it. To make it even easier, avoid using unnecessary elements. Do you remember the 3 elements I mentioned at the beginning of this article? Thecheckbox, the radio buttons and theselect list? Have you ever wondered when to use them, since they look a bit alike?

As a reminder, radio buttons are placed when you want visitors to choose only one answer. The checkboxes allow a multiple answer, among a list already given. Finally, the selection should only be used when there are more than 7 possible answers from which the visitor must choose. In short, do not abuse these 3 elements.

12 Don't settle for a lifeless form

When you can afford it, use clickable images. This will make filling out the form more pleasant, more intuitive and easier! We are web designers after all!

Conclusion

In short, designing a form on Webflow is not difficult. The drag and drop concept always makes things easier! You just have to drag and drop the form block, and then do the same for the form elements and fields. However, convincing users to fill them in is another story. If you apply the 12 tips I've just given you in this guide, you can easily reach your goal (and your customers too)!

Comments