Author: Michal Szymanski
In this lesson we'll take care of the Contact Section.
Step 1
As always, we start by creating a basic grid structure. Paste the following snippet into the section
:
<!--Section: Contact-->
<section id="contact">
<!-- Heading -->
<h2 class="mb-5 font-weight-bold text-center">Contact us</h2>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-5 col-md-12">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-7 col-md-12">
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Contact-->
Step 2
Now we'll create a Contact Form.
Copy the code below and paste it inside the first column:
<!--Grid column-->
<div class="col-lg-5 col-md-12">
<!-- Form contact -->
<form class="p-5 grey-text">
<div class="md-form form-sm"> <i class="fas fa-user prefix"></i>
<input type="text" id="form3" class="form-control form-control-sm">
<label for="form3">Your name</label>
</div>
<div class="md-form form-sm"> <i class="fas fa-envelope prefix"></i>
<input type="text" id="form2" class="form-control form-control-sm">
<label for="form2">Your email</label>
</div>
<div class="md-form form-sm"> <i class="fas fa-tag prefix"></i>
<input type="text" id="form32" class="form-control form-control-sm">
<label for="form34">Subject</label>
</div>
<div class="md-form form-sm"> <i class="fas fa-pencil-alt prefix"></i>
<textarea type="text" id="form8" class="md-textarea form-control form-control-sm" rows="4"></textarea>
<label for="form8">Your message</label>
</div>
<div class="text-center mt-4">
<button class="btn btn-primary">Send <i class="far fa-paper-planeml-1"></i></button>
</div>
</form>
<!-- Form contact -->
</div>
<!--Grid column-->
Now we have to understand, step by step, what these elements do.
form
is a wrapper for our input elements. Such a construction allows us to gather data from users (like a
message
from our Contact Form).
.md-form
is a wrapper for inputs. Thanks to that class it has a Material Design look.
.form-sm
and .form-control-sm
makes our inputs smaller. You can remove them if you prefer
a bigger version.
.fa-envelope
within an i
element is an icon. .prefix
class makes it active
when a user
clicks on an input. If you want to change the icon, you can use one of the 600+
icons available in MDB.
input
is an input itself. This is a crucial element for collecting data from users.
label
is, well, a label. Not much more to say about it.
What's important is that , input
has an ID
(id="form3"
) and label
refers to this ID
(for="form3"
). That allows MDB to launch animations, and when you click
on the input you will see - that label
smoothly moves up.
Below the first three inputs of our forms (which are pretty much the same) you may notice some different kind of input -
textarea
.
textarea
is a special kind of input, predefined for collecting bigger sets of data (like message).
Finally, at the end of our form
there is a simple button.
To learn more about Inputs read our Inputs Docs.
You can also use one of predefined forms. To learn more read our Forms Docs.
That's it!
Previous lesson Live preview Next lesson
Spread the word: