And we're back. In this video, 1
we're going to learn the basics of forms inside Webflow. Inside elements panel 2
there is a special section dedicated to the forms and form elements. 3
First step is always to add a Form Block. Which comes with some elements already. 4
We can remove any of this as we like, and we can add more elements inside the form block. 5
Let's have a look, 6
what is this form block made of? 7
There are 3 groups inside. Form, which holds everything that we currently see. Like the field and submit 8
button. 9
Then we have a success message, that is hidden at first, and only shows up once the form is successfully 10
submitted. And the error message that only shows up when there was some sort of error 11
when the user was trying to submit the form. If we want to add new elements to the form, we can drag things 12
like dropdowns and checkbox inside the form. 13
Each form field has their own settings. 14
If you click this gear icon on or double click on the form field, it will show the setting for this input 15
field. 16
First item in the settings is the name of the field. 17
This name is internal. 18
It's just what we see inside the database. 19
Users are not going to see the name. The label of the field is outside, it's not in the settings. 20
It's just a regular text block. That is sitting on top of the field itself. Which we can edit and style 21
just like we would with any text block. 22
But if we want more minimalistic look, where the label is inside the field and not outside of it. Like 23
we have it in our designs. Then we can add this under a place holder field. 24
And then we can get rid of the label. 25
The next setting is text type. 26
This means, what sort of text is accepted inside this field. 27
Right now it's set to email. 28
So it will only allow emails, and anything else will give an error. 29
If you want to collect names and regular text then we will set this to plain. 30
Then it will accept any sort of information. 31
You also have password, phone and number options underneath. 32
We have an option to make the field required. And maybe autofocus. Autofocus means that the field will 33
be selected right off the bat, as page loads. 34
For a dropdown select field, click show all settings to edit a list of choices that's inside the dropdown. 35
You can edit the choices, delete them, add more, re-order them. Basically everything you'd expect. 36
We don't need a dropdown for our form, so we can get rid of it. 37
All right, let's style our form. In our designs, we made the form to be horizontal. The field and the button 38
next to each other. 39
Here they are aligned on top of each other, so how can we align them next to each other? 40
Well, the form block isn't any different than all the other elements on this page. We can give it classes 41
and style them from the styles panel. 42
The flexbox is an obvious choice when it comes to horizontal alignment. 43
Make sure to select the form element, instead of a form block element, because we are trying to align 44
field and the button. 45
The form block holds form, success and error messages inside. 46
So it's going to align these 3 elements. 47
This is what's going to happen. 48
So one more time, select the element named form and then give it a Display flex. 49
Now, we can style the field and the button independently. 50
Our field is 56 pixels height, has rounded corners and has a text inside that is 16 pixels with a 51
grey color. 52
Now to make that place holder text inside the field different color, you'll see that changing the 53
color doesn't do anything to it. 54
That's because this text color changes the color of the text that user actually types inside. You 55
can check this inside the preview mode. 56
But that's not what we want to change. 57
That was fine as it was. 58
To style the place holder field, go into the states of the field and select place holder. 59
Now we can change the color of the place holder text. In our designs we are using the grey color, but 60
we have it set to 70% opacity, so don't forget that. 61
Excellent, now for the button, let's give it a class name button. 62
The text inside the form button can be edited from the settings, just like other form elements. 63
This is a little different from other buttons, where we can edit text directly by clicking through it. 64
I want you to pay attention to something here. 65
You see how the button is a little taller than a field, but the button actually doesn't have a height 66
and has a padding that is only 9 pixels. 67
So why is it so tall? 68
That's because of the settings that are given to the parent flexbox. You see here, it says "stretch". 69
That means the flex children, will fill the height of the flexbox until otherwise instructed. 70
If you change that, then the height will change with it. But you might wonder, how come the field 71
has a different height? That has to do with a default margin that is applied to the field. 72
That extra 10 pixel margin is stretching the flexbox, so the button has now more space to fill. 73
If we remove that margin from the field, then button will shrink and match the size of the field. 74
But let's keep that margin for now. 75
Sometimes when we have multiple fields, we need that margin. 76
We can fix this issue, by simply giving the button a fixed height. 77
I wanted you to have a closer look at this behavior, because often you will come across with such irregularities 78
inside Webflow 79
or generally when you're designing and developing a website. Because all the elements and all the setting 80
sort of interact with each other. And they change the structure of the website. 81
So a margin here might be changing some other behavior on a very different element. 82
Right? 83
Just like what happened in this example. 84
Whenever something like this would happen to me, in the beginning, I would always think like, "oh is this 85
a bug? why it isn't working like this?". I always thought there was something with Webflow, then I would go 86
around on forums searching for this bug with a button or a form, or something. And then at some point 87
I've gotten to the answer and then answer would be quite simple. 88
That's why I want you to learn how to look for the clues when you get stuck about something. And think 89
of it as a puzzle. 90
You always think that there is a solution. 91
The answer is somewhere there. 92
It's not that the tool is broken, or that it's a bug, or something isn't working properly. But it's, there 93
is some sort of puzzle that needs to be solved. 94
Because I remember, and its always, often it's frustrating if you are dealing with a tool and you're trying 95
to build something. And it's just not going your way and it's not working out. And you might feel frustration 96
and you can might get discouraged and you might not enjoy the process anymore. 97
So I want you, to kind of take a breath and look at it in a... look at it in a way that... it's complete accident. 98
Look at it in a way that it's a puzzle and there is a clue and you just need to get to the answer. So 99
check each element. And see what style can be interact with something else. And you'll get to the answer 100
and you're gonna feel very good about it. 101
All right, let's have a look at the form in the preview mode. 102
All looks good, but the button could use a hover effect. 103
A simple hover state will do, just a little change of the color and that's it. 104
Another thing we can change is the success and error messages to do so. 105
First we need to show these states. Which we can do from the form settings. Select the form block and go 106
to the settings panel. 107
Here we can switch between normal, success and error states. 108
Once you have success state enabled, then you can interact with it and change them as you like. 109
We can even drag other elements inside, or change the background, style the text or whatnot. 110
Instead of this success message, we can also redirect the users to a different Thank You page, which 111
we can do by adding a redirect 112
URL in this field. But in our case, we're going to keep the success message. Same for the error 113
message, change the state to "show it" and then style it as you like. 114
I'm pretty fine with this default error message and its style. 115
So let's keep it as is. And that's it for the form for now. 116
Once we publish our site, we will test the form on the live website and see how we can manage the 117
form submissions.