Forms

eCommerce forms

Set of design blocks dedicated to building eCommerce forms.

See also pages fully composed of the following elements.

Login page Demo Register page Demo Checkout page Demo

Login form

Sign In

Forgot password?

Not a member? Register

or sign in with:



          <!-- Card -->
          <div class="">

            <div class="pt-4 pb-3">

              <h5 class="text-center mt-1 mb-4">Sign In</h5>

              <form action="#!">

                <div class="md-form md-outline">
                  <input type="email" id="defaultForm-email1" class="form-control">
                  <label data-error="wrong" data-success="right" for="defaultForm-email1">Your email</label>
                </div>
                <div class="md-form md-outline">
                  <input type="password" id="defaultForm-pass1" class="form-control">
                  <label data-error="wrong" data-success="right" for="defaultForm-pass1">Your password</label>
                </div>

              </form>

              <div class="d-flex justify-content-between align-items-center mb-2">

                <div class="form-check pl-0 mb-3">
                  <input type="checkbox" class="form-check-input filled-in" id="new">
                  <label class="form-check-label small text-uppercase card-link-secondary" for="new">Remember me</label>
                </div>

                <p><a href="">Forgot password?</a></p>

              </div>

              <div class="text-center pb-2">

                <button type="submit" class="btn btn-primary mb-4">Sign in</button>

                <p>Not a member? <a href="">Register</a></p>
  
                <p>or sign in with:</p>
  
                <a type="button" class="btn-floating btn-fb btn-sm mr-1">
                  <i class="fab fa-facebook-f"></i>
                </a>
                <a type="button" class="btn-floating btn-tw btn-sm mr-1">
                  <i class="fab fa-twitter"></i>
                </a>
                <a type="button" class="btn-floating btn-li btn-sm mr-1">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a type="button" class="btn-floating btn-git btn-sm">
                  <i class="fab fa-github"></i>
                </a>

              </div>

            </div>

          </div>
          <!-- Card -->
          
        

Register form

Sign Up
At least 8 characters and 1 digit
Optional - for two step authentication

or sign up with:


By clicking Sign up you agree to our terms of service



          <!-- Card -->
          <div class="">

            <div class="pt-4 pb-3">

              <h5 class="text-center mt-1 mb-4">Sign Up</h5>

              <form action="#!">

                <div class="form-row">
                  <div class="col">
                    <div class="md-form md-outline mt-0">
                      <input type="text" id="materialRegisterFormFirstName" class="form-control">
                      <label for="materialRegisterFormFirstName">First name</label>
                    </div>
                  </div>
                  <div class="col">
                    <div class="md-form md-outline mt-0">
                      <input type="email" id="materialRegisterFormLastName" class="form-control">
                      <label for="materialRegisterFormLastName">Last name</label>
                    </div>
                  </div>
                </div>

                <div class="md-form md-outline mt-0">
                  <input type="email" id="defaultForm-email2" class="form-control">
                  <label data-error="wrong" data-success="right" for="defaultForm-email2">Your email</label>
                </div>
                <div class="md-form md-outline mt-0">
                  <input type="password" id="defaultForm-pass2" class="form-control">
                  <label data-error="wrong" data-success="right" for="defaultForm-pass2">Your password</label>
                  <small id="materialRegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">
                    At least 8 characters and 1 digit
                  </small>
                </div>

                <div class="md-form md-outline">
                  <input type="number" id="materialRegisterFormPhone" class="form-control" aria-describedby="materialRegisterFormPhoneHelpBlock">
                  <label for="materialRegisterFormPhone">Phone number</label>
                  <small id="materialRegisterFormPhoneHelpBlock" class="form-text text-muted mb-3">
                    Optional - for two step authentication
                  </small>
                </div>

              </form>

              <div class="text-center pb-2">

                <div class="form-check pl-0 mb-3">
                  <input type="checkbox" class="form-check-input filled-in" id="new1">
                  <label class="form-check-label small text-uppercase card-link-secondary" for="new1">Subscribe to our newsletter</label>
                </div>

              </div>

              <div class="text-center mb-2">

                <button type="submit" class="btn btn-primary mb-4">Sign Up</button>
  
                <p>or sign up with:</p>
  
                <a type="button" class="btn-floating btn-fb btn-sm mr-1">
                  <i class="fab fa-facebook-f"></i>
                </a>
                <a type="button" class="btn-floating btn-tw btn-sm mr-1">
                  <i class="fab fa-twitter"></i>
                </a>
                <a type="button" class="btn-floating btn-li btn-sm mr-1">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a type="button" class="btn-floating btn-git btn-sm">
                  <i class="fab fa-github"></i>
                </a>

                <hr class="mt-4">

                <p>By clicking
                  <em>Sign up</em> you agree to our
                  <a href="" target="_blank">terms of service</a>
                </p>

              </div>

            </div>

          </div>
          <!-- Card -->
  
        

Newsletter form

Subscribe

Join our mailing list. We write rarely, but only the best content.

See the last newsletter



          <!-- Card -->
          <div class="">

            <div class="text-center pt-4 pb-3">

              <h5 class="mt-1 mb-4">Subscribe</h5>

              <form action="#!">

                <p class="mb-2">Join our mailing list. We write rarely, but only the best content.</p>

                <p>
                  <a href="" target="_blank">See the last newsletter</a>
                </p>

                <div class="md-form md-outline">
                  <input type="text" id="materialRegisterFormFirstName2" class="form-control">
                  <label for="materialRegisterFormFirstName2">First name</label>
                </div>
                <div class="md-form md-outline">
                  <input type="email" id="defaultForm-email22" class="form-control">
                  <label data-error="wrong" data-success="right" for="defaultForm-email22">Your email</label>
                </div>

                <button type="submit" class="btn btn-primary mt-1 mb-2">Sign Up</button>

              </form>

            </div>

          </div>
          <!-- Card -->

        

Reply (for logged in users)

Leave a Reply
avatar


        <!-- Card -->
        <div class="">

          <div class="text-center pt-4 pb-3">

            <h5 class="mt-1 mb-4">Leave a Reply</h5>

            <form action="#!">

              <div class="d-md-flex flex-md-fill">

                <div class="d-flex justify-content-center">
                  <img class="card-img-100 rounded d-flex z-depth-1 mr-3 mb-4"
                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" alt="avatar">
                </div>

                <!-- Your review -->
                <div class="md-form md-outline mt-0 w-100">
                  <textarea id="form76" class="md-textarea form-control" rows="4"></textarea>
                  <label for="form76">Message</label>
                </div>

              </div>

              <div class="text-center">
                <button class="btn btn-primary btn-md">Submit</button>
              </div>
              
            </form>

          </div>

        </div>
        <!-- Card -->

      

Reply (for not logged in users)

Leave a Reply


        <!-- Card -->
        <div class="">

          <div class="text-center pt-4 pb-3">

            <h5 class="mt-1 mb-4">Leave a Reply</h5>

            <form action="#!">

              <!-- Your review -->
              <div class="md-form md-outline">
                <textarea id="form76" class="md-textarea form-control" rows="4"></textarea>
                <label for="form76">Message</label>
              </div>

              <!-- Name -->
              <div class="md-form md-outline">
                <input type="text" id="form75" class="form-control">
                <label for="form75">Name</label>
              </div>

              <!-- Email -->
              <div class="md-form md-outline">
                <input type="email" id="form77" class="form-control">
                <label for="form77">Email</label>
              </div>

              <!-- Name -->
              <div class="md-form md-outline">
                <input type="text" id="form78" class="form-control">
                <label for="form78">Website</label>
              </div>

              <div class="text-center">
                <button type="button" class="btn btn-primary btn-md">Submit</button>
              </div>

            </form>

          </div>

        </div>
        <!-- Card -->
  
      

Checkout form

Billing details
Additional information


        <!-- Card -->
        <div class="">
          <div class="pt-4 pb-3">

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-lg-6 mb-5 mb-lg-0">

              <h5 class="mb-4 pb-1">Billing details</h5>

              <!-- Grid row -->
              <div class="row">

                <!-- Grid column -->
                <div class="col-lg-6">

                  <!-- First name -->
                  <div class="md-form md-outline mt-0">
                    <input type="text" id="form11" class="form-control">
                    <label for="form11">First name</label>
                  </div>

                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-lg-6">

                  <!-- Last name -->
                  <div class="md-form md-outline mt-0">
                    <input type="text" id="form12" class="form-control">
                    <label for="form12">Last name</label>
                  </div>

                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row -->

              <!-- Company name -->
              <div class="md-form md-outline my-0">
                <input type="text" id="form13" class="form-control mb-0">
                <label for="form13">Company name (optional)</label>
              </div>

              <!-- Country -->
              <div class="d-flex flex-wrap">
                <div class="select-outline position-relative w-100">
                  <select class="mdb-select md-form md-outline">
                    <option value="" disabled selected>Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                  </select>
                  <label>Example label</label>
                </div>
              </div>

              <!-- Address Part 1 -->
              <div class="md-form md-outline mt-0">
                <input type="text" id="form14" placeholder="House number and street name" class="form-control">
                <label for="form14">Address</label>
              </div>

              <!-- Address Part 2 -->
              <div class="md-form md-outline mt-0">
                <input type="text" id="form15" placeholder="Apartment, suite, unit etc. (optional)" class="form-control">
                <label for="form15">Address</label>
              </div>

              <!-- Postcode / ZIP -->
              <div class="md-form md-outline mt-0">
                <input type="text" id="form16" class="form-control">
                <label for="form16">Postcode / ZIP</label>
              </div>

              <!-- Town / City -->
              <div class="md-form md-outline mt-0">
                <input type="text" id="form17" class="form-control">
                <label for="form17">Town / City</label>
              </div>

              <!-- Phone -->
              <div class="md-form md-outline mt-0">
                <input type="number" id="form18" class="form-control">
                <label for="form18">Phone</label>
              </div>

              <!-- Email address -->
              <div class="md-form md-outline mt-0">
                <input type="email" id="form19" class="form-control">
                <label for="form19">Email address</label>
              </div>

              <div class="form-check pl-0 mb-4 mb-lg-0">
                <input type="checkbox" class="form-check-input filled-in" id="new3">
                <label class="form-check-label small text-uppercase card-link-secondary" for="new3">Create an account?</label>
              </div>

            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-6">

              <h5 class="mb-4 pb-1">Additional information</h5>

              <!-- Additional information -->
              <div class="md-form md-outline">
                <textarea id="form76" class="md-textarea form-control" rows="4"></textarea>
                <label for="form76">Additional information</label>
              </div>

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          </div>
        </div>
        <!-- Card -->

      


        $(document).ready(function () {
          $('.mdb-select').materialSelect();
          $('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
            $(this).closest('.select-outline').find('label').toggleClass('active');
            $(this).closest('.select-outline').find('.caret').toggleClass('active');
          });
        });

      

Adding shadows

Sign In

Forgot password?

Not a member? Register

or sign in with:



          <!-- Card -->
          <div class="card">

            <div class="card-body">

              <h5 class="text-center mt-1 mb-4">Sign In</h5>

              <form action="#!">

                <div class="md-form md-outline">
                  <input type="email" id="1defaultForm-email1" class="form-control">
                  <label data-error="wrong" data-success="right" for="defaultForm-email1">Your email</label>
                </div>
                <div class="md-form md-outline">
                  <input type="password" id="1defaultForm-pass1" class="form-control">
                  <label data-error="wrong" data-success="right" for="defaultForm-pass1">Your password</label>
                </div>

              </form>

              <div class="d-flex justify-content-between align-items-center mb-2">

                <div class="form-check pl-0 mb-3">
                  <input type="checkbox" class="form-check-input filled-in" id="1new">
                  <label class="form-check-label small text-uppercase card-link-secondary" for="new">Remember me</label>
                </div>

                <p><a href="">Forgot password?</a></p>

              </div>

              <div class="text-center pb-2">

                <button type="submit" class="btn btn-primary mb-4">Sign in</button>

                <p>Not a member? <a href="">Register</a></p>
  
                <p>or sign in with:</p>
  
                <a type="button" class="btn-floating btn-fb btn-sm mr-1">
                  <i class="fab fa-facebook-f"></i>
                </a>
                <a type="button" class="btn-floating btn-tw btn-sm mr-1">
                  <i class="fab fa-twitter"></i>
                </a>
                <a type="button" class="btn-floating btn-li btn-sm mr-1">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a type="button" class="btn-floating btn-git btn-sm">
                  <i class="fab fa-github"></i>
                </a>

              </div>

            </div>

          </div>
          <!-- Card -->