Contact us


We are sorry if you are experiecing any problems. We will try our best to reach you in 24h.

Bulgaria

91, Lorem Street

Entrance A

Floor 4

Phone: +359-123-345-567

E-mail: support@shieldui.com

Free bootstrap template, demonstrating a full page contact form.
It includes input fields, social networks navigation and an address of the office.

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="text-center">Contact us</h3>
                        <hr>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">
                                <form>
                                    <div class="form-group row">
                                        <div class="col-md-4">
                                            <label for="name">Name</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text" id="name" class="form-control" placeholder="Type your name here">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-4">
                                            <label for="lastName">Last name</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text" id="lastName" class="form-control" placeholder="Type your last name here">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-4">
                                            <label for="email">E-mail</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text" id="email" class="form-control" placeholder="Type your e-mail">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-4">
                                            <label for="phone">Phone</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text" id="phone" class="form-control" placeholder="So we can reach you">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <p class="text-center">We are sorry if you are experiecing any problems. We will try our best to reach you in 24h. </p>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-4">
                                        </div>
                                        <div class="col-md-8">
                                            <button class="btn btn-primary">Submit request</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-6">
                                <form>
                                    <div class="form-group row">
                                        <div class="col-xs-8 col-xs-offset-2 col-md-8 col-md-offset-3">
                                            <label>Or you can reach us via</label>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-8 col-md-offset-2">
                                            <div class="social row">
                                                <div class="btn-group btn-group-justified">
                                                    <a href="#" class="btn btn-primary"><span class="fa fa-2x fa-facebook"></span></a>
                                                    <a href="#" class="btn btn-danger"><span class="fa fa-2x fa-google"></span></a>
                                                    <a href="#" class="btn btn-primary"><span class="fa fa-2x fa-linkedin"></span></a>
                                                    <a href="#" class="btn btn-info"><span class="fa fa-2x fa-twitter"></span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-xs-3 col-xs-offset-5 col-md-3 col-md-offset-5">- OR -</label>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-8 col-md-offset-2">
                                            <h4>Bulgaria</h4>
                                            <p>91, Lorem Street</p>
                                            <p>Entrance A</p>
                                            <p>Floor 4</p>
                                            <p>Phone: +359-123-345-567</p>
                                            <p>E-mail: <a href="#">support@shieldui.com</a></p>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    body {
        font-family: 'PT Sans', sans-serif;
    }

    .container-fluid {
        background: url("http://prepbootstrap.com/Content/images/shared/misc/contact-us.png");
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 100%;
    }

    hr {
        border: 1px solid #354458;
    }

    .panel {
        margin-top: 50px;
        margin-right: 10px;
    }

    .col-md-8 > button {
        display: block;
        margin: auto;
    }

    .social > a {
        width: 100%;
    }
</style>
Was this template useful?