Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Landing Page

Form, Description and Call to Action


Written by Michal Szymanski ,

1. Description

We need a good, short description for our Landing Page. It would also be nice to have a heading and some Call To Action button. Let's add them.

Add this code to the first column of the Intro:


<!--First column-->
<div class="col-lg-6">
    <div class="description">
        <h2 class="h2-responsive wow fadeInLeft">Landing Page </h2>
        <hr class="hr-dark">
        <p class="wow fadeInLeft" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</p>
        <br>
        <a class="btn btn-primary wow fadeInLeft" data-wow-delay="0.7s">Learn more</a>
    </div>
</div>
<!--/.First column-->

Inside the column, we've placed heading, short description, and button (already linked with the section #best-features).

The problem is, it's barely visible. We use a dark background, so our texts should be white.

It would also be better, if .description div would be placed in the middle of the Form's height. That's why we'll give it some padding

Inside style.css add a following code:


.description {
    padding-top: 25%;
    padding-bottom: 3rem;
    color: #fff
}

@media (max-width: 992px) {
    .description {
        padding-top: 7rem;
        text-align: center;
    }
}

2. Form 

Creating a good form is a challenging and painful task. But thanks to MDB we can do it in the quick and easy way.

Add a following code to the second column of the Intro:


<!--Second column-->
<div class="col-lg-6">
    <!--Form-->
    <div class="card wow fadeInRight">
        <div class="card-block">
            <!--Header-->
            <div class="text-xs-center">
                <h3><i class="fa fa-user"></i> Register with:</h3>
                <a href="" class="btn-floating btn-fb btn-small"><i class="fa fa-facebook"></i></a>
                <a href="" class="btn-floating btn-tw btn-small"><i class="fa fa-twitter"></i></a>
                <a href="" class="btn-floating btn-gplus btn-small"><i class="fa fa-google-plus"></i></a>
                <a href="" class="btn-floating btn-li btn-small"><i class="fa fa-linkedin"></i></a>
                <a href="" class="btn-floating btn-git btn-small"><i class="fa fa-github"></i></a>
                <hr>
                <h3>or:</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">Repeat password</label>
            </div>

            <div class="text-xs-center">
                <button class="btn btn-primary btn-lg">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-->
</div>
<!--/Second column-->

Refresh webpage and enjoy your new Form. What exactly we did here?

I. We used a .card wrapper to create a white background for the Form and .card-block to give it a proper padding.

II. In the header of the Form, we have placed social buttons. If you want to see all available buttons, take a look at our Social Buttons section of MDB documentation.

III. We used .text-xs-center to center content horizontally .

IV. In the body of the Form, we used Input Fields with the Icon Prefixes. You can see all available Input Fields in the INPUTS section of MDB documentation.

V. At the bottom of the Form, we've placed a simple button and Checkbox.

VI. We used animation classes to make our Intro more interesting. Animations don't work yet because we didn't initialize it. We'll do it in the next lessons.


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

Do you want to share?


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 8

  • Konstantante Kholod

    It is a pity that there is no button VKontakte

  • User avatar

    Michal Szymanski

    It will be in the next version of MDB :)

  • User avatar

    nrod31792

    How can I save the input from the form ?

  • User avatar

    Michal Szymanski

    It depends what exactly do you want to do. You can "save" it in variable via native javascript or using some javascript framework like angular, meteor or react library (or the easiest way - by using jquery, which is part of MDB package). If you want to save it permanently you need also a database.

  • User avatar

    Stefan Aerts

    Hi Michal, i like this tutorial.I see there is a difference between mdb pro 4.0.0 and mdb free 4.0.1. The icons in this example online page are from mdb pro 4.0.0 but the example code is from mdb free 4.0.1. What is the one to use? pro 4.0.0 gives bigger icons for facebook twitter googleplus ... free mdb 4.0.1 gives small icons. Thanks.

  • User avatar

    Michal Szymanski

    Hi Stefan. We have to update our tutorials and we'll do it soon. We always recommend to follow the newest version of MDB.

  • User avatar

    jhuguz

    I like your work

  • User avatar

    sahbana

    very nice. help me so much

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.