In this lesson, we’re going to build a form — and for this example, it will be a LEAD generation form (we want to capture leads for our fictional business — and it’ll look like THIS at the end). And we’ll move FAIRLY quickly in 5 steps.
First we’ll go over what’s in a form (the anatomy), we’ll show how to configure form elements, we’ll style our form, we’ll talk success and error states, and finally, we’ll control what happens when someone fills OUT this form.
Let’s take a look at the anatomy. So we can bring in a form (by the way, there are LOTS of form things you can add), but we’ll START…with our Form block from the Add panel (we can just drag that in). And by default, the Form Block has a bunch of stuff inside already. And this is CRITICAL for one reason: we NEED a form block to actually CAPTURE the form data.
And while there’s a lot of stuff we can SEE, it’s only a THIRD of what’s inside. Open up the Form block? There’s actually THREE things: the form itself (what we see), but SECOND…we have a SUCCESS message (when someone submits the form). And finally, an ERROR message (if someone has a PROBLEM submitting.)
And if we take a tiny looksie under Form, we have pretty much everything we see on the canvas: all our labels, text fields, and the submit button.
Miguel [laughing maniacally]: You literally…
Grimur: Miguel, what’s up? We’re filming.
Miguel: You can’t say that.
Grimur: I can, Miguel. And I just did. Otherwise, form anatomy is boring.
But one REALLY good practice here: do NOT delete the field labels. These are often CRITICAL for accessible navigation. So if you’re tempted to go minimal, consider other ways of doing that.
And if we wanted to ADD other Form elements (like the ones we see here) we can drag those right in.
Let’s do that now. We can start to build this sort of “lead generation form.” So we’ll add in the fields we want. But dragging and dropping stuff ….
Miguel: Boring?
Grimur: Yeah, so with the magic of editing | now have everything we need for our lead gen form. Name. Email. Phone number. Company size. And a text area to add in more information.
Let’s talk CONFIGURATION.
What is our GOAL? We’re adding these different elements SO THAT we can GATHER all the information we need from POTENTIAL customers…who are filling out this form.
So with a LOT of these form elements, we can sort of double click on them (...or even just click the little button...) and we can see all our options.
Let’s say we REALLY need to get their name and email. Well, we can go in, and make sure not only the name, but also the EMAIL are marked as REQUIRED. (Maybe the others are optional. It’s up to you. I like to make everything required, but let’s be honest, it’s also the reason Miguel is still filling out my Birthday RSVP even though, I have, indeed, celebrated my birthday over, ha, yes, three weeks ago.)
But there’s more going on in these configuration options. Any time we see the NAME field in our Input Settings? This is how we’ll identify the field INTERNALLY, which’ll 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.
Up next. The TYPE of text, like email. This is essentially VALIDATION. For email, that’ll check to make sure what’s written in the field is an email — not a random smashing of keyboard characters, like Miguel’s default typing mode.
Miguel: That’s not my default typing mode.
Grimur: Sorry Miguel.
Miguel: That’s okay.
[Miguel goes back to his laptop and types by smashing keyboard characters.]
After that, we have Placeholder, which is the text that displays before someone types something in the field. (This gets overwritten the moment you start typing in the field.)
Then the required option. We covered this earlier: and it stops someone from SUBMITTING the form without filling this out.
And the other big one is Autofocus. When a user loads up this page, this text field will ALREADY have focus (it’ll have a blinking cursor). Be careful, though: if your form’s on a long page, it could lead to someone getting AUTOMATICALLY pushed down to the bottom of the page.
We also have options for our Submit button. Double click that. And here we can change the text to something thrilling like Engage. Or Submit. Or Execute.
ALSO if we want? We can change the Waiting Text. This is the text that will REPLACE the button text temporarily while the form is being submitted.
Is that everything? No. Because each form element has DIFFERENT options (various input settings based on each element type which you can access in the Element’s settings).
In fact, there are SECRET options in different elements that hopefully YOU will discover while building your own forms.
But let’s move on to styling.
This is SUPER powerful. Field labels (we know this): field labels are here by DEFAULT. I have a text style called “Label” in my project which already has some typography styles, and I can quickly apply that same class by SELECTING each label, and adding that class right in. (I’m using the Command + Enter keyboard shortcut which lets me jump RIGHT to the selector field.) Also, my keyboard and mouse are doing all of this FOR me.
Let’s also go ahead and create a class…for our text fields. We’ll call this class “Fields”, because we’re using it for OTHER stuff.
Background color: let’s make this a lighter gray color (we have a swatch for that). Border: let’s change the color on the border to 0% on the alpha. (By the way…WHY? I’m going to cover why in just a moment.)
And that’s it for now.
Let’s make sure we APPLY that class to ALL of our text fields…but we’ll actually go ahead and take that ONE step further. Because we’ll ALSO apply those style changes to our SELECT field (the sort of company size thing), and we’ll do the same thing for our text area — we’ll select it and make sure that same class is applied.
Real quick: let’s cover PLACEHOLDERS because that’s a request we get a LOT.
Placeholder text is actually a STATE. With an input–
Miguel: I checked, it’s not.
Grimur: Riveting, Miguel. Let me show you what I mean.
Miguel: Please.
Grimur: With any of these fields selected (let’s make sure the field is selected and it has a class applied)...but we can go into our dropdown, and check this out: PLACEHOLDER.
Placeholder refers to the text that’s pre-written (we showed this before). So if we want a really, really light gray (because minimalism), we can do that. Of course, it’s about the least visible thing in the world, and frankly, it’s searing my retinas just trying to read this text, so let’s make it GRAY, and not so horrible.
But that’s PLACEHOLDER. What if we want to change the color of the TYPED text…so when someone starts typing into any of these text fields, we’re controlling that color. Let’s just make sure we’re styling None.
And we’ll go down and affect the font color — let’s make it something obvious like RED... and when we do, we can head over to Preview, and start typing something in, and... it’s RED. (Notice how that also affected the Select field for the company size.)
Okay. Back out of Preview mode? Go back over and open up the font color? Make it slightly LESS red than the red it is now? Hydrate…because hydration’s critical? Now the text is not red.
But there’s another important part about typing stuff in. And that’s letting users know WHEN a particular field is selected (or FOCUSED).
So. If we go to preview our page and click inside a text field? That field is now focused. Depending on how you’ve styled your project, you might like it as-is. Or maybe you’re looking to do something different. If that’s the case, we can override that style.
And we can access the Focus by selecting the text field and clicking on States. And we can see we have “Focused.” And from here we can STYLE...the state. For us, we could do something like changing the background color (drawing some more attention to it by making it a bit darker and more obvious.)
But for the Focused state, a REALLY common thing is a border (let’s set our color to a black border so we SEE the effect). If we go into preview mode after this, we can click through and see what that focus state looks like.
But remember: earlier we made the border color TRANSPARENT. Why? (Why didn’t we just set the border to 0 pixels?) Here’s exactly why.
If we took our text field in the None state (not in Focused; just in None), and we set it to 0 pixels? We see the border disappears. (That’s expected.)
And if we went into the Focused state and set it to something like 5 pixels (I’m just adding this to prove a point here)...here’s the problem: if we go back to our none state (we can just hit escape on the keyboard) and we go into Preview mode, notice how it affects the document flow (things jiggle around and other things are focused).
SO. One of the BETTER ways to do this is the following: on the none state (like we showed before), let’s make sure we SET the border to ONE pixel (I’m not SETTING anything to 0 pixels this time). But I AM setting the COLOR of that border (it’s ALPHA…to 0). That way we don’t SEE the border.
And on the focused state NOW? We can go back in and set that alpha to ANYTHING else (give it some more contrast)...and NOW if we go back to the none state and go to preview, we’re all set: we can see the border AS we select (as we FOCUS) on each text field.
All that work? And for this design, I’m actually going to REMOVE that darker color, since we can still see the FOCUSED effect with the background color.
Anyway, once I get the design ready for proofing, I can go into Preview and see what it looks like when EACH field (each text field) is focused.
Now there are magical advancements in css like css outlines that make a lot of this even easier, we have tons of that on Webflow University but for now let's move onto style our button.
But what about our button? With our button selected, we can style it. We can style the weight, the size, and the color of our font, the letter spacing, we can go in and change the Capitalization, and let’s change the background color. (We can make the style changes to match our design.) These are just the changes WE’RE making but you can style it however you like.
Let’s move on to success and error states.
What we see on the Canvas right now? Is the normal state. (In fact, with our Form block selected, we can head over to the Element settings, and we can see it’s on NORMAL). Switch over to success? Now we see what happens when someone SUBMITS the form. We have some placeholder text, and as LONG as we’ve selected the SUCCESS message block in the Navigator, we can STYLE the block or anything inside. AND... you can literally add ADDITIONAL things (as an example, I’m dragging in an image).
And it’s the same thing with the Error state (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.
Finally, let’s bring this all together into RECEIVING these form submissions.
And there are only TWO things to note (the first one is simple): If you have one form, multiple forms — whatever. You can go to the form settings and set the name of the form.
But for part two…let's talk about WHAT ACTUALLY HAPPENS when someone sends a form. Of course, that form data is captured and will show up under project settings (and once we’re there, we can go over to where it says Forms, and all our form data is all the way down at the bottom).
But if I scroll UP on this page? I can control the OTHER aspect of this: WHO gets notified when a form is submitted.
Simply enough, if I want the form data to always get sent to me? grimur@studiobruk.com? Now I’ll get an email. Want to add Tearsa? Tearsa@studiobruk.com.
And now a copy of the form gets sent to me and Tearsa every time it’s filled out. HOWEVER. From name?! What even is that? Is it a typo? Is it supposed to say “form name”? NO. FROM name is who or WHAT that notification email is sent FROM. I can also control the subject line, or the reply-to line (if I want the email to be reply-to…able). And I can control the body of the email.
For a lot of these, I can also use variables, and we have TONS of information on that on Webflow University. So check that out if you haven’t already.
Again. When someone submits the form? That submission data will be emailed to the address (or addresses), and it’ll also be listed below. You can access it right here, or you can even download a CSV file.
But that, my friends, and Miguel…is forms. We went over the basic anatomy of our form, we double clicked to configure and change the input settings on our elements, we styled our form, we talked STATES including success and error messages, and finally, we covered form SUBMISSIONS. What happens when a user SUBMITS that form.
When we’re all done, we can publish our site in just a couple clicks…and go test this out in the PRODUCTION environment.
1, 2, 3, type type type. I just wrote Act III, Scene I of Hamlet.
But I also covered the basics of forms with all of you…in the Webflow Designer.
