🤩
Windframe Import update is finally here!

Forms

Bootstrap 5 Forms

Bootstrap 5 forms are input-based components that are used to collect information from users. All of these forms, whether used as a login, subscription, or contact form, may be readily altered.

We were conscious of their importance in practically every project while developing Contrast Design Bootstrap, thus we put a lot of effort into getting them correct.

Predefined Form logins, Form registers, Form subscriptions, Form contacts, and other layout forms in a variety of designs are all available to you. Each of them has an own set of capabilities.

Default Form Login

Default Form Login

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center mt-4 mb-4">
<p class="h4">Sign in</p>
</div>
<div class="cdb-form">
<input type="email" class="form-control border-top-0 border-left-0 border-right-0" />
<label>E-mail</label>
</div>
<div class="cdb-form">
<input type="password" class="form-control border-top-0 border-left-0 border-right-0" />
<label>Password</label>
</div>
<div class="d-flex flex-wrap justify-content-center align-items-center">
<input type="checkbox" class="mr-1" />
<p class="m-0">Remember me</p>
<span class="text-primary ml-3" href="#">Forgot Password ?</span>
</div>
<button class="btn btn-dark btn-block my-3">
Sign in
</button>
<p class="text-center">Not a member? <span class="text-primary" href="#">Register</span></p>
<p class="text-center">or sign in with</p>
<div class="my-3 d-flex justify-content-center">
<button class="m-0 btn btn-flat">
<i class="fab fa-facebook-f"></i>
</button>
<button class="m-0 btn btn-flat">
<i class="fab fa-twitter"></i>
</button>
<button class="m-0 btn btn-flat">
<i class="fab fa-google-plus-g"></i>
</button>
</div>
</div>
</div>
</div>

Contrast Form Login

Bootstrap Form Login

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div style="background:black;" class="text-center text-white">
<p class="h5 mt-2 py-4 font-weight-bold">Sign in</p>
</div>
<div class="mx-4 mt-4 p-3">
<div class="cdb-form">
<input type="email" class="form-control" />
<label>E-mail</label>
</div>
<div class="cdb-form">
<input type="password" class="form-control" />
<label>Password</label>
</div>
<div class="mt-5 d-flex flex-wrap justify-content-center align-items-center">
<input type="checkbox" class="mr-2" />
<p class="m-0">Remember me</p>
<span href="#" class="text-primary ml-3">Forgot Password ?</span>
</div>
<button class="btn btn-block btn-outline-dark my-3">
Sign in
</button>
<p class="text-center">Not a member? <span class="text-primary" href="#">Register</span></p>
<p class="text-center">or sign in with</p>
<div class="my-3 d-flex justify-content-center">
<button class="btn m-0">
<i class="fab fa-facebook-f"></i>
</button>
<button class="btn m-0">
<i class="fab fa-twitter"></i>
</button>
<button class="btn m-0">
<i class="fab fa-linkedin-in"></i>
</button>
<button class="btn m-0">
<i class="fab fa-github"></i>
</button>
</div>
</div>
</div>
</div>

Default Form Register

Bootstrap Form Register

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center mt-4 mb-2">
<p class="h4 mb-5">Sign up</p>
</div>
<div class="row mb-n4">
<div class="col">
<div class="cdb-form">
<input type="email" class="form-control border-top-0 border-left-0 border-right-0" />
<label>First Name</label>
</div>
</div>
<div class="col">
<div class="cdb-form">
<input type="text" class="form-control border-top-0 border-left-0 border-right-0" />
<label>Last Name</label>
</div>
</div>
<div class="cdb-form">
<input type="email" class="form-control border-top-0 border-left-0 border-right-0" />
<label>E-mail</label>
</div>
<div class="cdb-form">
<input type="password" class="form-control border-top-0 border-left-0 border-right-0" />
<label>Password</label>
</div>
<p class="text-muted text-center small">At least 8 characters and 1 digit</p>
<div class="cdb-form">
<input type="text" class="form-control border-top-0 border-left-0 border-right-0" />
<label>Phone number</label>
</div>
<p class="text-muted text-center small">Optional - for two step authentication</p>
</div>
<div class="d-flex justify-content-center align-items-center mt-4">
<input class="mr-2" type="checkbox" />
<p class="m-0">Subscribe to our newsletter</p>
</div>
<button class="btn btn-block my-3 btn-dark">
Sign up
</button>
<p class="text-center">or sign up with</p>
<div class="mb-3 d-flex justify-content-center">
<button class="m-0 btn btn-flat">
<i class="fab fa-facebook-f"></i>
</button>
<button class="m-0 btn btn-flat">
<i class="fab fa-twitter"></i>
</button>
<button class="m-0 btn btn-flat">
<i class="fab fa-google-plus-g"></i>
</button>
</div>
<p class="text-center m-0">
Already have an account? <span class="text-primary" href="#">Sign In</span>
</p>
<hr />
<p class="text-center">
By clicking <em>Sign up</em> you agree to our
<span class="text-primary" href="#">terms of service</span>
</p>
</div>
</div>
</div>

Contrast Form Register

Bootstrap Form Register

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="text-center text-white" style="background:black;">
<p class="h5 mt-2 py-4 font-weight-bold">Sign up</p>
</div>
<div class="mx-4 mt-4 p-3">
<div class="row mb-n4">
<div class="col">
<div class="cdb-form">
<input type="email" class="form-control" />
<label>First Name</label>
</div>
</div>
<div class="col">
<div class="cdb-form">
<input type="text" class="form-control" />
<label>Last Name</label>
</div>
</div>
<div class="cdb-form">
<input type="email" class="form-control" />
<label>E-mail</label>
</div>
<div class="cdb-form">
<input type="password" class="form-control" />
<label>Password</label>
</div>
<p class="text-muted text-center small mt-n3">At least 8 characters and 1 digit</p>
<div class="cdb-form">
<input type="text" class="form-control" />
<label>Phone number</label>
</div>
<p class="text-muted text-center small mt-n3">Optional - for two step authentication</p>
</div>
<div class="d-flex justify-content-center align-items-center mt-4">
<input class="mr-2" type="checkbox" />
<p class="m-0">Subscribe to our newsletter</p>
</div>
<button class="btn btn-block my-3 btn-outline-dark">
Sign up
</button>
<p class="text-center">or sign up with</p>
<div class="mb-3 d-flex justify-content-center">
<button class="m-0 btn">
<i class="fab fa-facebook-f"></i>
</button>
<button class="m-0 btn">
<i class="fab fa-twitter"></i>
</button>
<button class="m-0 btn">
<i class="fab fa-linkedin-in"></i>
</button>
<button class="m-0 btn">
<i class="fab fa-github"></i>
</button>
</div>
<p class="text-center m-0">
Already have an account? <span class="text-primary" href="#">Sign In</span>
</p>
<hr />
<p class="text-center">
By clicking <em>Sign up</em> you agree to our
<span class="text-primary" href="#">terms of service</span>
</p>
</div>
</div>
</div>

Default Form Subscription

Bootstrap Form Subscription

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center mt-4 mb-2">
<p class="h4">Subscribe</p>
</div>
<p class="text-center mt-4 font-weight-light">
Join our mailing list. We write rarely, but only the best content.
</p>
<p class="text-center">
<span class="font-weight-light text-primary mb-4" href="#">See the last newsletter</span>
</p>
<div class="cdb-form">
<input type="text" class="form-control border-top-0 border-left-0 border-right-0" />
<label>Name</label>
</div>
<div class="cdb-form">
<input type="email" class="form-control border-top-0 border-left-0 border-right-0" />
<label>E-mail</label>
</div>
<button class="btn btn-dark btn-block my-3">
Subscribe
</button>
</div>
</div>
</div>

Contrast Form Subscription

Bootstrap Form Contrast Subscription

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="text-center text-white" style="background:black;">
<p class="h5 mt-2 py-4 font-weight-bold">Subscribe</p>
</div>
<div class="mx-4 p-3">
<p class="text-center mt-2">
Join our mailing list. We write rarely, but only the best content.
</p>
<p class="text-center"><span class="text-primary" href="#">See the last newsletter</span></p>
<div class="cdb-form">
<input type="text" class="form-control" />
<label>Name</label>
</div>
<div class="cdb-form">
<input type="email" class="form-control" />
<label>E-mail</label>
</div>
<button class="btn btn-block btn-outline-dark my-3">
Subscribe
</button>
</div>
</div>
</div>

Default Form Contact

Bootstrap Form Contact Default

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center mt-4 mb-5">
<p class="h4">Contact us</p>
</div>
<div class="cdb-form">
<input type="text" class="form-control border-top-0 border-left-0 border-right-0" />
<label>Name</label>
</div>
<div class="cdb-form">
<input type="email" class="form-control border-top-0 border-left-0 border-right-0" />
<label>E-mail</label>
</div>
<p class="text-center m-0">Subject</p>
<select class="select w-100">
<option>Resources</option>
<option>Docs</option>
<option>Contact</option>
</select>
<div class="cdb-form mt-4">
<textarea class="form-control border-top-0 border-left-0 border-right-0"></textarea>
<label>Message</label>
</div>
<div class="d-flex justify-content-center align-items-center mt-4">
<input class="mr-2" type="checkbox" />
<p class="m-0">Send me a copy of this message</p>
</div>
<button class="btn btn-block btn-dark my-3">
Send
</button>
</div>
</div>
</div>

Contrast Form Contact

Bootstrap Form Contact Contrast

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div style="background:black;" class="text-center text-white mb-4">
<p class="h5 mt-2 py-4 font-weight-bold">Contact Us</p>
</div>
<div class="mx-4 p-3">
<div class="cdb-form">
<input type="text" class="form-control" />
<label>Name</label>
</div>
<div class="cdb-form">
<input type="email" class="form-control" />
<label>E-mail</label>
</div>
<p class="text-center m-0 text-muted">Subject</p>
<select class="select w-100">
<option>Resources</option>
<option>Docs</option>
<option>Contact</option>
</select>
<div class="cdb-form mt-4">
<textarea class="form-control"></textarea>
<label>Message</label>
</div>
<div class="d-flex justify-content-center align-items-center mt-4">
<input class="mr-2" type="checkbox" />
<p class="m-0">Send me a copy of this message</p>
</div>
<button class="btn btn-block btn-outline-dark my-3">
Send
</button>
</div>
</div>
</div>

Login Form with Icons

Bootstrap Form Login with Icons

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center my-4">
<p class="h4 font-weight-bold">Sign in</p>
</div>
<div class="cdb-form">
<i class="fa fa-envelope prefix"></i>
<input type="email" class="form-control" />
<label>E-mail</label>
</div>
<div class="cdb-form">
<i class="fa fa-lock prefix"></i>
<input type="password" class="form-control" />
<label>Password</label>
</div>
<button style="width:40%;" class="btn btn-success btn-block mt-5 mx-auto">
Login
</button>
</div>
</div>
</div>

Login Form with Outside Label

Bootstrap Form Login with Outside Label

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center mt-4 mb-4">
<p class="h4">Sign in</p>
</div>
<label htmlFor="defaultLoginEmail" class="text-muted">
Your email
</label>
<div class="cdb-form">
<input type="email" id="defaultLoginEmail" class="form-control" />
</div>
<label htmlFor="defaultLoginPassword" class="text-muted">
Your password
</label>
<div class="cdb-form">
<input type="password" id="defaultLoginPassword" class="form-control" />
</div>
<button style="width:40%;" class="btn btn-primary btn-block mt-5 mx-auto">
Login
</button>
</div>
</div>
</div>

Sign Up Form with Icon

Bootstrap Form Signup with Icon

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center my-4">
<p class="h4 font-weight-bold">Sign in</p>
</div>
<div class="cdb-form">
<i class="fa fa-user prefix text-muted"></i>
<input type="text" class="form-control" />
<label>Your name</label>
</div>
<div class="cdb-form">
<i class="fa fa-envelope prefix text-muted"></i>
<input type="email" class="form-control" />
<label>Your Email</label>
</div>
<div class="cdb-form">
<i class="fa fa-exclamation-triangle prefix text-muted"></i>
<input type="email" class="form-control" />
<label>Confirm your Email</label>
</div>
<div class="cdb-form">
<i class="fa fa-lock prefix text-muted"></i>
<input type="password" class="form-control" />
<label>Your Password</label>
</div>
<button style="width:40%;" class="btn btn-primary btn-block mt-5 mx-auto">
Register
</button>
</div>
</div>
</div>

Sign Up Form Outside Label

Bootstrap Form Sign Up Outside Label

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center mt-4 mb-4">
<p class="h4">Sign in</p>
</div>
<label htmlFor="defaultLoginName" class="text-muted">
Your name
</label>
<div class="cdb-form">
<input type="text" id="defaultLoginName" class="form-control" />
</div>
<label htmlFor="defaultLoginEmail1" class="text-muted">
Your email
</label>
<div class="cdb-form">
<input type="email" id="defaultLoginEmail1" class="form-control" />
</div>
<label htmlFor="confirmLoginEmail1" class="text-muted">
Confirm your Email
</label>
<div class="cdb-form">
<input type="email" id="confirmLoginEmail1" class="form-control" />
</div>
<label htmlFor="defaultLoginPassword1" class="text-muted">
Your password
</label>
<div class="cdb-form">
<input type="password" id="defaultLoginPassword1" class="form-control" />
</div>
<button style="width:40%;" class="btn btn-danger btn-block mt-5 mx-auto">
Register
</button>
</div>
</div>
</div>

Subscription Form with Icon

Bootstrap Form Subscription with Icon

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center my-4">
<p class="h4 font-weight-bold">Subscribe</p>
</div>
<div class="cdb-form">
<i class="fa fa-user prefix text-muted"></i>
<input type="text" class="form-control" />
<label>Your Name</label>
</div>
<div class="cdb-form">
<i class="fa fa-envelope prefix text-muted"></i>
<input type="email" class="form-control" />
<label>Your Email</label>
</div>
<button style="width:40%;" class="btn btn-outline-primary btn-block mt-5 mx-auto">
Send
<i class="fa fa-paper-plane"></i>
</button>
</div>
</div>
</div>

Subscription Form with Outside Label

Bootstrap Form Subscription with Outside Label

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center mt-4 mb-4">
<p class="h4">Subscribe</p>
</div>
<label htmlFor="defaultLoginName2" class="text-muted">
Your Name
</label>
<div class="cdb-form">
<input type="text" id="defaultLoginName2" class="form-control" />
</div>
<label htmlFor="defaultLoginEmail2" class="text-muted">
Your email
</label>
<div class="cdb-form">
<input type="email" id="defaultLoginEmail2" class="form-control" />
</div>
<button style="width:40%;" class="btn btn-outline-danger btn-block mt-5 mx-auto">
Send
<i class="fa fa-paper-plane"></i>
</button>
</div>
</div>
</div>

Contact Form with Icon

Bootstrap Form Contact with Icon

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center my-4">
<p class="h4 font-weight-bold">Write to us</p>
</div>
<div class="cdb-form">
<i class="fa fa-user prefix text-muted"></i>
<input type="text" class="form-control" />
<label>Your name</label>
</div>
<div class="cdb-form">
<i class="fa fa-envelope prefix text-muted"></i>
<input type="email" class="form-control" />
<label>Your Email</label>
</div>
<div class="cdb-form">
<i class="fa fa-tags prefix text-muted"></i>
<input type="text" class="form-control" />
<label>Subject</label>
</div>
<div class="cdb-form">
<i class="fa fa-envelope prefix text-muted"></i>
<input type="text" class="form-control" />
<label>Your Message</label>
</div>
<button style="width:40%;" class="btn btn-outline-secondary btn-block mt-5 mx-auto">
Send
<i class="fa fa-paper-plane"></i>
</button>
</div>
</div>
</div>

Contact Form without Icon

Bootstrap Form Contact without Icon

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center mt-4 mb-4">
<p class="h4">Write to us</p>
</div>
<label htmlFor="defaultLoginName3" class="text-muted">
Your name
</label>
<div class="cdb-form">
<input type="text" id="defaultLoginName3" class="form-control" />
</div>
<label htmlFor="defaultLoginEmail3" class="text-muted">
Your email
</label>
<div class="cdb-form">
<input type="email" id="defaultLoginEmail3" class="form-control" />
</div>
<label htmlFor="confirmLoginEmail3" class="text-muted">
Subject
</label>
<div class="cdb-form">
<input type="text" id="confirmLoginEmail3" class="form-control" />
</div>
<label htmlFor="defaultLoginPassword3" class="text-muted">
Your message
</label>
<div class="cdb-form">
<textarea id="defaultLoginPassword3" class="form-control"></textarea>
</div>
<button style="width:40%;" class="btn btn-outline-secondary btn-block mt-5 mx-auto">
Send
<i class="fa fa-paper-plane"></i>
</button>
</div>
</div>
</div>

Form Login

Bootstrap Form Login

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center my-4">
<p class="h4 font-weight-bold">Sign in</p>
</div>
<div class="cdb-form">
<input type="email" class="form-control" />
<label>E-mail</label>
</div>
<div class="cdb-form">
<input type="password" class="form-control" />
<label>Password</label>
</div>
<p class="mt-n3 text-right"><span class="text-primary" href="#">Forgot Password ?</span></p>
<button class="btn btn-dark btn-block my-4 mx-0">
Sign in
</button>
<p class="text-center">or sign in with</p>
<div class="my-3 d-flex justify-content-center">
<button class="m-0 btn">
<i class="fab fa-facebook-f"></i>
</button>
<button class="m-0 btn">
<i class="fab fa-twitter"></i>
</button>
<button class="m-0 btn">
<i class="fab fa-google-plus-g"></i>
</button>
</div>
<hr />
<p class="text-center">Not a member? <span class="text-primary" href="#">Sign up</span></p>
</div>
</div>
</div>

Sign Up

Bootstrap Form SignUp

html
html
<div class="container">
<div class="border d-flex flex-column" style="width:30rem;">
<div class="mx-4 p-3">
<div class="text-center my-4">
<p class="h4">Sign up</p>
</div>
<div class="cdb-form">
<input type="email" class="form-control" />
<label>E-mail</label>
</div>
<div class="cdb-form">
<input type="password" class="form-control" />
<label>Password</label>
</div>
<div class="d-flex align-items-center">
<input type="checkbox" />
<p class="mb-0 ml-3">
Accept the <span class="text-primary" href="#">terms and conditions</span>
</p