Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Introduction

Contact section provides you a necessary information for your users to get in touch with you.

Contact v.1 Premium component

Contact us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?

Write to us:

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



New York, NY 10012

United States

+ 01 234 567 89

Mon - Fri, 8:00-22:00

info@gmail.com

sale@gmail.com


<!--Section: Contact v.1-->
<section class="section mb-4">

    <!--Section heading-->
    <h1 class="section-heading">Contact v.1</h1>
    <!--Section sescription-->
    <p class="section-description mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <div class="row">

        <!--First column-->
        <div class="col-md-5">

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

                <div class="card-block">
                    <!--Header-->
                    <div class="form-header mdb-color">
                        <h3><i class="fa fa-envelope"></i> Write to us:</h3>
                    </div>

                    <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="form32">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-ins">Submit</button>
                    </div>

                </div>

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

        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-7">

            <!--Google map-->
            <div id="map-container" class="z-depth-1-half map-container" style="height: 400px"></div>

            <br>
            <!--Buttons-->
            <div class="row text-xs-center">
                <div class="col-md-4">
                    <a class="btn-floating btn-small mdb-color"><i class="fa fa-map-marker"></i></a>
                    <p>New York, NY 10012</p>
                    <p>United States</p>
                </div>

                <div class="col-md-4">
                    <a class="btn-floating btn-small mdb-color"><i class="fa fa-phone"></i></a>
                    <p>+ 01 234 567 89</p>
                    <p>Mon - Fri, 8:00-22:00</p>
                </div>

                <div class="col-md-4">
                    <a class="btn-floating btn-small mdb-color"><i class="fa fa-envelope"></i></a>
                    <p>info@gmail.com</p>
                    <p>sale@gmail.com</p>
                </div>
            </div>

        </div>
        <!--/Second column-->

    </div>

</section>
<!--/Section: Contact v.1-->

Contact v.2 Premium component

Contact us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?

  • New York, NY 10012, USA

  • + 01 234 567 89

  • contact@mdbootstrap.com


<!--Section: Contact v.2-->
<section class="section">

    <!--Section heading-->
    <h1 class="section-heading">Contact v.2</h1>
    <!--Section sescription-->
    <p class="section-description mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <div class="row">

        <!--First column-->
        <div class="col-md-8">
            <form>
                <!--First row-->
                <div class="row">
                    <!--First column-->
                    <div class="col-md-6">
                        <div class="md-form">
                            <div class="md-form">
                                <input type="text" id="form41" class="form-control">
                                <label for="form41" class="">Your name</label>
                            </div>
                        </div>
                    </div>

                    <!--Second column-->
                    <div class="col-md-6">
                        <div class="md-form">
                            <div class="md-form">
                                <input type="text" id="form52" class="form-control">
                                <label for="form52" class="">Your email</label>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/.First row-->

                <!--Second row-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="md-form">
                            <input type="text" id="form51" class="form-control">
                            <label for="form51" class="">Subject</label>
                        </div>
                    </div>
                </div>
                <!--/Second row-->

                <!--Third row-->
                <div class="row">
                    <!--First column-->
                    <div class="col-md-12">

                        <div class="md-form">
                            <textarea type="text" id="form76" class="md-textarea"></textarea>
                            <label for="form76">Your message</label>
                        </div>

                    </div>
                </div>
                <!--/.Third row-->
            </form>

            <div class="center-on-small-only">
                <a class="btn btn-ins">Send</a>
            </div>
        </div>
        <!--.First column-->

        <!--Second column-->
        <div class="col-md-4">
            <ul class="contact-icons">
                <li><i class="fa fa-map-marker fa-2x"></i>
                    <p>New York, NY 10012, USA</p>
                </li>

                <li><i class="fa fa-phone fa-2x"></i>
                    <p>+ 01 234 567 89</p>
                </li>

                <li><i class="fa fa-envelope fa-2x"></i>
                    <p>contact@mdbootstrap.com</p>
                </li>
            </ul>
        </div>
        <!--.Second column-->

    </div>
</section>
<!--/Section: Contact v.2-->