WEBVTT

00:00:07.790 --> 00:00:14.720
In this video we're going to learn how to create a nice looking form using BHB and bootstrap.

00:00:14.880 --> 00:00:24.930
So the way is going to work is the user will input their name email address and write a message and

00:00:24.930 --> 00:00:30.180
then if everything is fine they be able to click on the Send Message button and send us an email using

00:00:30.230 --> 00:00:34.750
BHB and they will be redirected to thank you page.

00:00:34.770 --> 00:00:35.840
OK.

00:00:35.910 --> 00:00:45.030
So first of all we are going to create the form using a simple and bootstrap and then we're going to

00:00:45.030 --> 00:00:48.610
write some code to filter the data.

00:00:48.630 --> 00:00:51.250
So we're going to clean the data and then validate it.

00:00:51.750 --> 00:00:56.730
If there are any errors we are going to print an error message just like this.

00:00:57.240 --> 00:01:03.170
And if everything is fine we are going to send the email and redirect them to the thank you page.

00:01:03.200 --> 00:01:03.980
OK.

00:01:04.320 --> 00:01:16.380
So first of all let's start by creating the context form using email and was dropped in the previous

00:01:16.830 --> 00:01:19.160
videos we have been using a bootstrap template.

00:01:19.170 --> 00:01:22.390
But we didn't really use bootstrap.

00:01:22.410 --> 00:01:23.970
We didn't need this at all.

00:01:23.970 --> 00:01:26.570
So now we need to make sure that bootstrap is working.

00:01:26.820 --> 00:01:33.150
So since we're not using a CD and you can you can use a CD and if you want to but since we are not using

00:01:33.150 --> 00:01:34.180
one.

00:01:34.410 --> 00:01:41.610
So we are going to make sure that we've crossed the bootstrap folders in our workspace.

00:01:41.750 --> 00:01:42.220
OK.

00:01:42.540 --> 00:01:49.540
So if you go to your file FCP just make sure that you copy the folders inside the workspace in there

00:01:49.540 --> 00:01:50.210
.

00:01:50.400 --> 00:01:53.580
So I'm going to go to the folder on my computer

00:01:58.950 --> 00:02:02.400
and we're going to copy the bootstrap folders from that.

00:02:02.490 --> 00:02:09.720
OK so if you click on the right arrow you can copy all the folders

00:02:13.740 --> 00:02:16.380
and you can you can see them now on our expert workspace.

00:02:16.380 --> 00:02:16.790
OK.

00:02:16.980 --> 00:02:24.900
So now we've got bootstrap up and running so we can use all the bootstrap analyses and we can build

00:02:24.930 --> 00:02:29.060
a responsive form.

00:02:29.460 --> 00:02:38.250
OK so in this session we're going to have plenty of code on our screen so I'm just going to push the

00:02:39.210 --> 00:02:45.200
container div to the left so that we can have enough space.

00:02:45.210 --> 00:02:49.920
Since I'm using half screen so we're going to have enough space to write our code and it's going to

00:02:49.920 --> 00:02:51.770
be more readable.

00:02:52.380 --> 00:02:54.330
OK.

00:02:54.330 --> 00:03:04.770
So first to create our phone we are going to create a row and then we're going to use

00:03:07.950 --> 00:03:13.700
10 10 columns OK for our form.

00:03:13.710 --> 00:03:17.180
We're going to leave the other two outside.

00:03:17.270 --> 00:03:17.980
OK.

00:03:18.150 --> 00:03:24.780
So if you remember got 12 columns in the grid system so we're going to be using 10 and we're going to

00:03:24.780 --> 00:03:27.570
leave to all the edges.

00:03:27.600 --> 00:03:28.870
OK.

00:03:29.100 --> 00:03:30.120
Go ahead and do this.

00:03:30.150 --> 00:03:35.890
So first of all let's have a row.

00:03:37.260 --> 00:03:39.550
So it's a div of class row.

00:03:40.120 --> 00:03:42.830
OK.

00:03:42.900 --> 00:03:46.610
And then inside the row we're going to create another Dave

00:03:50.060 --> 00:03:53.550
and this is a plus.

00:03:53.550 --> 00:04:03.200
So first of all we want to skip one column OK and then use 10 columns.

00:04:03.200 --> 00:04:04.080
So to do that

00:04:07.740 --> 00:04:12.180
we are going to use a class column.

00:04:12.180 --> 00:04:18.170
So we're going to go for small screen so small offsets.

00:04:18.540 --> 00:04:30.920
OK one for one column and then we're going to be using 10 columns so we do column some small than 10

00:04:30.940 --> 00:04:31.500
.

00:04:32.040 --> 00:04:35.110
OK.

00:04:35.520 --> 00:04:36.100
All right.

00:04:36.270 --> 00:04:44.520
And let's add another close contacts form that we're going to use to style our form.

00:04:45.370 --> 00:04:49.900
Let's add some styling to our form.

00:04:51.210 --> 00:04:57.010
So we're going to give it a give is a border

00:05:01.990 --> 00:05:11.200
so let's give it one pixel for the border with Mexico for a solid style and let's pick up a purple color

00:05:13.690 --> 00:05:14.290
for the border

00:05:16.890 --> 00:05:18.780
something like this.

00:05:19.390 --> 00:05:20.340
OK.

00:05:21.130 --> 00:05:28.210
OK let's check to see anything at the moment because there is no input.

00:05:28.210 --> 00:05:29.820
There is no content in sight.

00:05:30.160 --> 00:05:30.400
OK.

00:05:30.400 --> 00:05:36.340
Anyway so let's right let's have a heading inside the Dave

00:05:39.730 --> 00:05:48.230
saying contact us and know if we refresh so you can see our Dave.

00:05:48.840 --> 00:05:49.630
Let's add

00:05:53.020 --> 00:05:53.860
a margin up

00:05:56.860 --> 00:05:59.410
of 50 pixels for example

00:06:00.430 --> 00:06:05.630
.

00:06:10.550 --> 00:06:13.570
OK.

00:06:16.970 --> 00:06:18.550
OK looks fine.

00:06:18.880 --> 00:06:19.780
OK.

00:06:20.320 --> 00:06:31.420
And finally let's give it a broader radius and let's go for example for 15 pixels.

00:06:32.560 --> 00:06:36.720
So if you visit a page that looks nice.

00:06:37.170 --> 00:06:40.190
Yes.

00:06:42.400 --> 00:06:47.270
You know it looks in Gaskill looks fine.

00:06:48.280 --> 00:06:52.410
OK.

00:06:53.610 --> 00:06:53.880
OK.

00:06:53.890 --> 00:07:00.120
So now we are ready to create the form.

00:07:00.250 --> 00:07:01.540
OK.

00:07:02.690 --> 00:07:11.800
So let's go ahead and do that that's all right.

00:07:14.890 --> 00:07:15.780
OK.

00:07:16.030 --> 00:07:19.310
So you're going to use the form type.

00:07:20.050 --> 00:07:25.390
So our form is going to send the inputs to the same file.

00:07:25.390 --> 00:07:26.310
We are working in.

00:07:26.590 --> 00:07:31.460
So if you want to set the action attributes you can do that.

00:07:32.000 --> 00:07:35.150
If you don't then we're going to be anyway using the same file.

00:07:35.260 --> 00:07:35.980
OK.

00:07:35.980 --> 00:07:41.200
So this file is called 20 dots Contacts form does BHB

00:07:42.710 --> 00:07:45.450
.

00:07:45.700 --> 00:07:46.250
OK.

00:07:46.280 --> 00:07:49.720
And the method is going to be post.

00:07:50.760 --> 00:07:52.290
OK.

00:07:53.590 --> 00:07:53.860
OK.

00:07:53.860 --> 00:07:57.770
So our first input is going to be the name.

00:07:57.770 --> 00:08:01.510
So we're going to put it inside a form group.

00:08:02.110 --> 00:08:03.300
OK.

00:08:03.310 --> 00:08:08.570
So it's a div class form group.

00:08:11.140 --> 00:08:11.900
OK.

00:08:11.910 --> 00:08:15.750
And let's let's have an input there.

00:08:16.650 --> 00:08:23.940
So it's going to be a text input so the type is text.

00:08:23.950 --> 00:08:27.450
We're going to give it a name.

00:08:27.520 --> 00:08:28.400
OK.

00:08:28.660 --> 00:08:31.060
We're going to call its name.

00:08:31.600 --> 00:08:34.700
And also are you going to give you an ID for the label.

00:08:34.770 --> 00:08:41.230
I'm going to call it name as well and a placeholder if you want to.

00:08:41.370 --> 00:08:43.520
Same name.

00:08:43.840 --> 00:08:46.550
OK.

00:08:47.020 --> 00:08:47.440
And

00:08:51.130 --> 00:08:57.710
we need to give you a class form control.

00:08:58.150 --> 00:09:00.660
OK.

00:09:01.090 --> 00:09:02.840
All right.

00:09:03.250 --> 00:09:05.170
Now let's add a label to these inputs

00:09:05.170 --> 00:09:10.780
.

00:09:12.790 --> 00:09:17.680
We don't really actually need the placeholder but so if you don't want it if you don't see it I can

00:09:17.680 --> 00:09:21.220
just leave it for now.

00:09:21.340 --> 00:09:26.730
OK so the label is going to say name OK.

00:09:26.800 --> 00:09:30.180
It's label for me.

00:09:30.370 --> 00:09:32.050
So if you check out a page.

00:09:32.470 --> 00:09:37.620
No of course first improver they explain.

00:09:37.660 --> 00:09:39.910
All right so now let's move to the second.

00:09:39.970 --> 00:09:41.390
Second inputs.

00:09:42.160 --> 00:09:42.940
So e-mail

00:09:46.070 --> 00:09:48.560
let's just copy paste the first one

00:09:51.410 --> 00:09:55.570
so the label is going to be for email.

00:09:55.880 --> 00:10:05.220
The label is email type is email the email ID email placeholder.

00:10:05.250 --> 00:10:07.160
It's going to be email.

00:10:08.100 --> 00:10:08.780
OK.

00:10:09.080 --> 00:10:11.010
And that's it.

00:10:12.060 --> 00:10:13.360
OK.

00:10:13.670 --> 00:10:18.250
And finally we're going to have the message inputs.

00:10:18.470 --> 00:10:30.000
So again we're going to have a form group on the label is going to be for message

00:10:33.510 --> 00:10:36.480
this voice message there.

00:10:36.810 --> 00:10:38.850
OK.

00:10:38.930 --> 00:10:43.410
And now we're going to need to use a text area.

00:10:44.000 --> 00:10:44.720
OK.

00:10:44.930 --> 00:10:45.910
Rather than it puts

00:10:48.960 --> 00:10:54.870
text area and you need to close that site for text area.

00:10:55.290 --> 00:10:56.610
OK.

00:10:57.050 --> 00:11:10.970
So the we need to give it a glass of form control so that's fine need to give it a name ID as well

00:11:14.590 --> 00:11:16.570
but no placeholder.

00:11:17.370 --> 00:11:24.930
OK so the name is going to be a message ID message.

00:11:27.270 --> 00:11:28.420
OK.

00:11:28.790 --> 00:11:31.110
We don't have any type there.

00:11:32.170 --> 00:11:33.010
OK.

00:11:33.030 --> 00:11:35.090
So let's have

00:11:37.970 --> 00:11:39.340
the number of rows as well.

00:11:39.360 --> 00:11:42.570
You can set it to five.

00:11:42.800 --> 00:11:48.560
So if you're a fresh page now of course our message input as well okay.

00:11:48.950 --> 00:11:52.140
And finally now we going to the Send Message button.

00:11:52.520 --> 00:11:54.240
OK.

00:11:55.040 --> 00:11:55.520
So

00:12:00.140 --> 00:12:01.430
we can do other inputs

00:12:09.510 --> 00:12:10.620
of type submit

00:12:13.460 --> 00:12:28.810
and give it a name submit and we're going to sign is using the button and basons Access classes.

00:12:28.840 --> 00:12:29.110
OK.

00:12:29.120 --> 00:12:30.500
So if we refresh

00:12:33.210 --> 00:12:38.930
OK let's make it bigger and also give us values and message.

00:12:38.930 --> 00:12:46.940
So we're going to use the class Button lodge to make it's become OK and we're going to give it a value

00:12:48.700 --> 00:12:49.670
send a message

00:12:52.390 --> 00:12:56.510
should look better.

00:12:56.880 --> 00:12:58.850
It's exactly the same as

00:13:02.330 --> 00:13:03.440
the reference form.

00:13:03.740 --> 00:13:04.680
OK.

00:13:05.120 --> 00:13:11.450
So we are done creating the form using a shemale and trunk.

00:13:11.990 --> 00:13:24.500
So now we are ready to filter and validates the user inputs.

00:13:24.680 --> 00:13:26.380
Now this we have created our form.

00:13:26.420 --> 00:13:34.490
We are ready to write the code so our code is going to first check if the user has submitted the form

00:13:34.510 --> 00:13:35.020
.

00:13:35.660 --> 00:13:44.420
Then we are going to check if any of the required fields is missing and then we are going to clean those

00:13:44.420 --> 00:13:48.060
fields and validate them if there are any errors.

00:13:48.130 --> 00:13:51.120
We are going to display an error message just like this.

00:13:51.170 --> 00:13:59.360
Otherwise we are going to send the email and redirect the user to the thank you page so we can see what

00:13:59.370 --> 00:14:02.860
the error message is displayed right under the header.

00:14:02.880 --> 00:14:03.400
OK.

00:14:03.560 --> 00:14:07.620
So our PSAP code is going to go right after the header.

00:14:07.730 --> 00:14:19.810
So if we go right after the H-1 Hading we can write our BHB sagging and start writing our code.

00:14:19.820 --> 00:14:25.110
So first of all let's have a look at the structure of our code.

00:14:25.110 --> 00:14:31.550
So the way it's going to work is that we are going to check first

00:14:34.430 --> 00:14:37.920
if the user has submitted the form.

00:14:38.780 --> 00:14:43.870
OK.

00:14:46.640 --> 00:14:51.650
So if yes then we are going to check if there are any errors.

00:14:51.650 --> 00:14:52.150
OK.

00:14:52.250 --> 00:14:58.850
So we're going to go through all these fields check if something is missing or if a certain field is

00:14:58.860 --> 00:15:00.280
there but not valid.

00:15:00.440 --> 00:15:06.070
OK so we're going to check for errors.

00:15:06.860 --> 00:15:14.670
So after we checked for errors then we are going to find out whether we have any errors or not.

00:15:14.660 --> 00:15:22.330
So if we have if there is any errors or there are any errors.

00:15:23.620 --> 00:15:24.740
OK.

00:15:25.190 --> 00:15:33.100
If there are any errors we are going to print the error message on the screen OK.

00:15:33.530 --> 00:15:44.380
Otherwise if there are no errors then we are going to send the e-mail OK.

00:15:44.960 --> 00:15:52.190
But once we send the e-mail we still we're still going to check if the e-mail or the the mail has been

00:15:52.190 --> 00:15:53.250
successful or not.

00:15:53.420 --> 00:16:05.520
So so are we going to check if success OK then we can redirect the user to the thank you page.

00:16:05.540 --> 00:16:06.020
OK.

00:16:06.230 --> 00:16:10.460
But for now we are still going to print a success message.

00:16:10.460 --> 00:16:16.980
OK for now so we're going to preens success message.

00:16:17.250 --> 00:16:17.910
OK.

00:16:17.940 --> 00:16:25.860
Otherwise if the mail has not been successful then we are going to print this time.

00:16:25.860 --> 00:16:28.250
A warning message.

00:16:29.450 --> 00:16:31.950
OK.

00:16:31.960 --> 00:16:32.850
All right.

00:16:33.260 --> 00:16:33.760
So

00:16:36.500 --> 00:16:40.540
let's start our code from the beginning.

00:16:41.300 --> 00:16:43.750
OK.

00:16:43.910 --> 00:16:51.340
Before we do that we notice that in all cases we are going to print a message at the end.

00:16:51.620 --> 00:16:52.280
OK.

00:16:52.550 --> 00:17:01.310
So a good idea would be to have a variable that we're going to call result's message and we're just

00:17:01.310 --> 00:17:07.190
going to customize this results miss a message depending on whether we have errors or we have a success

00:17:07.220 --> 00:17:07.960
or warning.

00:17:08.120 --> 00:17:08.720
OK.

00:17:08.720 --> 00:17:17.160
So let's have a set price at the end saying preens results message.

00:17:17.870 --> 00:17:18.280
OK