Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Open Bootstrap DocsDefault Form
<form>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" placeholder="Enter your email">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-size--md btn-bg--primary">Submit</button>
</form>
Newsletter Form V1
<div class="newsletter-form form--v8 bg-white py-6 py-lg-8 box-shadow--5 text-center">
<div class="mb-5 px-3">
<h2 class="h3-font mb-1">Start building your website now</h2>
<p>Just sign up and choose a theme from out library to get started</p>
</div>
<!-- end of title -->
<div class="col-12 col-md-10 col-lg-8 mx-md-auto">
<form action="#" class="form bg-color--white-opacity--10 rounded--05 p-1">
<div class="input-group d-flex">
<input type="email" class="form-control rounded--none" placeholder="Enter your email" required>
<button class="btn btn-hover--splash btn-bg--primary rounded--none" type="submit"><span class="btn__text font-w--500">Get Started</span></button>
</div>
</form>
<!-- end of from -->
</div>
</div>
<!-- end of form wrapper -->
Newsletter Form V2
<div class="newsletter-form form--v2 border--around bg-white rounded--10 box-shadow--3 text-center px-3 pb-5">
<div class="pt-4 pb-5">
<h2 class="h3-font mb-1">Subscribe our newsletter</h2>
<p class="text-color--400">By subscribing our newsletter you will know all the latest updates about blockchain from us.</p>
</div>
<!-- end of title -->
<form action="#" class="form">
<div class="input-group d-flex">
<input type="email" class="form-control" placeholder="Enter your email" required="">
<button class="btn btn-hover--splash btn-bg--cta--3" type="submit"><span class="btn__text"><i class="icon icon-arrow-right"></i></span></button>
</div>
</form>
<!-- end of from -->
</div>
<!-- end of from wrapper-->
Newsletter Form V3
Subscribe our newsletter and get useful information every week
<div class="container mx-0">
<div class="row mb-4">
<div class="col-12">
<div class="newsletter-form form--v3 position-relative d-lg-flex align-items-center bg-color--primary rounded--10 py-4 p-lg-4 p-xl-7">
<div class="svg-shape--top--right h-100">
<img src="img/layout/diagonal-shape-7.svg" alt="wave" class="svg h-100">
</div>
<!-- end of bg -->
<div class="col-12 col-lg-6 pr-lg-5 mb-3 mb-lg-0 text-center text-lg-left reveal">
<h2 class="h3-font color--white">Subscribe our newsletter and get useful information every week</h2>
</div>
<!-- end of title -->
<div class="col-12 col-md-10 col-lg-6 mx-md-auto">
<form action="#" class="form bg-color--white-opacity--10 rounded--05 p-1 reveal">
<div class="input-group d-flex">
<input type="email" class="form-control" placeholder="Enter your email" required="">
<button class="btn btn-hover--splash btn-bg--primary" type="submit"><span class="btn__text"><i class="icon icon-arrow-right"></i></span></button>
</div>
</form>
<!-- end of from -->
</div>
</div>
</div>
</div>
</div>
Newsletter Form V4
Sign up for the latest updates.
SpaceMax is designed to pioneer the plasma architecture, the leading scalability solution for Ethereum is a stakeholder and infinitely scalable..
<div class="container">
<div class="row">
<div class="col-12 col-sm-9 col-lg-6 mb-4 mb-lg-6 mx-auto text-center reveal">
<h2 class="mb-2 font-size--40 font-w--700">Sign up for the latest updates.</h2>
<p>SpaceMax is designed to pioneer the plasma architecture, the leading scalability solution for Ethereum is a stakeholder and infinitely scalable..</p>
</div>
</div>
<!-- end of section title row -->
<div class="row mb-8">
<div class="col-12 col-md-10 col-lg-6 mx-md-auto">
<div class="form--v4 reveal">
<form action="#" class="form bg-color--primary rounded--05">
<div class="input-group d-flex">
<input type="email" class="form-control" placeholder="Enter your email" required>
<button class="btn btn-hover--splash btn-bg--primary" type="submit"><span class="btn__text"><i class="icon icon-arrow-right"></i></span></button>
</div>
</form>
<!-- end of from -->
</div>
</div>
</div>
</div>
Newsletter Form V5
<div class="form--v4">
<form action="#" class="form bg-color--white-opacity--10 rounded--05">
<div class="input-group d-flex">
<input type="email" class="form-control" placeholder="Enter your email" required="">
<button class="btn btn-size--md btn-hover--splash btn-bg--cta--5" type="submit"><span class="btn__text">Create Account</span></button>
</div>
</form>
<!-- end o form -->
</div>
<!-- end o form wrapper -->
Newsletter Form V6
Join us today!
Buy your cryptocurrency today to begin using the future of money.
<div class="row justify-content-between align-items-center text-center text-md-left">
<div class="col-12 col-md-5 col-lg-4 mb-4 mb-md-0 reveal">
<h2 class="h3-font font-w--700 mb-1">Join us today!</h2>
<p>Buy your cryptocurrency today to begin using the future of money.</p>
</div>
<!-- end of content col -->
<div class="col-12 col-md-7 col-lg-6">
<div class="form--v7 reveal">
<form action="#" class="form border--around rounded--05">
<div class="input-group d-flex">
<input type="email" class="form-control" placeholder="Enter your email" required="">
<button class="btn btn-size--md btn-hover--splash btn-bg--primary" type="submit"><span class="btn__text">Get Started Now</span></button>
</div>
</form>
</div>
<!-- end of from -->
</div>
<!-- end of form col -->
</div>
<!-- end of row -->
Contact Form
<form action="#" class="form">
<div class="form-group form-row">
<div class="col-12 col-md-6 form-group mb-md-0">
<input type="text" class="form-control" placeholder="Your name" required="">
</div>
<div class="col-12 col-md-6">
<input type="email" class="form-control" placeholder="Your email" required="">
</div>
</div>
<!-- end of form row -->
<div class="form-group form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Subject">
</div>
</div>
<!-- end of form row -->
<div class="form-group form-row mb-4">
<div class="col">
<textarea rows="6" class="form-control" placeholder="Write your message" required=""></textarea>
</div>
</div>
<!-- end of form row -->
<button class="btn btn-size--md btn-border btn-border--color--primary color--primary btn-hover--primary" type="submit"><span class="btn__text">Send Message</span></button>
</form>
<!-- end of form -->