Bootstrap forms

Save your time with our predefined forms. Register, login, subscribe or contact form - choose whichever you need and simply paste it into your project.


Bootstrap forms in Material Design are simple and eye-pleasant. While creating MDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.

Such constructions like predefined Login Forms, Register Forms, Subscription Forms or Contact Forms and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.

In case you want to create your custom Form have a look at Inputs documentation where you can find plenty of elements typical for forms.

Form with header



Login:


<!--Form with header-->
<div class="card">
    <div class="card-block">

        <!--Header-->
        <div class="form-header purple darken-4">
            <h3><i class="fa fa-lock"></i> Login:</h3>
        </div>

        <!--Body-->
        <div class="md-form">
            <i class="fa fa-envelope prefix"></i>
            <input mdbActive type="text" id="form2" class="form-control">
            <label for="form2">Your email</label>
        </div>

        <div class="md-form">
            <i class="fa fa-lock prefix"></i>
            <input mdbActive type="password" id="form4" class="form-control">
            <label for="form4">Your password</label>
        </div>

        <div class="text-center">
            <button class="btn btn-deep-purple" ripple-radius>Login</button>
        </div>

    </div>

    <!--Footer-->
    <div class="modal-footer">
        <div class="options">
            <p>Not a member? <a href="#">Sign Up</a></p>
            <p>Forgot <a href="#">Password?</a></p>
        </div>
    </div>

</div>
<!--/Form with header-->

Form without header



Login:



<!--Form without header-->
<div class="card">
    <div class="card-block">

        <!--Header-->
        <div class="text-center">
            <h3><i class="fa fa-pencil"></i> Subscribe:</h3>
            <hr class="mt-2 mb-2">
        </div>

        <!--Body-->
        <p>We'll write rarely, but only the best content.</p>
        <br>

        <!--Body-->
        <div class="md-form">
            <i class="fa fa-user prefix"></i>
            <input mdbActive type="text" id="form3" class="form-control">
            <label for="form3">Your name</label>
        </div>

        <div class="md-form">
            <i class="fa fa-envelope prefix"></i>
            <input mdbActive type="text" id="form2" class="form-control">
            <label for="form2">Your email</label>
        </div>

        <div class="text-center">
            <button class="btn btn-deep-orange" ripple-radius>Send</button>
        </div>

    </div>
</div>
<!--/Form without header-->

Naked Form



Login:



<!--Naked Form-->
<div class="card-block">

    <!--Header-->
    <div class="text-center">
        <h3><i class="fa fa-envelope"></i> Write to us:</h3>
        <hr class="mt-2 mb-2">
    </div>

    <!--Body-->
    <p>We'll write rarely, but only the best content.</p>
    <br>

    <!--Body-->
    <div class="md-form">
        <i class="fa fa-user prefix"></i>
        <input mdbActive type="text" id="form3" class="form-control">
        <label for="form3">Your name</label>
    </div>

    <div class="md-form">
        <i class="fa fa-envelope prefix"></i>
        <input mdbActive type="text" id="form2" class="form-control">
        <label for="form2">Your email</label>
    </div>

    <div class="md-form">
        <i class="fa fa-tag prefix"></i>
        <input mdbActive type="text" id="form32" class="form-control">
        <label for="form34">Subject</label>
    </div>

    <div class="md-form">
        <i class="fa fa-pencil prefix"></i>
        <textarea mdbActive type="text" id="form8" class="md-textarea"></textarea>
        <label for="form8">Icon Prefix</label>
    </div>

    <div class="text-center">
        <button class="btn btn-default" ripple-radius>Submit</button>

        <div class="call">
            <br>
            <p>Or would you prefer to call?
                <br>
                <span><i class="fa fa-phone"> </i></span> + 01 234 565 280</p>
        </div>
    </div>

</div>
<!--Naked Form-->

Register form with header



Register:


<!--Form with header-->
<div class="card">
    <div class="card-block">

        <!--Header-->
        <div class="form-header blue-gradient">
            <h3><i class="fa fa-user"></i> Register:</h3>
        </div>

        <!--Body-->
        <div class="md-form">
            <i class="fa fa-user prefix"></i>
            <input mdbActive type="text" id="form3" class="form-control">
            <label for="form3">Your name</label>
        </div>
        <div class="md-form">
            <i class="fa fa-envelope prefix"></i>
            <input mdbActive type="text" id="form2" class="form-control">
            <label for="form2">Your email</label>
        </div>

        <div class="md-form">
            <i class="fa fa-lock prefix"></i>
            <input mdbActive type="password" id="form4" class="form-control">
            <label for="form4">Your password</label>
        </div>

        <div class="text-center">
            <button class="btn btn-indigo" ripple-radius>Sign up</button>
            <hr>
            <fieldset class="form-group">
                <input mdbActive type="checkbox" id="checkbox1">
                <label for="checkbox1">Subscribe me to the newsletter</label>
            </fieldset>
        </div>

    </div>
</div>
<!--/Form with header-->

Subscription form without header


Subscribe:


We'll write rarely, but only the best content.



<!--Form without header-->
<div class="card">
    <div class="card-block">

        <!--Header-->
        <div class="text-center">
            <h3><i class="fa fa-pencil"></i> Subscribe:</h3>
            <hr class="mt-2 mb-2">
        </div>

        <!--Body-->
        <p>We'll write rarely, but only the best content.</p>
        <br>

        <!--Body-->
        <div class="md-form">
            <i class="fa fa-user prefix"></i>
            <input mdbActive type="text" id="form3" class="form-control">
            <label for="form3">Your name</label>
        </div>

        <div class="md-form">
            <i class="fa fa-envelope prefix"></i>
            <input mdbActive type="text" id="form2" class="form-control">
            <label for="form2">Your email</label>
        </div>

        <div class="text-center">
            <button class="btn btn-deep-orange" ripple-radius>Send</button>
        </div>

    </div>
</div>
<!--/Form without header-->

Contact form


Write to us:


We'll write rarely, but only the best content.



Or would you prefer to call?
+ 01 234 565 280


<!--Naked Form-->
<div class="card-block">

    <!--Header-->
    <div class="text-center">
        <h3><i class="fa fa-envelope"></i> Write to us:</h3>
        <hr class="mt-2 mb-2">
    </div>

    <!--Body-->
    <p>We'll write rarely, but only the best content.</p>
    <br>

    <!--Body-->
    <div class="md-form">
        <i class="fa fa-user prefix"></i>
        <input mdbActive type="text" id="form3" class="form-control">
        <label for="form3">Your name</label>
    </div>

    <div class="md-form">
        <i class="fa fa-envelope prefix"></i>
        <input mdbActive type="text" id="form2" class="form-control">
        <label for="form2">Your email</label>
    </div>

    <div class="md-form">
        <i class="fa fa-tag prefix"></i>
        <input mdbActive type="text" id="form32" class="form-control">
        <label for="form34">Subject</label>
    </div>

    <div class="md-form">
        <i class="fa fa-pencil prefix"></i>
        <textarea mdbActive type="text" id="form8" class="md-textarea"></textarea>
        <label for="form8">Icon Prefix</label>
    </div>

    <div class="text-center">
        <button class="btn btn-default" ripple-radius>Submit</button>

        <div class="call">
            <br>
            <p>Or would you prefer to call?
                <br>
                <span><i class="fa fa-phone"> </i></span> + 01 234 565 280</p>
        </div>
    </div>

</div>
<!--Naked Form-->