Hello everyone and welcome back to our bootstrap course.
In this lecture we're gonna be adding a contact form just to the bottom of this website here below.
All of these services.
Let's go ahead and open our each Jamal and close our output tab and scroll down here to where we have
our contact forms should be at the bottom of our e-mail.
Yes right here we have our contact form just above the footer.
So let's go ahead and start building this out.
Currently we have the ideas contact and a class of contact which is fine.
This is a bootstrap class.
And we can also add a class and B four and five.
Now we will add margin and padding of 4 5 and 5.
So go ahead and add those bootstrap classes.
And now we are going to add a heading that will say contact us and then a prompt for the user to enter
in their information in a message to your company.
So let's go ahead and make a header to first.
You can make it a header to the class each to a responsive.
This is a bootstrap class as well as font weight bold and text center.
This will allow you to Bolden and center the text without using any CFS as well.
Let's add some margin to the top and bottom with the integer 4.
And we'll see how that looks and if we need to adjust this week we'll adjust it as well.
Let's go ahead and close at each to tag.
And then we can add some taxing.
Contact us.
So now we have the header set up for the contact form.
Let's go ahead and add a description so I can use a paragraph tacked openness in the center of the text
with a bootstrap class tech center.
You're gonna make it responsive by writing w responsive.
Also going to give it the margin on the left and right to auto which will center this paragraph.
And we're also going to give it the margin border of five.
And now we can put in some text here into this paragraph tag as do you have any questions.
Contact us and our team will be happy to help within two business days.
So that is a prompt to the user to enter some message to your company and now below that we can add
our contact form input fields.
So we're gonna have all this be inside of rows and columns because those will be responsive.
So let's go ahead and open up a new row with div class equals row and go ahead and close it off immediately
so that we don't forget.
And now we're going to set up a grid column and say div class equals column and the nine and B and D
0 will remove any borders and outlines and then we'll set the margin four to five and we can go ahead
and close off that div as well.
And now we're going to open up a form using the HMO form element and we're gonna give it the idea of
contact form and its name will be contact form as well as we're gonna set the action of what will happen
when the user fills in the contact form and that will be we'll send it off to mailed out peach Pete.
So we're not gonna be working with backend in this course but if you were a front end developer and
you were handing off your design to a back end developer then you're setting up this action of what
will happen when the user fills in the end perform which is typically that the data that is put into
the form is sent to a database which would be held in this mail that peach file and then I'm gonna set
the method to equal post.
Now this is again part of the back end of what would happen a post request would be sent with the data.
Now you don't have to know this is necessarily because where does the front end course.
But this is what is typically also set up with every contact form in order to at least set up the front
end part of collecting data.
Because if you don't collect data like this then the contact form is useless the data will just disappear
as soon as user hits send it it can go ahead and close off that form immediately as well.
So now we have a contact form let's now set up these rows and columns for each of the different inputs.
So we're going to allow the user to input their name their email maybe their phone number their message
for sure.
Okay so let's go ahead and set up div class to be a road to contain all that information.
And then here we're gonna set up another column give it some margin and we're gonna close off that div
immediately.
Now in here to open up a div class of M.D. forms this is a bootstrap class that will make a form.
We can set the boarder to 0 when we close off that div.
Now in here we're going to make an input and input element which will allow you to take an input and
it will create an input field on the type is going to be text.
There are different types of input fields.
There can be numbers or email et cetera.
But we're going to start with text because this is going to be the user's name first.
And the idea is going to be name the name of the input is going to be name as well.
Name and I.D. may look similar but name is used for the data collection part whereas I.D. is used for
the styling as well as the anchoring.
If you were to use this as an anchor link you can also give it the cost of form control and then we're
also going to give it a label.
Now you don't need to close this input field because input tags are one of those self closing tags.
Let's also make a label for every input field you should also have a label which will prompt the user
of what they should put into that specific input field so label for name is where that name comes in.
So we can ask changes to user name to make this more clearer.
So name equals user name refers to the name of the input.
And so then when the label says that it's for user name it means that this label should be attached
to this input field and you'll see how that looks and we look at it in the output.
This will be immediately above the input field.
So this label is for the user name input and we don't get any class for now at least.
And we can put a name as the label and that will be the label text.
Okay.
And now we have the rest of them closed off here.
So what we can do next.
We also have to close off this form div kind of do that here.
Excellent.
We closed off this one because of this one just good.
We haven't closed off this row.
So let's go ahead and close the row.
So now we have one input field for the users name.
We're going to follow this similar structure to add more input fields into this rows that the user can
send us more information.
Let's go ahead and test what this looks like in the output so far.
So if you click on output and then scroll all the way down we'll see the contact form down here.
Now we're having a bit of centering issues on mobile we can check what it also looks like on the web
and on the web it looks like it's fine without any centering issues.
We can go ahead and fix all of those by moving the borders if we have too much of padding on the x axis
then that is what will create those padding issues where it looks a bit smushed on the left and right.
But we can fix those all at the end once we have all the all the forms and the fields put in so we're
gonna add a few more fields here for email and a submit button as well.
So let's go ahead and hide the output and add in the rest of those elements.
So what we're going to need here next we can have another column similarly to this but the column this
time will be for the email instead of for the name.
So just below the column for the name make another day of class column M.D. 6 and then this one tree
closing off and in here this is going to be for the email.
So it's filing a similar structure because of the same class empty form and we can give it maybe 0 as
well just for consistencies sake and then we can close close off that div here and we're gonna make
an input of type text again we can also make it of type email can stick to text for now and that idea
is going to be email.
Its name is also going to be email and its class is going to be form control just like for your name
and now for the input number itself closing so we don't have to close it but we do have to add a label
for each input for accessibility sake having a label is very useful for every input it makes it more
clear for the user because it will tell them what they should put into the input field and on some browsers
a place holder won't work.
So sometimes you'll see place holder being added to the input which will create some text inside of
the form but placeholders aren't visible on all browsers which is why a label is a better idea than
a placeholder.
So we're going to have a label for email and this refers to the name of the input over here and we're
also going to add the text that should be inside of the label so we can close off the label and then
inside of the tag put in something like email to prompt the user to enter their email and that is all
we need for the email column.
Now that was one row containing the name and the email we can add another row to contain the subject
and the actual message of the email.
So our column ends here and our row ends here and that means that inside of the form element we're going
to put in the row just down here you can add another row div class equals row and this will immediately
create another row below the first row and inside of the row you can put in columns.
So we're gonna make another column and we're splitting this up because we need these columns to be a
bit larger.
So there's gonna be a call and D twelve and I'm going to close off that div and now in here we can put
in the message or the subject to begin with.
You'll start with the subject of the email so the user can put in the email subject here.
We're gonna make another div with the same class empty form and empty zero and then we're going to close
off the half empty form and in here we're gonna put in an input again so input type equals text which
will create an input field.
And this time it's going to be subject of the email and the name also be subject.
So the Andy and name are the same which is fine because they are two different identifiers.
Then the class is going to be form control which is a bootstrap class and we're going to also add a
label for the subject price name and we don't have to add any class it's fine and we're going to close
that label tag and inside of here we're gonna put the text subject.
OK excellent so now we've just made another column here inside of a new row and that will be on its
own row.
Now every row has its call M.D. twelve or call and for column B six 12 is the maximum.
And that means that the subject line will take up the entire row six means that this current element
would take up half of the row.
So if you had called empty for then the element would take up a third of the row.
So let's test this and see how it looks for proof.
We can go to the output and we can scroll all the way down and you'll see we haven't name email and
subject.
Now they are all on their own column because this is mobile.
But if we open up e-mail you'll see that name and email both take up six in terms of six out of twelve
because each row is divided into twelve units and each one should take up six then subject takes up
twice the amount because we set it's called Empty 212 instead of six.
So that is how it's looking right now and let's go and add another input field here for the actual message.
So we're gonna hide the output and open e him out and down here.
Let's add another element.
So we are going to not add another column but instead add another row that way we can have it take up
the entire row.
So just below this row here we're going to add in another row div class row again or following exact
same structure as we have for the previous rows and columns.
We're making a div row and now inside we're gonna put a column and we're gonna make it the length twelve.
So it's width is 12 units of the row which is divided into twelve pieces.
So it'll take up 100 percent of the row and now inside of this column we're going to make another div
which has the class M.D. form and let's close off at and inside of here we're going to make an input
field again this time instead of using an input we're gonna need a larger area for the user to input
text because an input will create a single line input by default.
So a text area will create a multi line input and that's we want because we were expecting that the
message will be quite long from the user I'm gonna put the type of the text area to be texts just like
the type of the input and text area is just another form of input and we're gonna add an idea of message
though as the name message.
And now we can actually set the number of rules that we want the message to be so how long we want the
text area to allow for and display the message so we can add a number of rows such as two and we can
add a class which is going to be form control as well as M.D. text area because we're not using an input
this time we're using a text area and we have to go ahead and close off the text area tag because unlike
input it is not self closing.
We do however have to add a label and it's going to be for that message text area and text can be a
message and being closed off to leave label with the closing tag.
Okay excellent.
And now we're closing off the column and we've closed off the row and then this closes off the entire
form.
Okay great.
This should be everything that we need barring any syntax errors.
I think this looks great.
We can go ahead and test how this looks like.
However we are missing one thing right now we have the name the email the subject and the message but
you might be able to remember what we're forgetting and that is a send button.
So we're gonna need to add a button to allow the user to send their email and we also need the user's
e-mails.
That way we can email them back.
So let's add those two before we test how this look.
So just after the form ends we're going to add our Send button because the form contains all the inputs
but the button itself can be outside of the form.
So let's make a day of class and we can center it tech center and also give it the text and be left.
Let's close off that div immediately.
And now we're going to add an anchor class to make a button just as we have done previously.
And we can set its text to white immediately by saying text white and we're going to close off that
anchor tag immediately.
And now in after the class we're also going to say what will happen when the user clicks on the button.
So you can do that with on click.
And then inside of the double quotation marks you put document dot get element by I.D. contact form
dot submit.
So this is where we're getting into javascript because this is what is going to happen on the back end.
So when the user clicks the button the button will search the document and find the element by the I.V.
contact form.
So we'll find our contact form and then it will submit that contact form.
This is just preparation for any back end you might be doing.
Again we're not going to go into back into this course but this is preparation for it because the back
end is connected to the front end in some cases just like with buttons where you have to set what will
happen when a button is clicked not required but we're going to add it for for our sake.
OK.
So we have send as the button text and now we've closed off that David was perfect and let's see we
can also add a status class so we can just add that below.
And that's going to be actually outside of the button.
And that will give a status of the form to div class equals status and it will tell us if we submitted
it or not.
And that is everything that we need to make that button the send button.
So now the user can click send.
And we also want to finally add an email so we can add that just below here.
We're going to add it as he did class call and D three.
So that means its width will be three out of the twelve units of the row and we can center its text
as well and close off that div.
And Anthony here we're going to allow the user to put in their email and we're gonna do this with an
unordered list and the class is going to be a list on styled and B zero.
And then we're gonna close off that you all tag and in here we're going to open a new list item and
we can close it off immediately and we're going to set here is an eye class.
There's going to be a farce if a globe.
So this will make a icon and we can set it's empty and it's size using the empty NFA classes of bootstrap.
And then finally just below the icon we can have them enter in their email.
So we're going to actually make this a paragraph tag and I'm gonna put in yellow at email dot com
OK so this is going to be referring to the company email.
So that way they know who they're sending to.
So this here is the user's e-mail.
And this here is where you would put in the company email so that the user knows where it's getting
sent off to and who they might want to put into their contact books that their response is and go to
spam for example.
Let's go ahead and test what this all looks like so far so we can go ahead and click on the output and
scroll all the way down.
And here we'll see we have our name our email subject and our message as well as a send button.
This looks quite good.
And we have our e-mail down here in case the user wants to copy this and send it in their own e-mail
provider instead of through our contact form.
And then if we want to test this through our HMO using the larger screen size it will look something
like this.
The email goes up here.
Besides the name and the e-mail and then we have the message labeled just down here which should be
just blown there.
Can fix that later.
OK.
Well other than that thank you all for watching.
We're going to pause the video here because that is enough for now.
And in the next lecture we're going to work on fixing up these padding which has a little bit too much
padding on the side as well as aligning this contact us to just fine tuning.
Typically it's a good idea to set up everything and then fine tune afterwards you have all your setup
quite done.
Other than that.
Thank you all for watching and we will see you in the next lecture.