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!


Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits