Introduction

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 to your disposal. Each of them offers different type of functionality.

If 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 Premium component

<!--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 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 type="password" id="form4" class="form-control">
            <label for="form4">Your password</label>
        </div>

        <div class="text-xs-center">
            <button class="btn btn-deep-purple">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 Premium component

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

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

        <!--Body-->
        <div class="md-form">
            <i class="fa fa-envelope prefix"></i>
            <input 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 type="password" id="form4" class="form-control">
            <label for="form4">Your password</label>
        </div>

        <div class="text-xs-center">
            <button class="btn btn-deep-purple">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 without header-->

Naked Form Premium component

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

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

    <!--Body-->
    <div class="md-form">
        <i class="fa fa-envelope prefix"></i>
        <input 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 type="password" id="form4" class="form-control">
        <label for="form4">Your password</label>
    </div>

    <div class="text-xs-center">
        <button class="btn btn-deep-purple">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>
<!--Naked Form-->

Register form with header Premium component

<!--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 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 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 type="password" id="form4" class="form-control">
            <label for="form4">Your password</label>
        </div>

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

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

Subscription form without header Premium component

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

        <!--Header-->
        <div class="text-xs-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 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 type="text" id="form2" class="form-control">
            <label for="form2">Your email</label>
        </div>

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

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

Contact form Premium component

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

    <!--Header-->
    <div class="text-xs-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 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 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 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 type="text" id="form8" class="md-textarea"></textarea>
        <label for="form8">Icon Prefix</label>
    </div>

    <div class="text-xs-center">
        <button class="btn btn-default">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-->