Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

Forms

Almost every project needs a form. In this lesson, we will create a contact form and take a closer look at forms as such.

Basic input field

A basic example of the input field consists of the input element with specified ID and label element connected via this ID with the input. Both elements are wrapped in .form-outline class which provides a material design look. 

<div class="form-outline" data-mdb-input-init>
  <input type="text" id="form12" class="form-control" />
  <label class="form-label" for="form12">Example label</label>
</div>
Sizing

Set heights using classes like .form-control-lg and .form-control-sm. 

<div class="form-outline" data-mdb-input-init>
  <input type="text" id="formControlLg" class="form-control form-control-lg" />
  <label class="form-label" for="formControlLg">Form control lg</label>
</div>

<div class="form-outline" data-mdb-input-init>
  <input type="text" id="formControlDefault" class="form-control" />
  <label class="form-label" for="formControlDefault">Form control default</label>
</div>

<div class="form-outline" data-mdb-input-init>
  <input type="text" id="formControlSm" class="form-control form-control-sm" />
  <label class="form-label" for="formControlSm">Form control sm</label>
</div>
Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events. 

<div class="form-outline mb-3" data-mdb-input-init>
  <input
    class="form-control"
    id="formControlDisabled"
    type="text"
    placeholder="Disabled input"
    aria-label="disabled input example"
    disabled
  />
  <label class="form-label" for="formControlDisabled">Disabled</label>
</div>
Note: Inputs in MDBootstrap have a lot of options available. If you want to know more about them, read the input documentation page.
Forms

Every group of input fields should reside in a <form> element. MDB provides no default styling for the <form> element, but there are some powerful browser features that are provided by default.

Since MDB applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Login form

A basic example of a simple login form with input fields (email and password), checkbox and submit button.

Checkbox and "forgot password" link are positioned inline by using 2 column grid layout.

<form>
  <!-- Email input -->
  <div class="form-outline mb-4" data-mdb-input-init>
    <input type="email" id="form1Example1" class="form-control" />
    <label class="form-label" for="form1Example1">Email address</label>
  </div>

  <!-- Password input -->
  <div class="form-outline mb-4" data-mdb-input-init>
    <input type="password" id="form1Example2" class="form-control" />
    <label class="form-label" for="form1Example2">Password</label>
  </div>

  <!-- 2 column grid layout for inline styling -->
  <div class="row mb-4">
    <div class="col d-flex justify-content-center">
      <!-- Checkbox -->
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
        <label class="form-check-label" for="form1Example3"> Remember me </label>
      </div>
    </div>

    <div class="col">
      <!-- Simple link -->
      <a href="#!">Forgot password?</a>
    </div>
  </div>

  <!-- Submit button -->
  <button type="submit" class="btn btn-primary btn-block" data-mdb-ripple-init>Sign in</button>
</form>
Forgot password?
Register form

Typical register form with additional register buttons.

<form>
  <!-- 2 column grid layout with text inputs for the first and last names -->
  <div class="row mb-4">
    <div class="col">
      <div class="form-outline" data-mdb-input-init>
        <input type="text" id="form3Example1" class="form-control" />
        <label class="form-label" for="form3Example1">First name</label>
      </div>
    </div>
    <div class="col">
      <div class="form-outline" data-mdb-input-init>
        <input type="text" id="form3Example2" class="form-control" />
        <label class="form-label" for="form3Example2">Last name</label>
      </div>
    </div>
  </div>

  <!-- Email input -->
  <div class="form-outline mb-4" data-mdb-input-init>
    <input type="email" id="form3Example3" class="form-control" />
    <label class="form-label" for="form3Example3">Email address</label>
  </div>

  <!-- Password input -->
  <div class="form-outline mb-4" data-mdb-input-init>
    <input type="password" id="form3Example4" class="form-control" />
    <label class="form-label" for="form3Example4">Password</label>
  </div>

  <!-- Checkbox -->
  <div class="form-check d-flex justify-content-center mb-4">
    <input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
    <label class="form-check-label" for="form2Example33">
      Subscribe to our newsletter
    </label>
  </div>

  <!-- Submit button -->
  <button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>Sign up</button>

  <!-- Register buttons -->
  <div class="text-center">
    <p>or sign up with:</p>
    <button type="button" class="btn btn-secondary btn-floating mx-1" data-mdb-ripple-init>
      <i class="fab fa-facebook-f"></i>
    </button>

    <button type="button" class="btn btn-secondary btn-floating mx-1" data-mdb-ripple-init>
      <i class="fab fa-google"></i>
    </button>

    <button type="button" class="btn btn-secondary btn-floating mx-1" data-mdb-ripple-init>
      <i class="fab fa-twitter"></i>
    </button>

    <button type="button" class="btn btn-secondary btn-floating mx-1" data-mdb-ripple-init>
      <i class="fab fa-github"></i>
    </button>
  </div>
</form>

or sign up with:

Contact form

Typical contact form with textarea input as a message field.

<form>
  <!-- Name input -->
  <div class="form-outline mb-4" data-mdb-input-init>
    <input type="text" id="form4Example1" class="form-control" />
    <label class="form-label" for="form4Example1">Name</label>
  </div>

  <!-- Email input -->
  <div class="form-outline mb-4" data-mdb-input-init>
    <input type="email" id="form4Example2" class="form-control" />
    <label class="form-label" for="form4Example2">Email address</label>
  </div>

  <!-- Message input -->
  <div class="form-outline mb-4" data-mdb-input-init>
    <textarea class="form-control" id="form4Example3" rows="4"></textarea>
    <label class="form-label" for="form4Example3">Message</label>
  </div>

  <!-- Checkbox -->
  <div class="form-check d-flex justify-content-center mb-4">
    <input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
    <label class="form-check-label" for="form4Example4">
      Send me a copy of this message
    </label>
  </div>

  <!-- Submit button -->
  <button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>Send</button>
</form>
Note: If you want to learn more about forms, form layouts and other available options read form documentation page.
Step 1 - create an empty Contact Section

Let's prepare a place for our form.

In the index.html file, under the section with pricing cards, add a new section with a grid for 2 columns in the middle.

<!-- Section: Contact -->
<section class="mb-5 mb-lg-10">

  <h3 class="fw-bold text-center mb-5">Contact us</h3>

  <div class="row gx-xl-5">

    <div class="col-lg-5 mb-4 mb-lg-0">

    </div>

    <div class="col-lg-7 mb-4 mb-lg-0">

    </div>

  </div>

</section>
<!-- Section: Contact -->
Step 2 - add contact form

In the first column, add the contact form we presented in this lesson in the example above.

<!-- Section: Contact -->
<section class="mb-5 mb-lg-10">

  <h3 class="fw-bold text-center mb-5">Contact us</h3>

  <div class="row gx-xl-5">

    <div class="col-lg-5 mb-4 mb-lg-0">

      <form>
        <!-- Name input -->
        <div class="form-outline mb-4" data-mdb-input-init>
          <input type="text" id="form4Example1" class="form-control" />
          <label class="form-label" for="form4Example1">Name</label>
        </div>

        <!-- Email input -->
        <div class="form-outline mb-4" data-mdb-input-init>
          <input type="email" id="form4Example2" class="form-control" />
          <label class="form-label" for="form4Example2">Email address</label>
        </div>

        <!-- Message input -->
        <div class="form-outline mb-4" data-mdb-input-init>
          <textarea class="form-control" id="form4Example3" rows="4"></textarea>
          <label class="form-label" for="form4Example3">Message</label>
        </div>

        <!-- Checkbox -->
        <div class="form-check d-flex justify-content-center mb-4">
          <input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
          <label class="form-check-label" for="form4Example4">
            Send me a copy of this message
          </label>
        </div>

        <!-- Submit button -->
        <button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>Send</button>
      </form>

    </div>

    <div class="col-lg-7 mb-4 mb-lg-0">

    </div>

  </div>

</section>
<!-- Section: Contact -->

And that's all for this lesson. In the next lesson, we'll finish our Contact section, so when you're ready, click "next".

Demo and source code for this lesson
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.