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!
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.
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.
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):
By default, a form contains only the essential elements (name, message, button). However, here are some other elements that can be added:
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.
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:
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 :
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.
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%.
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.
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.
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...?
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).
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!
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.
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.
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.
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.
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.
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!
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)!