Contact section and inputs / forms

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="fa 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="fa 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="fa 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="fa fa-pencil 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="fa fa-paper-plane-o ml-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!