1 00:00:03,250 --> 00:00:07,810 Now that we have seen how to add buttons to our web page. 2 00:00:07,810 --> 00:00:12,560 In this exercise, we're going to look at forms and how we can add forms to 3 00:00:12,560 --> 00:00:19,220 our web page and also style these form elements using the Bootstrap classes. 4 00:00:19,220 --> 00:00:23,065 Going back to contactus.html page, 5 00:00:23,065 --> 00:00:28,215 scroll down until you see this comment there called "Form goes here". 6 00:00:28,215 --> 00:00:32,990 We're going to replace this with the form in this web page. 7 00:00:32,990 --> 00:00:35,715 So, let's delete that and then construct 8 00:00:35,715 --> 00:00:39,945 the form in that particular location inside the div there. 9 00:00:39,945 --> 00:00:41,855 To get started with the form, 10 00:00:41,855 --> 00:00:50,585 I'm going to use the form HTML tag and construct the form within this HTML tag. 11 00:00:50,585 --> 00:00:52,960 So, within this form tag, 12 00:00:52,960 --> 00:00:57,925 let's add in the radius elements of our form. 13 00:00:57,925 --> 00:01:00,195 So, inside this form, 14 00:01:00,195 --> 00:01:04,405 I'm going to divide this form into several rows there. 15 00:01:04,405 --> 00:01:06,780 To divide your form into rows, 16 00:01:06,780 --> 00:01:17,020 you can simply use a div with the class="form-group" and then apply the row class to it. 17 00:01:20,370 --> 00:01:26,540 So, with this, we are going to add in two form groups here. 18 00:01:26,540 --> 00:01:29,795 I'm going to copy this and then paste it down below here. 19 00:01:29,795 --> 00:01:34,055 So, you can see that I'm going to add two rows to this form here. 20 00:01:34,055 --> 00:01:36,690 So, to add an item into this form, 21 00:01:36,690 --> 00:01:44,330 we're going to this div and then I will start out by using a label tag here. 22 00:01:44,330 --> 00:01:46,550 And for the label tags, 23 00:01:46,550 --> 00:01:48,460 so I will have two rows; 24 00:01:48,460 --> 00:01:51,270 one allowing the user to fill in their first name, 25 00:01:51,270 --> 00:01:53,470 and the second one for their last name. 26 00:01:53,470 --> 00:02:01,530 So, this is where we are going to use that label to specify the class there. 27 00:02:01,530 --> 00:02:09,080 Now, In addition, Bootstrap allows us to use the Bootstrap grid 28 00:02:09,080 --> 00:02:19,300 to specify how these forms are going to be laid out ad so I will apply the col-md-2. 29 00:02:19,300 --> 00:02:27,720 You can see that I have applied the md-2 column classes to this particular item. 30 00:02:27,720 --> 00:02:31,360 So, this item in the form will occupy two columns. 31 00:02:31,360 --> 00:02:33,465 So, inside this form element, 32 00:02:33,465 --> 00:02:37,950 we have divided each row into 12 columns. 33 00:02:37,950 --> 00:02:40,940 So, because we have already used the row for the div, 34 00:02:40,940 --> 00:02:45,030 so that'll provide us with 12 columns inside the div there. 35 00:02:45,030 --> 00:02:52,560 In addition, I have to apply the class col form label to this. 36 00:02:52,560 --> 00:02:56,905 So, this is what allows me to specify a label here. 37 00:02:56,905 --> 00:02:58,395 So, for this label, 38 00:02:58,395 --> 00:03:07,070 I will fill in the label as a first name and then close the label tag. 39 00:03:07,070 --> 00:03:10,485 So, this label tag allows me to give a label, 40 00:03:10,485 --> 00:03:14,150 which will occupy two left columns in this particular row. 41 00:03:14,150 --> 00:03:22,740 On the right side, I'm going to use another div that the class applied as col-md-10. 42 00:03:22,740 --> 00:03:28,420 Notice that the earlier label used the col-md-2 there. 43 00:03:28,420 --> 00:03:29,665 So, for this div, 44 00:03:29,665 --> 00:03:32,755 I'm going to apply the col-md-10 there. 45 00:03:32,755 --> 00:03:35,120 And then inside this div, 46 00:03:35,120 --> 00:03:38,700 I'm going to apply an input element, 47 00:03:38,700 --> 00:03:42,750 which is of the type text. 48 00:03:42,750 --> 00:03:46,770 So, if you are familiar with the forms from HTML, 49 00:03:46,770 --> 00:03:50,460 you'll see that we are using the form elements from HTML to 50 00:03:50,460 --> 00:03:55,910 create that form here so the input box here is of the type text. 51 00:03:55,910 --> 00:04:00,410 Now, this is where we are going to apply the Bootstrap classes to this 52 00:04:00,410 --> 00:04:05,500 and the corresponding Bootstrap class for this 53 00:04:05,500 --> 00:04:10,710 is form control and then I can specify 54 00:04:10,710 --> 00:04:16,165 an ID for this as first name. 55 00:04:16,165 --> 00:04:21,260 So, notice that this ID matches this label for div. 56 00:04:21,260 --> 00:04:26,625 So, first name, and then name as 57 00:04:26,625 --> 00:04:30,735 first name and also I will specify 58 00:04:30,735 --> 00:04:37,190 a placeholder for this so let me use the next line here, 59 00:04:37,940 --> 00:04:46,890 placeholder as, I'm sure from your knowledge of HTML, 60 00:04:46,890 --> 00:04:52,020 you understand how this specification is done here. 61 00:04:52,020 --> 00:04:59,355 So, with this, we have now created our first form element in our form. 62 00:04:59,355 --> 00:05:03,170 Let's take a quick look at the web page. 63 00:05:03,170 --> 00:05:08,310 Going to our web page, you can now see how adding in the form elements has created 64 00:05:08,310 --> 00:05:14,515 this input textbox and the label on the left side. 65 00:05:14,515 --> 00:05:18,105 Now, I'm going to add in another row with the last name. 66 00:05:18,105 --> 00:05:23,150 Going back to my contactus.html, 67 00:05:23,150 --> 00:05:29,215 let me simply copy this part and then paste it into the second div here, 68 00:05:29,215 --> 00:05:32,875 and then go in and edit that. 69 00:05:32,875 --> 00:05:39,890 From first name I change that to last name. 70 00:05:39,890 --> 00:05:45,090 Make sure that you complete all the edits correctly. 71 00:05:45,550 --> 00:05:49,470 Even one missing improper edit, 72 00:05:49,470 --> 00:05:53,210 will cause your form not to work correctly so make sure that 73 00:05:53,210 --> 00:05:58,220 all the first name things here are replaced by my last name. 74 00:05:58,220 --> 00:05:59,795 So, the last name, 75 00:05:59,795 --> 00:06:02,640 md-10 text form control. 76 00:06:02,640 --> 00:06:11,510 The ID here should be last name and the name also should 77 00:06:11,510 --> 00:06:14,945 be last name and the placeholder 78 00:06:14,945 --> 00:06:21,030 again the last name so this should add in a second row with the last name. 79 00:06:21,030 --> 00:06:22,530 Going to your web page, 80 00:06:22,530 --> 00:06:24,000 you can see now the form 81 00:06:24,000 --> 00:06:28,150 slowly getting into shape so you have the first name and last name. 82 00:06:28,150 --> 00:06:33,790 Now, lets next add in an input elements. 83 00:06:33,790 --> 00:06:38,260 We'll see how this works as we add in the code. 84 00:06:38,260 --> 00:06:41,989 Moving now to the next part of the exercise, 85 00:06:41,989 --> 00:06:46,220 here we will add two more fields into 86 00:06:46,220 --> 00:06:51,690 our form here for entering the telephone number and the email ID. 87 00:06:51,690 --> 00:06:54,870 Since the basic structure of the code is similar to 88 00:06:54,870 --> 00:06:58,610 the first name and the last name that you have already added to the form, 89 00:06:58,610 --> 00:07:02,370 so I'm just going to copy the code from the first name and 90 00:07:02,370 --> 00:07:08,000 the last name and then paste it in here and then modify the code accordingly. 91 00:07:08,000 --> 00:07:11,910 So, I have pasted the code from the first name and the last name here. 92 00:07:11,910 --> 00:07:17,080 Let's go ahead and now modify this to turn it into fields that enable 93 00:07:17,080 --> 00:07:22,745 the user to enter the telephone number and the email ID. 94 00:07:22,745 --> 00:07:24,420 So, for the telephone number, 95 00:07:24,420 --> 00:07:28,200 so here we already have the first name and the last name above. 96 00:07:28,200 --> 00:07:34,380 So, the third one, I'm going to change this to label for "telnum". 97 00:07:34,380 --> 00:07:38,745 So, this is from the telephone number and then the classes, 98 00:07:38,745 --> 00:07:44,790 I'm going to apply a col-12 class to this saying that this label will be in 99 00:07:44,790 --> 00:07:52,795 its own draw when the form is shown on extra small to small screen sizes. 100 00:07:52,795 --> 00:07:55,660 And then, for medium to higher screen size, 101 00:07:55,660 --> 00:07:59,945 this would be displayed in two columns 102 00:07:59,945 --> 00:08:04,655 of that particular row here so that's the change that we will make there. 103 00:08:04,655 --> 00:08:06,875 And then also, the label itself, 104 00:08:06,875 --> 00:08:14,860 let me change that to contact telephone number, contact Tel. 105 00:08:15,230 --> 00:08:18,915 Now, the telephone number itself, 106 00:08:18,915 --> 00:08:22,600 we will let the user enter it as two parts; one, 107 00:08:22,600 --> 00:08:25,485 which is the area code and the second one, 108 00:08:25,485 --> 00:08:28,225 which would be the actual telephone number. 109 00:08:28,225 --> 00:08:31,120 So, I'm going to take this part of the code, 110 00:08:31,120 --> 00:08:34,640 which was the input field that we had for 111 00:08:34,640 --> 00:08:40,315 the first name and then create another one down below here, 112 00:08:40,315 --> 00:08:44,190 which I'm going to use for the telephone number itself. 113 00:08:44,190 --> 00:08:50,560 And now we will turn this first one into the field for entering the area code. 114 00:08:50,560 --> 00:08:52,540 You could also use it for example, 115 00:08:52,540 --> 00:08:57,220 for country code if that's what you wish to put in the form. 116 00:08:57,220 --> 00:09:00,190 So, for the area code itself, 117 00:09:00,190 --> 00:09:02,520 I'm going to apply for the div, 118 00:09:02,520 --> 00:09:09,105 the classes="col-5 col-md-3 here". 119 00:09:09,105 --> 00:09:13,410 So, notice that for the medium screen, 120 00:09:13,410 --> 00:09:16,805 we have two columns occupied by the label, 121 00:09:16,805 --> 00:09:20,630 three columns occupied by the area code itself and 122 00:09:20,630 --> 00:09:25,385 the remaining seven columns I will give it to the text field here. 123 00:09:25,385 --> 00:09:29,650 So, similarly, for the area code I say col five. 124 00:09:29,650 --> 00:09:32,680 So, for extra small to small screens this will occupy 125 00:09:32,680 --> 00:09:37,520 five columns and then for the remaining seven columns, 126 00:09:37,520 --> 00:09:42,640 we'll let the telephone number feed itself occupied at. 127 00:09:42,640 --> 00:09:48,510 So, let me change the next one to col-7 and col-md-7 here. 128 00:09:49,540 --> 00:09:54,365 Now, this field I will change this to tel, 129 00:09:54,365 --> 00:09:58,965 input type tel for telephone number and the class is form control, 130 00:09:58,965 --> 00:10:08,830 the ID is area code and the name is area code and then the placeholder, 131 00:10:08,830 --> 00:10:12,415 I will change this to area code. 132 00:10:12,415 --> 00:10:14,215 And the next part, 133 00:10:14,215 --> 00:10:21,885 we will change this also type tel and ID is telnum, 134 00:10:21,885 --> 00:10:28,060 the name is telnum and the placeholder, 135 00:10:28,060 --> 00:10:34,830 itself, would be tel number. 136 00:10:34,830 --> 00:10:40,975 So, this will form the telephone number field, 137 00:10:40,975 --> 00:10:42,840 which will be entered as two parts; 138 00:10:42,840 --> 00:10:45,160 the area code and the telephone number. 139 00:10:45,160 --> 00:10:47,180 So, we are using, again, 140 00:10:47,180 --> 00:10:51,540 the column classes in order to structure how 141 00:10:51,540 --> 00:10:57,260 the two parts of the input field are displayed in the form there. 142 00:10:57,260 --> 00:10:59,490 Now the last one, of course, 143 00:10:59,490 --> 00:11:02,940 this would be for email ID so the label, 144 00:11:02,940 --> 00:11:08,595 I turn that into email ID and then the label itself 145 00:11:08,595 --> 00:11:14,345 is email and input type is email. 146 00:11:14,345 --> 00:11:16,575 Now, we change the type to email, 147 00:11:16,575 --> 00:11:22,060 which is allowed in HTML so that later on if we need to do form validation, 148 00:11:22,060 --> 00:11:24,040 then we know that this field should contain 149 00:11:24,040 --> 00:11:28,730 only an email type of entry there, and the ID, 150 00:11:28,730 --> 00:11:37,490 itself, email ID and the name email ID and the placeholder. 151 00:11:38,600 --> 00:11:42,295 Email. That's it. 152 00:11:42,295 --> 00:11:47,335 Let's save the changes and go and take a look at the updated form. 153 00:11:47,335 --> 00:11:49,820 Going to the form in the browser, 154 00:11:49,820 --> 00:11:54,030 you now see two additional rows added into our form. 155 00:11:54,030 --> 00:11:57,030 The first name and the last name be added in the previous part of the exercise. 156 00:11:57,030 --> 00:11:59,050 So, here, we have the contact telephone number, 157 00:11:59,050 --> 00:12:01,805 which is divided into the area code and telephone number. 158 00:12:01,805 --> 00:12:06,515 Note how we have used the column classes to position these two in 159 00:12:06,515 --> 00:12:11,650 the form itself and then the email field here. 160 00:12:11,650 --> 00:12:15,775 Let's take a look at the same thing on an extra small screen size. 161 00:12:15,775 --> 00:12:18,465 So, when you go to an extra small screen size, 162 00:12:18,465 --> 00:12:20,800 you'll notice how the form itself is laid out. 163 00:12:20,800 --> 00:12:24,690 You'll see that the label is on the top and then the field itself at the bottom. 164 00:12:24,690 --> 00:12:26,055 So first name, last name. 165 00:12:26,055 --> 00:12:28,605 Note how the contact telephone number 166 00:12:28,605 --> 00:12:33,160 entry fields are positioned using the column classes, 167 00:12:33,160 --> 00:12:34,855 so the area code here, 168 00:12:34,855 --> 00:12:36,085 and the telephone number, 169 00:12:36,085 --> 00:12:38,410 and then the email ID here. 170 00:12:38,410 --> 00:12:41,630 Now, we'll continue with the exercise. 171 00:12:41,630 --> 00:12:44,145 Continuing in the next step, 172 00:12:44,145 --> 00:12:49,680 we will add in a checkbox and then thereafter we will add in a select two or four. 173 00:12:49,680 --> 00:12:51,680 To add a checkbox, 174 00:12:51,680 --> 00:12:57,590 let's just copy this form group here so that we will add it as another row here, 175 00:12:57,590 --> 00:13:01,595 and then add in the form group div here, 176 00:13:01,595 --> 00:13:04,970 and then close off the div here. 177 00:13:04,970 --> 00:13:08,860 And then inside this form group row, 178 00:13:08,860 --> 00:13:11,280 so this gives us one more row in the form. 179 00:13:11,280 --> 00:13:13,330 So inside this form group row, 180 00:13:13,330 --> 00:13:16,120 let me add in first the checkbox. 181 00:13:16,120 --> 00:13:22,655 So, to do that, we'll add in a div with the class="col-md-6" 182 00:13:22,655 --> 00:13:26,610 so you'll see that this is going to occupy 183 00:13:26,610 --> 00:13:31,695 six columns in the medium to extra large screen size, 184 00:13:31,695 --> 00:13:36,800 and then offset-md-2, so this will offset it to 185 00:13:36,800 --> 00:13:43,850 the right by two columns and then display the checkbox in there. 186 00:13:43,850 --> 00:13:48,490 Now, inside here, to add a checkbox, 187 00:13:48,490 --> 00:13:58,170 we'll say div with the class="form-check" and 188 00:13:58,170 --> 00:14:07,200 inside this form-check class we'll add in an input type="checkbox" 189 00:14:07,200 --> 00:14:17,990 and the class="form-check-input" and then let me go to the next line and then 190 00:14:17,990 --> 00:14:24,400 say name="approve" and the 191 00:14:24,400 --> 00:14:32,560 id="approve" and the value is an empty string there. 192 00:14:32,560 --> 00:14:35,360 And to this checkbox, 193 00:14:35,360 --> 00:14:36,735 let's add a label. 194 00:14:36,735 --> 00:14:38,380 So, to add a label, 195 00:14:38,380 --> 00:14:41,940 we'll go and add in label 196 00:14:41,940 --> 00:14:50,885 class="form-check-label" and then this label 197 00:14:50,885 --> 00:14:53,775 is for this checkbox that we just added. 198 00:14:53,775 --> 00:15:00,270 So, that's why we'll say for="approve" so notice that for the checkbox, 199 00:15:00,270 --> 00:15:03,635 we had given the name and the ID as approve so that's why here, 200 00:15:03,635 --> 00:15:07,090 we'll be save for the label for approve. 201 00:15:07,090 --> 00:15:09,560 And then inside this label, 202 00:15:09,560 --> 00:15:19,250 we'll specify the content as 'May we contact you?' 203 00:15:19,250 --> 00:15:24,240 And then save the changes and let's go and take a look at our form. 204 00:15:24,240 --> 00:15:25,810 Going to the web page, 205 00:15:25,810 --> 00:15:30,970 you can now see that we have added in a checkbox along with a label here and notice 206 00:15:30,970 --> 00:15:36,685 that this label is in bold because of the use of the "strong" tag there, 207 00:15:36,685 --> 00:15:40,270 and we did offset-md-2. 208 00:15:40,270 --> 00:15:42,850 So that's why we push this checkbox all the way here. 209 00:15:42,850 --> 00:15:46,750 This doesn't have a label here but instead this is pushed right here, 210 00:15:46,750 --> 00:15:50,765 so that's the reason for using offset-md-2 here, 211 00:15:50,765 --> 00:15:56,980 and this one occupies md-6 so six columns here. 212 00:15:56,980 --> 00:15:59,180 We are not done with that yet. 213 00:15:59,180 --> 00:16:03,075 I'm going to add in the next part here, 214 00:16:03,075 --> 00:16:06,995 which is a select box there. 215 00:16:06,995 --> 00:16:11,230 So I will apply one more div here with 216 00:16:11,230 --> 00:16:20,475 the class="col-md-3 offset-md-1" here. 217 00:16:20,475 --> 00:16:23,375 And inside this div, 218 00:16:23,375 --> 00:16:27,160 I'm going to define a select. 219 00:16:27,160 --> 00:16:30,590 So, again, from your knowledge of HTML, 220 00:16:30,590 --> 00:16:33,260 you know what a select does for you. 221 00:16:33,260 --> 00:16:36,635 Now, the select will apply 222 00:16:36,635 --> 00:16:45,920 the classes form control so this is Bootstrap class that I'm applying to the select here, 223 00:16:46,130 --> 00:16:49,245 and close off the select. 224 00:16:49,245 --> 00:16:53,745 And inside here, I need to give the options for the select. 225 00:16:53,745 --> 00:16:57,500 So, I'm using a simple select here, 226 00:16:57,500 --> 00:17:02,570 and so the first one is an option 227 00:17:02,570 --> 00:17:09,060 for telephone or email and close off the option. 228 00:17:09,060 --> 00:17:13,735 So, this creates a select element in my form, 229 00:17:13,735 --> 00:17:15,310 which has two options; 230 00:17:15,310 --> 00:17:17,080 telephone and email, so, 231 00:17:17,080 --> 00:17:18,505 let's save the changes. 232 00:17:18,505 --> 00:17:20,180 Taking a look at our web page, 233 00:17:20,180 --> 00:17:26,960 you can now see how the telephone and email select box is now created here so this 234 00:17:26,960 --> 00:17:34,025 allows me to select which one to do and then you can also check the checkbox like this. 235 00:17:34,025 --> 00:17:36,730 So, this finishes the next row. 236 00:17:36,730 --> 00:17:39,040 Let's add in one more row, 237 00:17:39,040 --> 00:17:42,960 which will allow the user to actually type in their feedback. 238 00:17:42,960 --> 00:17:47,535 So, I will use a text area for formatting that. 239 00:17:47,535 --> 00:17:51,615 For the next one, I'm going to use a text area. 240 00:17:51,615 --> 00:17:58,840 So, what I'm going to do is I'm just going to go up and copy this email part of it. 241 00:17:58,840 --> 00:18:02,115 I'm too lazy to keep typing in everything all the time. 242 00:18:02,115 --> 00:18:06,950 So, I tend to do cut and paste wherever feasible, but for this one, 243 00:18:06,950 --> 00:18:15,670 the label should be feedback and the column form label, 244 00:18:15,670 --> 00:18:24,575 and then the actual text is, "Your feedback here." 245 00:18:24,575 --> 00:18:26,450 So that is the label. 246 00:18:26,450 --> 00:18:28,795 And then, in here, the second one, 247 00:18:28,795 --> 00:18:32,530 I'm going to format this one. 248 00:18:32,530 --> 00:18:34,140 Instead of input type, 249 00:18:34,140 --> 00:18:39,085 I'm going to change that to a text area, 250 00:18:39,085 --> 00:18:42,815 and then I don't need the type there. 251 00:18:42,815 --> 00:18:51,400 Text area, the class is still form control and the ID is feedback. 252 00:18:51,400 --> 00:18:58,890 Name is feedback and the placeholder is not needed 253 00:18:58,890 --> 00:19:02,880 here and instead change it to how many of rows I 254 00:19:02,880 --> 00:19:06,890 want to give from the feedback for the text area? 255 00:19:06,890 --> 00:19:10,340 So I'll say 12 rows and then close off text. 256 00:19:10,340 --> 00:19:15,215 So notice how I have included the textarea in my form. 257 00:19:15,215 --> 00:19:16,680 Save the changes. 258 00:19:16,680 --> 00:19:19,560 Take a look. Going to my web page, 259 00:19:19,560 --> 00:19:23,910 now you see my form taking its complete shape here. 260 00:19:23,910 --> 00:19:25,470 You have the first name, last name, 261 00:19:25,470 --> 00:19:28,050 telephone, email there, and then the feedback. 262 00:19:28,050 --> 00:19:30,720 The text area of 12 rows. 263 00:19:30,720 --> 00:19:36,080 Now, you will need a button which the user should click to submit their feedback. 264 00:19:36,080 --> 00:19:40,715 So, lets add in a submit button to this form. 265 00:19:40,715 --> 00:19:44,030 Going back to the form again, 266 00:19:44,030 --> 00:19:47,195 create one more row here by using 267 00:19:47,195 --> 00:19:55,715 the div here with the form group row here, 268 00:19:55,715 --> 00:19:59,405 and inside here I'm going to add in a button here. 269 00:19:59,405 --> 00:20:02,300 So, I would say, div 270 00:20:02,340 --> 00:20:10,500 class="offset-md-2" because I want my button to be 271 00:20:10,500 --> 00:20:13,880 positioned right below all those fields that I 272 00:20:13,880 --> 00:20:17,850 have here so the left two columns are being used for the label. 273 00:20:17,850 --> 00:20:21,750 So the submit button doesn't need a label so I'm just going to push 274 00:20:21,750 --> 00:20:25,890 it to the right here and then I would 275 00:20:25,890 --> 00:20:35,090 say "col-md-10" so this would occupy the remaining 10 columns there. 276 00:20:35,090 --> 00:20:37,310 And then inside those div, 277 00:20:37,310 --> 00:20:40,045 I'm going to add in a button there. 278 00:20:40,045 --> 00:20:45,020 So, when you add in a button to your form, 279 00:20:45,020 --> 00:20:50,190 use the button tag here with a type submit. 280 00:20:50,190 --> 00:20:56,440 So, this is the submit button for your form there and class. 281 00:20:56,440 --> 00:21:02,890 Remember button classes, button primary, 282 00:21:02,890 --> 00:21:07,890 so this would create a dark blue button in your form and 283 00:21:07,890 --> 00:21:15,110 then close off the button there, 284 00:21:15,110 --> 00:21:19,805 and then I'm going to simply go in and inside the button, 285 00:21:19,805 --> 00:21:28,725 I'll give the name as "Send Feedback" and then save the changes. 286 00:21:28,725 --> 00:21:31,295 Now, our form is complete. 287 00:21:31,295 --> 00:21:36,600 So, let's take a look at the final version of our form. 288 00:21:36,600 --> 00:21:38,660 Going to our web page, 289 00:21:38,660 --> 00:21:40,875 you can now see the form completed. 290 00:21:40,875 --> 00:21:43,135 All these fields we have seen already, 291 00:21:43,135 --> 00:21:46,610 the button at the bottom with the wording "Send 292 00:21:46,610 --> 00:21:51,265 Feedback" and the dark blue-colored button because of the use of button "primary". 293 00:21:51,265 --> 00:21:58,870 So, this completes the form that we wanted to create in our web page. 294 00:21:58,870 --> 00:22:02,380 With this, we complete this exercise, 295 00:22:02,380 --> 00:22:07,135 where we have seen how we can construct a form and include it into our web page. 296 00:22:07,135 --> 00:22:10,130 You'll be working with forms in some of 297 00:22:10,130 --> 00:22:13,720 the later exercises including your second assignment. 298 00:22:13,720 --> 00:22:19,310 This is a good time for you to do a good comment with the message forms.