Webdesign is not just about design, and you know that very well. In order to increase your chances of finding customers, or to keep them, you need to be able to design a functional website. By functional, I'm talking about one element in particular: the webflow form. All the forms 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!
In your opinion, are the 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? Feel free to share your opinion in comments.
- Do not overflow
- Do not complicate the content
- Don't leave potential customers in the dark
- Hide nothing from visitors to the site
- Do not limit yourself to a single form
- Do not use multiple columns
- Do not complicate the process
- Do not make the texts illegible
- Show what they must do
- Display question labels above the fill fields
- Do not abuse certain elements
- Don't settle for a lifeless form
How do I add a Webflow form?
Nothing could be easier, once you have opened the page on which you want to insert a form, go to the add elements panel, then to elements. Finally, you will see "form". I hope you haven't forgotten: on Webflow, the drag and drop system is very popular. To insert this form, you'll have to click on it, don't let go, but immediately drag and drop it on the page. The constraint of Webflow 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 to set up 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. 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 customized 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 entered by Internet users. Only it is presented in one line.
- Text area: Looks like 2 drops of water at input operation. The only difference is that you can write a long text (several lines) in it. It is usually used to receive messages from Internet users.
- File upload: As its name indicates, it is set up to receive attachments.
- Checkbox: Is an option selector. Visitors have the choice of selecting only one option or several options.
- Radio button: This item is similar to the Checkbox, but visitors will only be able to select one option.
- Select: It acts as a drop-down list. Your client then tells you what information he would like to add to this list so that his prospects can make their choice.
- ReCAPTCHA: You've probably already had to deal with reCAPTCHA while browsing various sites. This is a service from Google that is used to prevent spam. I don't know of anyone who is happy to receive emails notifying them of spam from the forms they have installed on their site!
- Finally, the submission button: It is MANDATORY . It is the only element that is absolutely MANDATORY to be included in the form, as it is the one that will trigger the action.
Not all of these elements will necessarily appear on a site. Depending on your customers' requests, you may not need all of them; you may be satisfied with the ones that are present by default. As a webdesigner working for different types of companies, I think it's important to have all these notions in your pocket!
If you need to insert one or more of these fields in a form, simply go to Form wrapper, then to Form element, and drag and drop the relevant element.
Note that these elements can only be added in the block reserved for the Webflow form.
Zoom on Webflow form elements
All we have done is quote and explain the various elements proposed by Webflow. What about their modification? Each of them can indeed be modified. To do so, simply double-click on the element in question. Another way to do it is to select that 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 leave the choice or not, to the Internet users, to fill in a field (let's suppose that your customer 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, terms such as firstname.lastname@example.org are entered. So I would say that the placeholders have been 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 entered texts are immediately hidden. For the phone number field, it only accepts encrypted data. In short, the field concerned only accepts content corresponding to the type entered. If necessary, it shows an error message when the submit button is pressed.
- Autofocus: By enabling 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 be configured are the texts displayed in normal mode, and in standby send 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 is transmitted to the site owner or manager. You can therefore 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 has gone well.
- Error to say that a form submission problem was encountered.
If possible, I advise you to include an email address to reach the person in charge in the error message. This, to avoid that prospects give up contacting the owner of the site under the pretext that there was an error. That would be a pity!
On your side (or that of your customer), a notification will be sent to you 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 with form tab). Let's take precisely your case (you, who created the site). You too will be entitled to notifications on this form on your Webflow dashboard. Nothing could be simpler. Even better, the files you have collected can be exported as a CSV file.
Tips for creating forms
1. Do not overflow
It's true that there's nothing better than a good amount of information about prospects to better understand them. Only, I do not advise you to try to collect them by form. Just by seeing the amount of fields to fill in, it's discouraging! Sometimes you need nothing more than the email address and first name.
In fact, 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 wanted 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 every form has a specific purpose. So you have to make sure that you explain this objective as clearly as possible.
This is why short sentences are preferred . I'm talking about sentences describing the form or prompting people to fill out the form. Then, don't clutter it up with trivial things, things you probably won't need. If you ask your clients to fill out a newsletter subscription form, what's the point of asking them for their phone number?
Finally comes the submit button. It too has its role to play. And above all, it must be explicit. Just because you're creating a professional website doesn't mean 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, get my code, buy, etc.
3. Don't leave potential customers in the dark
You must explain that by filling out a form, people are sure to receive something in return. For a contact form for example, they will understand that the webmaster or your client will answer 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 sending (weekly or monthly), the contents of the e-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!
Besides, if you intend to keep all the information you collect confidential, so much the better! It's even the wisest thing to do. But how will future prospects know that their data is well protected? This is also worth mentioning. A way to gain their trust.
4. Hide nothing from site visitors
This advice is somewhat relative to the previous one, but we focus mainly on the protection of privacy and personal data. If you need to ask for sensitive information (email, phone, salary...), it is best to do so with a lot of tact. Why don't you explain to them clearly what you are going to do with it? Maybe you'll make a phone call, send them an email, you need it for a study...?
5. Do not limit yourself to a single form
You know the site well, that's normal because you're the one who designed it. But that's not the case for all the other users of the site. For one reason or another (due to inattention among others), some of them may miss the form. Hence the interest of not limiting oneself to just one! On different (strategic) places of the site, you have to put some.
If we take the example of the Yoast.com site, if I did not make a mistake in my account, it has 3 forms. Maybe that's one of the reasons why they've managed to have more than 96,000 subscribers (yes, it's listed 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 complicates things, a big waste of time if you ask me. Unless you have to (because your client wants to collect a lot of information and one column is not enough), I would advise you to keep it simple. In fact, a form with simple columns can be called "simple". Exactly the way Internet users like them!
7. Do not complicate the process
What if your client really wants a lot of information? Instead of splitting the column in two or three, I'll give you a better solution. Divide the form submission process into several steps. That's what e-commerce sites do when they need a lot of information about their customers.
Once potential clients have entered some of their contact information in the first part, there is a good chance that they will follow through to the end, providing the additional data. Here again, there is a certain strategy to follow: start by asking for the most important information.
8. Do not make the texts illegible
As long as the texts are typed, there's no chance they're illegible. Is that what you're thinking? Well, it's not! If you put all the texts in capital letters, not only is the form not pretty to look at, but the text doesn't make you want to read it. It is not forbidden to use capital letters, especially for short words or sentences. They can even be used to emphasize certain things. I just don't think we should overdo it.
9. Show what they need to do
Have you ever entered a desired password in a field and been told 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 fields
When you finish a draft of the form, put yourself in the Internet users' shoes 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 done on this. It has been found that by putting labels on top of fields, the time to fill a field is faster. Internet users need to make very little eye movement. That's why.
And so, next to the fields, it's not advisable? To tell the truth, there are no precise rules about it. But if you decide to put these labels on the side, preferably line them up in a way that makes them easier to read.
11. Do not abuse certain elements
Your goal remains unchanged so far: to make it easier for people to fill out forms and get on top of it. To make it even easier, avoid using unnecessary elements. Do you remember 3 elements I told you about at the beginning of this article? Thecheckboxes, the radio buttons and theselect list? Have you ever wondered when to use them, since they look a bit alike.
As a reminder, the radio buttons are placed when you want visitors to select only one answer. The checkboxes allow multiple answers from a list already given. Finally, the selection should only be requested when there are more than 7 possible answer choices from which the visitor will have to choose. In short, do not abuse with these 3 elements.
12 Don't settle for a lifeless form
When you can allow it, use clickable images. This will make completing the form more pleasant, intuitive and easy! We are still webdesigners!
In short, designing a form on Webflow is not difficult at all. The drag-and-drop concept always makes it easier! Simply drag and drop the form block and then do the same for the form elements and fields. However, convincing people to fill them in is another story. By applying the 12 tips I've just given you in this guide, you can be sure that you can easily reach your goal (and your customers too)!