Landing Page – lesson 7


In this lesson we'll take care of Contact Section.

Step 1

As always, we start from 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">
    <div class="md-form form-sm"> <i class="fa fa-user prefix grey-text"></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 grey-text"></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 grey-text"></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 grey-text"></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 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 make our inputs smaller. You can remove them if you prefer a bigger version.

.fa-envelope within i element is an icon. .prefix class makes it active when user clicks on input. If you want to change the icon, you can use one of 600+ icons available in MDB.

input is an input itself. That's a crucial element for collecting data from users.

label is, well, a label. Not much to talk about it.

What's important, input has an ID (id="form3") and label refers to this ID (for="form3"). That allows MDB launch an animations, and when you click on the input you will see , that label smoothly moves up.

Below first 3 inputs of our forms (which are pretty much the same) you can notice some different kind of input - textarea. textarea is a special kind of input, predefined for collecting bigger set of data (like message).

At the end of our form there is a simple button.

That's it!


Previous lesson Download 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.