Lesson info

Forms are one of the most powerful tools any website can feature, whether you're gathering email newsletter signups or work inquiries from potential clients. In this video, we'll introduce you to the basics of using forms in Webflow, including: 

  1. ‍Adding a form to your site
  2. ‍Understanding the anatomy of a form
  3. ‍Configuring form elements
  4. ‍Customizing success and error messages
  5. ‍Managing form submissions

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

Forms of course can capture valuable information — and their design and functionality can easily make or break the user experience.

And five things we're covering: adding a form, anatomy of a form, configuring form elements, success and error messages, and finally, form submissions.

We'll start with adding.

We'll visit the Elements Panel and go down to grab a Form Block to drag right into our project. And the Form Block comes prepared with some essentials. A good starting point.

And the reason we start here when adding a form, rather than just going to grab an individual form element, is because the Form Block itself is required to capture this data: the data that's collected when the form is filled out. You can delete a lot of these elements inside the Form Block and start from scratch if you'd like. But the Form Block is our starting point.

Let's look a little closer at its anatomy.

And to do that, we'll ensure that the Navigator is visible. The Form Wrapper is the top-level element. It's going to take up the full width of its parent element. In this case: the Container.

We can see in the Navigator...that the Form Wrapper contains three elements: the Form, the Success Message (what a user sees when they submit the form successfully), and the Error Message (which displays if there's a problem submitting the form).

Under Form, these are the elements we can see right here on the Canvas: A Field Label and a Text Field for Name, the same two elements for email, and of course, a Submit Button.

These are the elements that are included by default in a Form Block.

Now let's talk about configuring specific elements.

If we double click on any field — for instance the one that corresponds with the name — we can take a look at some of those input settings.

In this case, we have a number of input settings. The first one's a big one.

Any time we see the Name field on our Input Settings? This is how we'll identify the field internally, which will show up on form submissions. Users won't see this name directly, but it still shows up in the code, so be careful not to include something you wouldn't want users to see.

Next we have Placeholder, which is the text that displays before someone types something in the field.

Then the type of text, like email — which will only accept email addresses.

Then the required option — whether or not the user can submit the form without filling this out.

And Autofocus. When a user loads up this page, this text field will already have focus — it'll already have a blinking cursor.

We also have options for our Submit button. Double click that. And here we can change the text to something thrilling like Execute. Or Engage. And we can change the Waiting Text. This is the text that will replace the button text temporarily when the form is being submitted.

Each form element has different options; various input settings based on each element type.

But that's how to configure form elements inside our Form Block.

Let's take a closer look at success and error messages.

And to access these, we can select our Form Wrapper, under our Element Settings. And we have Show State. What we see on the Canvas right now is the normal state. Success shows us what happens when a user successfully submits the form. We have some placeholder text, of course you can do whatever you want here — add an image. Or double click to change the text. We can even style it. We can change the font color to a really strong green. Because people always associate success with a strong font color that sears their retinas.

Let's select the success message again, and go back to our Element Settings Panel.

We can now show the Error state. And this is what will show if there's a problem submitting the form. Same type of control here that we had for our success message. Back to normal state, and we have full access to our normal form.

Those are the success and error messages.

Finally, let's bring this all together into receiving these form submissions.

And we can control these aspects through our Project Settings. Let's navigate on over to the Forms tab. And this will give us all the options related to what's done with the data that's received on a successful submission.

Now the collected data will be emailed by default.

And our options start with the From Name. When that email is sent, what from name do you want displayed?

Next we have the Email Address or email addresses you want submissions sent to.

The Subject Line for that email.

The Reply To Address — this'll be the email address that's used if you receive a form submission email and hit reply. You can copy the Name and Email variables to the right of this field, and paste them right inside here. And this will ensure that replies to this email go right to the email address that's captured on the form.

And finally, we have the Email Template. You can leave this as is, or you can write your own version using any of the variables to the right, and you can even put custom HTML in here.

When someone submits the form? That submission data will be listed below. You can access it right here, or you can even download a CSV file.

So, we've covered adding a form to our project using the Form Block element, we went over the basic anatomy of our form with fields and labels and our submit button, we double clicked to configure and change our input settings on our elements, we explored success and error messages which display when a user goes to submit a form, and finally, we covered form submissions. What happens when a user submits that form.

Those are some of the basics when it comes to adding a form to a project.

Related tutorial

Intro to Forms

4:55