Registration form
Bootstrap 5 Registration form component
Responsive Registration form built with Bootstrap 5. Free signup form templates & pages ready to download. Various design and functionalities.
Basic example
Sign up
<section class="vh-100" style="background-color: #eee;">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-11">
<div class="card text-black" style="border-radius: 25px;">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
<form class="mx-1 mx-md-4">
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="text" id="form3Example1c" class="form-control" />
<label class="form-label" for="form3Example1c">Your Name</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="email" id="form3Example3c" class="form-control" />
<label class="form-label" for="form3Example3c">Your Email</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4c" class="form-control" />
<label class="form-label" for="form3Example4c">Password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Repeat your password</label>
</div>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<input
class="form-check-input me-2"
type="checkbox"
value=""
id="form2Example3c"
/>
<label class="form-check-label" for="form2Example3">
I agree all statements in <a href="#!">Terms of service</a>
</label>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="button" class="btn btn-primary btn-lg">Register</button>
</div>
</form>
</div>
<div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
<img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-registration/draw1.webp" class="img-fluid" alt="Sample image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Registration form #2
Registration Info
<section class="h-100 h-custom" style="background-color: #8fc4b7;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-8 col-xl-6">
<div class="card rounded-3">
<img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-registration/img3.webp" class="w-100" style="border-top-left-radius: .3rem; border-top-right-radius: .3rem;" alt="Sample photo">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2 pb-md-0 mb-md-5 px-md-2">Registration Info</h3>
<form class="px-md-2">
<div class="form-outline mb-4">
<input type="text" id="form3Example1q" class="form-control" />
<label class="form-label" for="form3Example1q">Name</label>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline datepicker">
<input
type="text"
class="form-control"
id="exampleDatepicker1"
/>
<label for="exampleDatepicker1" class="form-label">Select a date</label>
</div>
</div>
<div class="col-md-6 mb-4">
<select class="select">
<option value="1" disabled>Gender</option>
<option value="2">Female</option>
<option value="3">Male</option>
<option value="4">Other</option>
</select>
</div>
</div>
<div class="mb-4">
<select class="select">
<option value="1" disabled>Class</option>
<option value="2">Class 1</option>
<option value="3">Class 2</option>
<option value="4">Class 3</option>
</select>
</div>
<div class="row mb-4 pb-2 pb-md-0 mb-md-5">
<div class="col-md-6">
<div class="form-outline">
<input type="text" id="form3Example1w" class="form-control" />
<label class="form-label" for="form3Example1w">Registration code</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-success btn-lg mb-1">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
@media (min-width: 1025px) {
.h-custom {
height: 100vh !important;
}
}
Registration form #3
Registration Form
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 col-lg-9 col-xl-7">
<div class="card shadow-2-strong card-registration" style="border-radius: 15px;">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Registration Form</h3>
<form>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="firstName" class="form-control form-control-lg" />
<label class="form-label" for="firstName">First Name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="lastName" class="form-control form-control-lg" />
<label class="form-label" for="lastName">Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 d-flex align-items-center">
<div class="form-outline datepicker w-100">
<input
type="text"
class="form-control form-control-lg"
id="birthdayDate"
/>
<label for="birthdayDate" class="form-label">Birthday</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1">Gender: </h6>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="femaleGender"
value="option1"
checked
/>
<label class="form-check-label" for="femaleGender">Female</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="maleGender"
value="option2"
/>
<label class="form-check-label" for="maleGender">Male</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="otherGender"
value="option3"
/>
<label class="form-check-label" for="otherGender">Other</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 pb-2">
<div class="form-outline">
<input type="email" id="emailAddress" class="form-control form-control-lg" />
<label class="form-label" for="emailAddress">Email</label>
</div>
</div>
<div class="col-md-6 mb-4 pb-2">
<div class="form-outline">
<input type="tel" id="phoneNumber" class="form-control form-control-lg" />
<label class="form-label" for="phoneNumber">Phone Number</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<select class="select form-control-lg">
<option value="1" disabled>Choose option</option>
<option value="2">Subject 1</option>
<option value="3">Subject 2</option>
<option value="4">Subject 3</option>
</select>
<label class="form-label select-label">Choose option</label>
</div>
</div>
<div class="mt-4 pt-2">
<input class="btn btn-primary btn-lg" type="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom {
/* fallback for old browsers */
background: #f093fb;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to bottom right, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to bottom right, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1))
}
.card-registration .select-input.form-control[readonly]:not([disabled]) {
font-size: 1rem;
line-height: 2.15;
padding-left: .75em;
padding-right: .75em;
}
.card-registration .select-arrow {
top: 13px;
}
Registration form #4
Student registration form
Gender:
<section class="h-100 bg-dark">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col">
<div class="card card-registration my-4">
<div class="row g-0">
<div class="col-xl-6 d-none d-xl-block">
<img
src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-registration/img4.webp"
alt="Sample photo"
class="img-fluid"
style="border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;"
/>
</div>
<div class="col-xl-6">
<div class="card-body p-md-5 text-black">
<h3 class="mb-5 text-uppercase">Student registration form</h3>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="form3Example1m" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1m">First name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="form3Example1n" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1n">Last name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="form3Example1m1" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1m1">Mother's name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="form3Example1n1" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1n1">Father's name</label>
</div>
</div>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example8" class="form-control form-control-lg" />
<label class="form-label" for="form3Example8">Address</label>
</div>
<div class="d-md-flex justify-content-start align-items-center mb-4 py-2">
<h6 class="mb-0 me-4">Gender: </h6>
<div class="form-check form-check-inline mb-0 me-4">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="femaleGender"
value="option1"
/>
<label class="form-check-label" for="femaleGender">Female</label>
</div>
<div class="form-check form-check-inline mb-0 me-4">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="maleGender"
value="option2"
/>
<label class="form-check-label" for="maleGender">Male</label>
</div>
<div class="form-check form-check-inline mb-0">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="otherGender"
value="option3"
/>
<label class="form-check-label" for="otherGender">Other</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<select class="select">
<option value="1">State</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
</select>
</div>
<div class="col-md-6 mb-4">
<select class="select">
<option value="1">City</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
</select>
</div>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example9" class="form-control form-control-lg" />
<label class="form-label" for="form3Example9">DOB</label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example90" class="form-control form-control-lg" />
<label class="form-label" for="form3Example90">Pincode</label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example99" class="form-control form-control-lg" />
<label class="form-label" for="form3Example99">Course</label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example97" class="form-control form-control-lg" />
<label class="form-label" for="form3Example97">Email ID</label>
</div>
<div class="d-flex justify-content-end pt-3">
<button type="button" class="btn btn-light btn-lg">Reset all</button>
<button type="button" class="btn btn-warning btn-lg ms-2">Submit form</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.card-registration .select-input.form-control[readonly]:not([disabled]) {
font-size: 1rem;
line-height: 2.15;
padding-left: .75em;
padding-right: .75em;
}
.card-registration .select-arrow {
top: 13px;
}
Registration form #5
Apply for a job
Full name
Email address
Full name
Upload CV
Upload your CV/Resume or any other relevant file. Max file size 50 MB
<section class="vh-100" style="background-color: #2779e2;">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-xl-9">
<h1 class="text-white mb-4">Apply for a job</h1>
<div class="card" style="border-radius: 15px;">
<div class="card-body">
<div class="row align-items-center pt-4 pb-3">
<div class="col-md-3 ps-5">
<h6 class="mb-0">Full name</h6>
</div>
<div class="col-md-9 pe-5">
<input type="text" class="form-control form-control-lg" />
</div>
</div>
<hr class="mx-n3">
<div class="row align-items-center py-3">
<div class="col-md-3 ps-5">
<h6 class="mb-0">Email address</h6>
</div>
<div class="col-md-9 pe-5">
<input type="email" class="form-control form-control-lg" placeholder="example@example.com" />
</div>
</div>
<hr class="mx-n3">
<div class="row align-items-center py-3">
<div class="col-md-3 ps-5">
<h6 class="mb-0">Full name</h6>
</div>
<div class="col-md-9 pe-5">
<textarea class="form-control" rows="3" placeholder="Message sent to the employer"></textarea>
</div>
</div>
<hr class="mx-n3">
<div class="row align-items-center py-3">
<div class="col-md-3 ps-5">
<h6 class="mb-0">Upload CV</h6>
</div>
<div class="col-md-9 pe-5">
<input class="form-control form-control-lg" id="formFileLg" type="file" />
<div class="small text-muted mt-2">Upload your CV/Resume or any other relevant file. Max file size 50 MB</div>
</div>
</div>
<hr class="mx-n3">
<div class="px-5 py-4">
<button type="submit" class="btn btn-primary btn-lg">Send application</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Registration form #6
General Infomation
Contact Details
<section class="h-100 h-custom gradient-custom-2">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12">
<div class="card card-registration card-registration-2" style="border-radius: 15px;">
<div class="card-body p-0">
<div class="row g-0">
<div class="col-lg-6">
<div class="p-5">
<h3 class="fw-normal mb-5" style="color: #4835d4;">General Infomation</h3>
<div class="mb-4 pb-2">
<select class="select">
<option value="1">Title</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<div class="row">
<div class="col-md-6 mb-4 pb-2">
<div class="form-outline">
<input type="text" id="form3Examplev2" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplev2">First name</label>
</div>
</div>
<div class="col-md-6 mb-4 pb-2">
<div class="form-outline">
<input type="text" id="form3Examplev3" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplev3">Last name</label>
</div>
</div>
</div>
<div class="mb-4 pb-2">
<select class="select">
<option value="1">Position</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<div class="mb-4 pb-2">
<div class="form-outline">
<input type="text" id="form3Examplev4" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplev4">Position</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 pb-2 mb-md-0 pb-md-0">
<div class="form-outline">
<input type="text" id="form3Examplev5" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplev5">Bussines Arena</label>
</div>
</div>
<div class="col-md-6">
<select class="select">
<option value="1">Employees</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-lg-6 bg-indigo text-white">
<div class="p-5">
<h3 class="fw-normal mb-5">Contact Details</h3>
<div class="mb-4 pb-2">
<div class="form-outline form-white">
<input type="text" id="form3Examplea2" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea2">Street + Nr</label>
</div>
</div>
<div class="mb-4 pb-2">
<div class="form-outline form-white">
<input type="text" id="form3Examplea3" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea3">Additional Information</label>
</div>
</div>
<div class="row">
<div class="col-md-5 mb-4 pb-2">
<div class="form-outline form-white">
<input type="text" id="form3Examplea4" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea4">Zip Code</label>
</div>
</div>
<div class="col-md-7 mb-4 pb-2">
<div class="form-outline form-white">
<input type="text" id="form3Examplea5" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea5">Place</label>
</div>
</div>
</div>
<div class="mb-4 pb-2">
<div class="form-outline form-white">
<input type="text" id="form3Examplea6" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea6">Country</label>
</div>
</div>
<div class="row">
<div class="col-md-5 mb-4 pb-2">
<div class="form-outline form-white">
<input type="text" id="form3Examplea7" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea7">Code +</label>
</div>
</div>
<div class="col-md-7 mb-4 pb-2">
<div class="form-outline form-white">
<input type="text" id="form3Examplea8" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea8">Phone Number</label>
</div>
</div>
</div>
<div class="mb-4">
<div class="form-outline form-white">
<input type="text" id="form3Examplea9" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea9">Your Email</label>
</div>
</div>
<div class="form-check d-flex justify-content-start mb-4 pb-3">
<input
class="form-check-input me-3"
type="checkbox"
value=""
id="form2Example3c"
/>
<label class="form-check-label text-white" for="form2Example3">
I do accept the <a href="#!" class="text-white"><u>Terms and Conditions</u></a> of your site.
</label>
</div>
<button type="button" class="btn btn-light btn-lg" data-mdb-ripple-color="dark">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@media (min-width: 1025px) {
.h-custom {
height: 100vh !important;
}
}
.card-registration .select-input.form-control[readonly]:not([disabled]) {
font-size: 1rem;
line-height: 2.15;
padding-left: .75em;
padding-right: .75em;
}
.card-registration .select-arrow {
top: 13px;
}
.gradient-custom-2 {
/* fallback for old browsers */
background: #a1c4fd;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(161, 196, 253, 1), rgba(194, 233, 251, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(161, 196, 253, 1), rgba(194, 233, 251, 1))
}
.bg-indigo {
background-color: #4835d4;
}
@media (min-width: 992px) {
.card-registration-2 .bg-indigo {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
@media (max-width: 991px) {
.card-registration-2 .bg-indigo {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
}
Registration form #7
Create an account
<section class="vh-100 bg-image" style="background-image: url('https://mdbcdn.b-cdn.net/img/Photos/new-templates/search-box/img4.webp');">
<div class="mask d-flex align-items-center h-100 gradient-custom-3">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 15px;">
<div class="card-body p-5">
<h2 class="text-uppercase text-center mb-5">Create an account</h2>
<form>
<div class="form-outline mb-4">
<input type="text" id="form3Example1cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1cg">Your Name</label>
</div>
<div class="form-outline mb-4">
<input type="email" id="form3Example3cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example3cg">Your Email</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form3Example4cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example4cg">Password</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form3Example4cdg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example4cdg">Repeat your password</label>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<input
class="form-check-input me-2"
type="checkbox"
value=""
id="form2Example3cg"
/>
<label class="form-check-label" for="form2Example3g">
I agree all statements in <a href="#!" class="text-body"><u>Terms of service</u></a>
</label>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-success btn-block btn-lg gradient-custom-4 text-body">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account? <a href="#!" class="fw-bold text-body"><u>Login here</u></a></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom-3 {
/* fallback for old browsers */
background: #84fab0;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5))
}
.gradient-custom-4 {
/* fallback for old browsers */
background: #84fab0;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1))
}