Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Open Bootstrap Docs

Newsletter Form V1


                                        <div class="newsletter-form form--v1">
                                            <form action="#" class="form">
                                                <div class="input-group">
                                                    <input type="email" class="form-control" id="email" placeholder="Enter your email address" required>
                                                    <div class="input-group-append">
                                                        <button class="btn btn-cta btn-bg--primary" type="submit">
                                                            <span class="btn-text"><i class="nc-icon nc-send"></i></span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                            <!-- form end -->
                                        </div>
                                        <!-- form-v1 end -->

Newsletter Form V2


                                        <div class="newsletter-form form--v2">
                                            <form action="#" class="form">
                                                <div class="input-group">
                                                    <input type="email" class="form-control" id="email" placeholder="Enter your email address" required="">
                                                    <div class="input-group-append">
                                                        <button class="btn btn-bg--primary btn-color--white btn-cta--2" type="submit">
                                                            Get Started
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                            <!-- form end -->
                                        </div>
                                        <!-- form--v2 end -->

Contact Form


                                        <div class="form--v3">
                                            <form action="#" class="form">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" id="name" placeholder="name*" required="">
                                                </div>
                                                <div class="form-group">
                                                    <input type="email" class="form-control" id="email" placeholder="email*" required="">
                                                </div>
                                                <button type="submit" class="btn btn-size--md--2 btn-bg--white btn-color--primary text-uppercase btn-hover">Subscribe now</button>
                                            </form>
                                            <!-- form end -->
                                        </div>
                                        <!-- form--v3 end -->

Sign-up Form


                                        <div class="form--v4">
                                            <form action="#" class="form">
                                                <div class="form-group">
                                                    <label for="name">Full Name</label>
                                                    <input type="text" class="form-control" id="name" placeholder="Enter your full name" required="">
                                                </div>
                                                <div class="form-group">
                                                    <label for="email">email</label>
                                                    <input type="email" class="form-control" id="email" placeholder="Enter email address" required="">
                                                </div>
                                                <div class="form-group">
                                                    <label for="password">Password</label>
                                                    <input type="password" class="form-control" id="password" placeholder="******" required="">
                                                </div>
                                                <div class="form-group">
                                                    <label for="confirm-password">Confirm Password</label>
                                                    <input type="confirm-password" class="form-control" id="confirm-password" placeholder="******" required="">
                                                </div>
                                                <button type="submit" class="btn btn-bg--primary btn-color-white w-100">login</button>
                                            </form>
                                        </div>
                                        <!-- form--v4 end -->

Login Form

Forgot password? 

                                        <div class="form--v4">
                                            <form action="#" class="form">
                                                <div class="form-group">
                                                    <label for="email">email</label>
                                                    <input type="email" class="form-control" id="email" placeholder="Enter email address" required="">
                                                </div>
                                                <div class="form-group">
                                                    <div class="d-flex justify-content-between">
                                                        <label for="password">Password</label>
                                                        <small><a href="#"  class="color-primary font-size--17">Forgot password?</a></small>
                                                    </div>
                
                                                    <input type="password" class="form-control" id="password" placeholder="******" required="">
                                                </div>
                                                <button type="submit" class="btn btn-bg--primary btn-color-white w-100 btn-hover">login</button>
                                            </form>
                                        </div>
                                        <!-- form--v4 end -->