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