Form

Snippet #1

Book for Speaking or
Workshops

Call me at: 123-567-7890 or Book online by fill below form.

Please enter name.
Please enter email.
Please select workshops.
<!--start gallery section -->
<section class="pt-8 pb-0">
	<div class="container-fluid">
		<div class="row g-0">
			<div class="col-md-3 col-12">
				<img src="../assets/images/gallery-img-1.jpg" alt="" class="img-fluid border-end border-white h-lg-100" />
			</div>

			<div class="col-md-3 col-12">
				<img src="../assets/images/gallery-img-2.jpg" alt="" class="img-fluid border-bottom border-white h-lg-100" />

				<img src="../assets/images/gallery-img-3.jpg" alt="" class="img-fluid border-bottom border-white h-lg-100" />
			</div>

			<div class="col-md-3 col-12">
				<img src="../assets/images/gallery-img-4.jpg" alt="" class="img-fluid border-bottom border-white h-lg-100 border-start" />

				<img src="../assets/images/gallery-img-5.jpg" alt="" class="img-fluid border-bottom border-white h-lg-100 border-start" />
			</div>
			<div class="col-md-3 col-12">
				<img src="../assets/images/gallery-img-6.jpg" alt="" class="img-fluid border-start border-white h-lg-100" />
			</div>
		</div>
	</div>
	<!-- workshop form -->
	<div class="container">
		<div class="row">
			<div class="offset-lg-3 col-lg-6 offset-md-1 col-md-10 col-12">
				<div class="card mt-lg-n18 mt-n12">
					<div class="card-body p-5">
						<div class="mb-4 text-center">
							<!--content-->
							<h2 class="mb-3">
								Book for Speaking or
								<br />
								Workshops
							</h2>
							<p class="mb-0 font-14">
								Call me at:
								<span class="text-dark">123-567-7890</span>
								or Book online by fill below form.
							</p>
						</div>
						<!-- form -->
						<form class="d-flex flex-column gap-3 needs-validation" novalidate>
							<div>
								<!-- label -->
								<label for="workshopFormName" class="form-label visually-hidden">Name</label>
								<!-- input -->
								<input type="text" class="form-control" id="workshopFormName" name="workshopFormName" placeholder="Name" required />
								<div class="invalid-feedback">Please enter name.</div>
							</div>
							<div>
								<!-- label -->
								<label for="workshopFormEmail" class="form-label visually-hidden">Email</label>
								<!-- input -->
								<input type="email" class="form-control" id="workshopFormEmail" name="workshopFormEmail" placeholder="Email" required />
								<div class="invalid-feedback">Please enter email.</div>
							</div>

							<div>
								<!-- select -->
								<label for="selectTask" class="form-label visually-hidden">Time</label>
								<select class="form-select" id="selectTask" required>
									<option selected disabled value="">Select Workshops</option>
									<option value="1">Business Coaching</option>
									<option value="2">Relationship</option>
									<option value="3">Lifecoaching</option>
								</select>
								<div class="invalid-feedback">Please select workshops.</div>
							</div>
							<!-- button -->
							<div class="d-grid">
								<button type="submit" class="btn btn-primary">Book Now</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--end of gallery section-->

Snippet #2

Join the Program

This Masterclass is absolutely FREE and plays in your local
time. You can choose your preferred session below.

Please enter name.
Please enter email.
Please select date.
Please select time.

By clicking the button above, you are creating an account with Coach and agree to our Privacy Policy and Terms of Use , including receiving emails. 

<!--start program-->
<section class="pt-0 pb-0">
	<div class="container">
		<div class="row">
			<div class="offset-lg-2 col-lg-8 col-md-12 col-12 mb-5">
				<div class="card z-1">
					<div class="card-body p-4 p-lg-9">
						<!--heading-->
						<div class="mb-6 text-center">
							<h2 class="mb-3">Join the Program</h2>
							<p>
								This Masterclass is absolutely FREE and plays in your local
								<br />
								time. You can choose your preferred session below.
							</p>
						</div>
						<!-- form -->
						<form class="row g-3 needs-validation" novalidate>
							<div class="col-12 col-md-6">
								<!-- label -->
								<label for="programFormName" class="form-label">Name</label>
								<!-- input -->
								<input type="text" class="form-control" id="programFormName" placeholder="Name" name="programFormName" required="" />
								<div class="invalid-feedback">Please enter name.</div>
							</div>

							<div class="col-12 col-md-6">
								<!-- label -->
								<label for="programFormEmail" class="form-label">Email</label>
								<!-- input -->
								<input type="email" class="form-control" id="programFormEmail" placeholder="Email" name="programFormEmail" required="" />
								<div class="invalid-feedback">Please enter email.</div>
							</div>
							<div class="col-12 col-md-6">
								<!-- label -->
								<label for="program-date" class="form-label">Date</label>
								<!-- input -->
								<input type="text" class="form-control" id="program-date" placeholder="Select Date" name="program-date" required="" />
								<div class="invalid-feedback">Please select date.</div>
							</div>
							<div class="col-12 col-md-6">
								<!-- select -->
								<label for="selectTime" class="form-label">Time</label>
								<select class="form-select" id="selectTime" required>
									<option selected disabled value="">Select time</option>
									<option value="1">10:00 AM</option>
									<option value="2">12:00 PM</option>
									<option value="3">02:40 PM</option>
								</select>
								<div class="invalid-feedback">Please select time.</div>
							</div>
							<div class="col-12">
								<!-- button -->
								<div class="d-grid">
									<button type="submit" class="btn btn-primary">Reserve My Spot Now</button>
								</div>
							</div>
							<div class="col-12">
								<!-- para -->
								<p class="text-muted mb-0 small">
									By clicking the button above, you are creating an account with Coach and agree to our
									<a href="#" class="text-secondary fw-semi-bold">Privacy Policy</a>
									and
									<a href="#" class="text-secondary fw-semi-bold">Terms of Use</a>
									, including receiving emails.
								</p>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--end of program-->

Snippet #3

Make following your passion your full time job

Learn How To Play A Different Game In Business With Your Own Rules

Please enter name.
Please enter email.
We will never send you spam. 
<!--start form section-->
<section class="pb-xxl-16 pb-lg-8 py-6">
	<div class="container">
		<!--row-->
		<div class="row">
			<div class="offset-xl-3 col-xl-6 col-md-8 offset-md-2 col-12">
				<div class="mb-5 text-center">
					<!--content-->
					<h2 class="h1 mb-3">Make following your passion your full time job</h2>
					<p>Learn How To Play A Different Game In Business With Your Own Rules</p>
				</div>
			</div>
			<!--col-->
			<div class="offset-lg-2 col-lg-8 col-md-12 col-12">
				<!-- form -->
				<form class="row g-3 needs-validation" novalidate>
					<div class="col-lg-5 col-md-5 col-12">
						<!-- label -->
						<label for="jobFormName" class="form-label visually-hidden">name</label>
						<!-- input -->
						<input type="text" class="form-control" id="jobFormName" name="jobFormName" placeholder="Name" required />
						<div class="invalid-feedback">Please enter name.</div>
					</div>
					<div class="col-lg-5 col-md-5 col-12">
						<!-- label -->
						<label for="jobFormEmail" class="form-label visually-hidden"></label>
						<!-- input -->
						<input type="email" class="form-control" id="jobFormEmail" name="jobFormEmail" placeholder="Email" required />
						<div class="invalid-feedback">Please enter email.</div>
					</div>
					<div class="col-lg-2 col-md-2 col-12">
						<!-- button -->
						<button class="btn btn-warning" type="submit">Submit</button>
					</div>
					<div class="col-12">
						<small class="text-muted">We will never send you spam.</small>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>
<!--end of course section-->

Snippet #4

Get Connect

Our team gets hundreds of emails, notes, and requests for different opportunities every day. And yes, my team members and I do read every single email that comes through.

I love Hearing From You

If you are looking for advice, please fill out this form. We will
find you and get in touch.

Please enter first name.
Please enter last name.
Please enter email.
Please select purpose.

Speaking inquiries:

123-456-7890

Business inquiries:

info@coachexample.com

Press Contact:

farris@coach.com

Follow me on

<!--start hero section -->
<section
	class="bg-shape bg-cover"
	style="background-image: linear-gradient(180deg, rgba(30, 24, 53, 0.4) 0%, rgba(30, 24, 53, 0.4) 90.16%), url(../assets/images/contact-hero-img.jpg)"
>
	<div class="container">
		<div class="row">
			<div class="offset-xxl-3 col-xxl-6 col-lg-10 offset-lg-1 col-md-12 col-12">
				<div class="text-center py-xxl-20 py-12 py-lg-16">
					<h1 class="mb-3 display-4 text-white">Get Connect</h1>
					<p class="lead text-light mb-4 mb-lg-0">
						Our team gets hundreds of emails, notes, and requests for different opportunities every day. And yes, my team members and I do read every single email that comes
						through.
					</p>
				</div>
			</div>
		</div>
	</div>
</section>
<!--end of hero section-->
<!--start conact form -->
<section class="pb-xxl-16 pb-lg-8 pb-6">
	<div class="container">
		<div class="row">
			<div class="offset-xxl-2 col-xxl-8 col-lg-10 offset-lg-1 col-md-12 col-12">
				<div class="card mt-n12 mb-xxl-12 mb-8">
					<div class="card-body p-4 p-lg-8">
						<div class="mb-5 text-center">
							<h2 class="mb-3">I love Hearing From You</h2>
							<p>
								If you are looking for advice, please fill out this form. We will
								<br />
								find you and get in touch.
							</p>
						</div>
						<form class="row g-3 needs-validation" novalidate>
							<div class="col-md-6 col-12">
								<!-- label -->
								<label for="hearingFormName" class="form-label visually-hidden">First Name</label>
								<!-- input -->
								<input type="text" class="form-control" id="hearingFormName" placeholder="First Name" name="hearingFormName" required />
								<div class="invalid-feedback">Please enter first name.</div>
							</div>
							<div class="col-md-6 col-12">
								<!-- label -->
								<label for="hearingFormLName" class="form-label visually-hidden">Last Name</label>
								<!-- input -->
								<input type="text" class="form-control" id="hearingFormLName" placeholder="Last Name" name="hearingFormLName" required />
								<div class="invalid-feedback">Please enter last name.</div>
							</div>
							<div class="col-12">
								<!-- label -->
								<label for="hearingFormEmail" class="form-label visually-hidden">Email</label>
								<!-- input -->
								<input type="email" class="form-control" id="hearingFormEmail" placeholder="Email" name="hearingFormEmail" required />
								<div class="invalid-feedback">Please enter email.</div>
							</div>
							<div class="col-12">
								<!-- label -->
								<label for="selectpurpose" class="form-label visually-hidden">Purpose</label>
								<!-- select -->
								<select class="form-select" id="selectpurpose" required>
									<option selected disabled value="">Select Purpose</option>
									<option value="1">Business Coaching</option>
									<option value="2">Relationship</option>
									<option value="3">Lifecoaching</option>
								</select>
								<div class="invalid-feedback">Please select purpose.</div>
							</div>
							<div class="col-12">
								<!-- button -->
								<div class="d-grid">
									<button type="submit" class="btn btn-primary">Send Messages</button>
								</div>
							</div>
						</form>
					</div>
				</div>
				<!-- contact info -->
				<div class="row">
					<div class="col-lg-4 col-md-4 col-12">
						<div class="text-center mb-6 mb-md-0">
							<h4 class="h5 mb-2">Speaking inquiries:</h4>
							<p class="text-danger fw-bold mb-0">123-456-7890</p>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-12">
						<div class="text-center mb-6 mb-md-0">
							<h4 class="h5 mb-2">Business inquiries:</h4>
							<a href="#" class="text-danger fw-bold">info@coachexample.com</a>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-12">
						<div class="text-center">
							<h4 class="h5 mb-2">Press Contact:</h4>
							<a href="#" class="text-danger fw-bold">farris@coach.com</a>
						</div>
					</div>
				</div>
				<!-- social media -->
				<div class="row">
					<div class="offset-lg-3 col-lg-6 col-md-12 col-12">
						<div class="text-center mt-xxl-14 mt-8">
							<h4 class="mb-4">Follow me on</h4>
							<ul class="list-inline mb-0">
								<li class="list-inline-item">
									<a href="" class="social-btn sb-facebook sb-round btn-light"><i class="fab fa-facebook-f"></i></a>
								</li>
								<li class="list-inline-item">
									<a href="" class="social-btn sb-twitter sb-round btn-light"><i class="fab fa-twitter"></i></a>
								</li>
								<li class="list-inline-item">
									<a href="" class="social-btn sb-linkedin sb-round btn-light"><i class="fab fa-linkedin"></i></a>
								</li>
								<li class="list-inline-item">
									<a href="" class="social-btn sb-youtube sb-round btn-light"><i class="fab fa-youtube"></i></a>
								</li>
								<li class="list-inline-item">
									<a href="" class="social-btn sb-instagram sb-round btn-light"><i class="fab fa-instagram"></i></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--end of contact form-->

Snippet #5

On-Demand

Boost Your Sales Efficiency by 10x to Close Faster

Execute latest Sales Marketing Strategies to Change Your Game In The Face of Uncertainty.

51:04 minutes

Speakers

avatar
Bradley Williams
Sales Executive Coach
avatar
Maria Wicker
Customer Success Coach

27th Dec 2024, 10AM GMT

Define the business objectives and direction which the sales and marketing strategies are supporting. Ensure clarity and understanding. Broad customer segmentation completed, including demographic profiles, purchasing behaviour, needs and value.

Against the key brand values and desired outcomes by customers (for example: price, speedy turnaround, high quality), define the position that the company should occupy within the marketplace.

Key Learning

  • Building your talent management dream team
  • Empowering managers to recruit and retain top talent
  • Building your marketing strategy strong

Register for the webinar now!

Please enter email.
Please enter first name.
Please enter last name.
Please enter phone number.
Please select city
Please select state
<!--start booking details-->
<section class="py-12 bg-light">
	<div class="container">
		<div class="row">
			<div class="col-md-6 col-12">
				<span class="mb-3 badge bg-secondary-soft">On-Demand</span>
				<h1 class="mb-3">Boost Your Sales Efficiency by 10x to Close Faster</h1>
				<p class="lead mb-3">Execute latest Sales Marketing Strategies to Change Your Game In The Face of Uncertainty.</p>

				<span class="text-secondary">51:04 minutes</span>
				<h3 class="mt-5">Speakers</h3>
				<div class="d-flex mt-5 align-items-center">
					<img src="../assets/images/avatar-3.png" alt="avatar" class="avatar-md rounded-circle" />
					<div class="ms-3 lh-1">
						<h5 class="mb-0">Bradley Williams</h5>
						<span class="font-12">Sales Executive Coach</span>
					</div>
				</div>
				<div class="d-flex mt-4 mb-6 align-items-center">
					<img src="../assets/images/avatar-4.png" alt="avatar" class="avatar-md rounded-circle" />
					<div class="ms-3 lh-1">
						<h5 class="mb-0">Maria Wicker</h5>
						<span class="font-12">Customer Success Coach</span>
					</div>
				</div>
				<h4>27th Dec 2024, 10AM GMT</h4>
				<p>
					Define the business objectives and direction which the sales and marketing strategies are supporting. Ensure clarity and understanding. Broad customer segmentation
					completed, including demographic profiles, purchasing behaviour, needs and value.
				</p>
				<p>
					Against the key brand values and desired outcomes by customers (for example: price, speedy turnaround, high quality), define the position that the company should
					occupy within the marketplace.
				</p>
				<h4 class="mt-4 mb-3">Key Learning</h4>
				<ul class="list-unstyled">
					<li>
						<i class="fe fe-chevron-right"></i>
						Building your talent management dream team
					</li>
					<li>
						<i class="fe fe-chevron-right"></i>
						Empowering managers to recruit and retain top talent
					</li>
					<li>
						<i class="fe fe-chevron-right"></i>
						Building your marketing strategy strong
					</li>
				</ul>
			</div>
			<!-- webinar form -->
			<div class="col-md-6 col-12">
				<div class="card rounded-3 shadow-sm">
					<div class="card-body p-6">
						<h3 class="mb-4">Register for the webinar now!</h3>
						<form class="row gy-3 needs-validation" novalidate>
							<div class="col-md-12 col-12">
								<!-- label -->
								<label for="webinarFormEmail" class="form-label">
									Email
									<span class="text-danger">*</span>
								</label>
								<!-- input -->
								<input type="email" id="webinarFormEmail" class="form-control" name="webinarFormEmail" placeholder="Email Address" required />
								<div class="invalid-feedback">Please enter email.</div>
							</div>
							<div class="col-md-12 col-12">
								<!-- label -->
								<label for="webinarFormName" class="form-label">
									First Name
									<span class="text-danger">*</span>
								</label>
								<!-- input -->
								<input type="text" id="webinarFormName" class="form-control" name="webinarFormName" placeholder="First Name" required />
								<div class="invalid-feedback">Please enter first name.</div>
							</div>
							<div class="col-md-12 col-12">
								<!-- label -->
								<label for="webinarFormLName" class="form-label">
									Last Name
									<span class="text-danger">*</span>
								</label>
								<!-- input -->
								<input type="text" id="webinarFormLName" class="form-control" name="webinarFormLName" placeholder="Last Name" required />
								<div class="invalid-feedback">Please enter last name.</div>
							</div>
							<div class="col-md-12 col-12">
								<!-- label -->
								<label for="webinarFormCompany" class="form-label">
									Company Name
									<span class="text-muted">(optional)</span>
								</label>
								<!-- input -->
								<input type="text" id="webinarFormCompany" class="form-control" name="webinarFormCompany" placeholder="Company Name" />
							</div>
							<div class="col-md-12 col-12">
								<!-- label -->
								<label for="webinarFormPhone" class="form-label">Phone</label>
								<!-- input -->
								<input type="text" id="webinarFormPhone" class="form-control" name="webinarFormPhone" placeholder="Phone" required />
								<div class="invalid-feedback">Please enter phone number.</div>
							</div>
							<div class="col-12 col-md-12">
								<!-- label -->
								<label class="city" for="seclectCity">City</label>
								<!-- select -->
								<select class="form-select" id="seclectCity" required>
									<option selected disabled value="">Select City</option>
									<option value="Ahmedabad">Ahmedabad</option>
									<option value="Jaipur">Jaipur</option>
									<option value="Bombay">Bombay</option>
								</select>
								<div class="invalid-feedback">Please select city</div>
							</div>
							<div class="col-12 col-md-12">
								<!-- label -->
								<label class="state" for="seclectState">State</label>
								<!-- select -->
								<select class="form-select" id="seclectState" required>
									<option selected disabled value="">Select State</option>
									<option value="Gujarat">Gujarat</option>
									<option value="Rajasthan">Rajasthan</option>
									<option value="Maharashtra">Maharashtra</option>
								</select>
								<div class="invalid-feedback">Please select state</div>
							</div>
							<div class="col-12 col-md-12">
								<!-- button -->
								<div class="d-grid">
									<button class="btn btn-primary" type="submit">Register</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--end of booking details-->

Snippet #6

logo

Simple Ways to Transform Your Life - Life Hack

5 Simple Ways to Transform Your Life – and Change the World in the Process.

book
shape

Download the eBook

Please enter first name.
Please enter last name.
Please enter email.
Please enter company name.

By submitting your information, you agree to Coach Terms of Service and Privacy Policy . You can opt out anytime. 

<!--start hero section-->
<section class="bg-shape bg-dark border-top border-primary border-4">
	<div class="container">
		<div class="row">
			<div class="offset-lg-3 col-lg-6 col-md-12 col-12">
				<div class="py-12 pt-lg-16 pb-lg-17 text-center">
					<div class="mb-5">
						<a href="../index.html"><img src="../assets/images/logo.svg" alt="logo" /></a>
					</div>
					<h1 class="text-white mb-4">Simple Ways to Transform Your Life - Life Hack</h1>
					<p class="lead">5 Simple Ways to Transform Your Life – and Change the World in the Process.</p>
				</div>
			</div>
		</div>
	</div>
</section>
<!--end of hero section-->
<!--start Form section-->
<section class="container mt-n10 mt-lg-n12">
	<div class="row">
		<div class="offset-lg-1 col-lg-10 col-md-12 col-12">
			<div class="card">
				<div class="row g-0">
					<div class="col-12 col-md-6 col-lg-6 rounded-start bg-light text-center d-flex align-item-center position-relative">
						<img src="../assets/images/book.png" alt="book" class="img-fluid" />
						<div class="d-none d-md-block position-absolute bottom-0 start-0 ms-n14 mb-n10">
							<img src="../assets/images/shape.svg" alt="shape" />
						</div>
					</div>
					<div class="col-lg-6 col-md-6 col-12">
						<div class="card-body p-6 rounded-end">
							<h3 class="mb-3">Download the eBook</h3>
							<form class="d-flex flex-column gap-3 needs-validation" novalidate>
								<div>
									<!-- lable -->
									<label class="form-label" for="downloadFormName">
										First Name
										<span class="text-danger">*</span>
									</label>
									<!-- input -->
									<input class="form-control" type="text" name="downloadFormName" id="downloadFormName" placeholder="First Name" required />
									<div class="invalid-feedback">Please enter first name.</div>
								</div>
								<div>
									<!-- lable -->
									<label class="form-label" for="downloadFormLName">
										Last Name
										<span class="text-danger">*</span>
									</label>
									<!-- input -->
									<input class="form-control" type="text" name="downloadFormLName" id="downloadFormLName" placeholder="Last Name" required />
									<div class="invalid-feedback">Please enter last name.</div>
								</div>
								<div>
									<!-- lable -->
									<label class="form-label" for="downloadFormEmail">
										Email
										<span class="text-danger">*</span>
									</label>
									<!-- input -->
									<input class="form-control" type="email" name="downloadFormEmail" id="downloadFormEmail" placeholder="Email Address" required />
									<div class="invalid-feedback">Please enter email.</div>
								</div>
								<div>
									<!-- lable -->
									<label class="form-label" for="downloadFormCompany">Company Name</label>
									<!-- input -->
									<input class="form-control" type="text" name="downloadFormCompany" id="downloadFormCompany" placeholder="Company Name" required />
									<div class="invalid-feedback">Please enter company name.</div>
								</div>
								<!-- button -->
								<div class="d-grid">
									<button type="submit" class="btn btn-primary">Download Book</button>
								</div>
								<!-- para -->
								<p class="font-13 mb-0">
									By submitting your information, you agree to Coach
									<a href="#">Terms of Service</a>
									and
									<a href="#">Privacy Policy</a>
									. You can opt out anytime.
								</p>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--end of form section-->

Snippet #7

Call Us: +1 123.456.7890

Let’s talk about your business.

Your 60-minute Free Coaching Session is the next step to realizing your dream for your business—and your life.

Our Coaching Program is designed for owners and CEOs who want more— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed felis a ex faucibus vehicula. Praesent suscipit id diam at semper.

Please enter first name.
Please enter last name.
Please enter email.
Please enter phone number.
Please write message.
Please write comment.
	<!-- content -->
<div class="container-fluid ps-lg-0 pe-lg-0">
	<div class="row g-0">
		<div class="col-lg-6 col-md-12 col-12">
			<div class="p-xl-12 py-4 pe-xl-9 p-lg-8">
				<div class="d-flex justify-content-between mb-7 align-items-center">
					<a href="../index.html"><img src="../assets/images/logo-dark.svg" alt="" /></a>
					<span class="font-14 fw-bold text-dark">Call Us: +1 123.456.7890</span>
				</div>
				<div class="mb-10">
					<h1 class="display-4 mb-4">Let’s talk about your business.</h1>
					<p class="lead">Your 60-minute Free Coaching Session is the next step to realizing your dream for your business—and your life.</p>
					<p>
						Our Coaching Program is designed for owners and CEOs who want more— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed felis a ex faucibus
						vehicula. Praesent suscipit id diam at semper.
					</p>
					<div id="scroll-nav">
						<a href="#form" class="btn btn-dark mt-3">Get Started</a>
					</div>
				</div>
				<!-- form section -->
				<div id="form">
					<form class="row g-3 needs-validation" novalidate>
						<div class="col-6">
							<!-- lable -->
							<label class="form-label" for="businessFormName">
								First Name
								<span class="text-danger">*</span>
							</label>
							<!-- input -->
							<input class="form-control" type="text" name="businessFormName" id="businessFormName" placeholder="First Name" required="" />
							<div class="invalid-feedback">Please enter first name.</div>
						</div>
						<div class="col-6">
							<!-- lable -->
							<label class="form-label" for="businessFormLName">
								Last Name
								<span class="text-danger">*</span>
							</label>
							<!-- input -->
							<input class="form-control" type="text" name="businessFormLName" id="businessFormLName" placeholder="Last Name" required="" />
							<div class="invalid-feedback">Please enter last name.</div>
						</div>
						<div class="col-12">
							<!-- lable -->
							<label class="form-label" for="businessFormEmail">
								Email
								<span class="text-danger">*</span>
							</label>
							<!-- input -->
							<input class="form-control" type="email" name="businessFormEmail" id="businessFormEmail" placeholder="Email Address" required="" />
							<div class="invalid-feedback">Please enter email.</div>
						</div>
						<div class="col-12">
							<!-- lable -->
							<label class="form-label" for="businessFormPhone">
								What's your phone number?
								<span class="text-danger">*</span>
							</label>
							<!-- input -->
							<input class="form-control" type="text" name="businessFormPhone" id="businessFormPhone" placeholder="Phone" required="" />
							<div class="invalid-feedback">Please enter phone number.</div>
						</div>
						<div class="col-12">
							<!-- lable -->
							<label class="form-label" for="businessFormtext">
								What's your biggest frustration?
								<span class="text-danger">*</span>
							</label>
							<!-- textarea -->
							<textarea class="form-control" id="businessFormtext" rows="3" required></textarea>
							<div class="invalid-feedback">Please write message.</div>
						</div>
						<div class="col-12">
							<!-- lable -->
							<label class="form-label" for="businessFormMessages">Anything else we should know?</label>
							<!-- textarea -->
							<textarea class="form-control" id="businessFormMessages" rows="3" required></textarea>
							<div class="invalid-feedback">Please write comment.</div>
						</div>
						<div class="col-12">
							<!-- button -->
							<div class="d-grid">
								<button type="submit" class="btn btn-primary">Request a Call</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- image -->
		<div class="col-lg-6 d-lg-flex align-items-center d-none d-md-none d-lg-block bg-cover" style="background-image: url(../assets/images/avatar-big-1.jpg)"></div>
	</div>
</div>

Snippet #8

avatar

Your avatar

PNG or JPG no bigger than 800px wide and tall.

General information

Please enter first name.
Please enter last name.
Please enter email.
Please enter phone.

Address

Please enter address.
Please enter address.
Please select city.
Please select country.
Please enter zipcode.
<div class="card rounded-3 mb-4">
<!-- card body -->
<div class="card-body p-4">
	<div class="d-lg-flex align-items-center justify-content-between">
		<div class="d-flex align-items-center mb-4 mb-lg-0">
			<img src="../assets/images/avatar-1.png" id="img-uploaded" class="avatar-xl rounded-circle" alt="avatar" />
			<div class="ms-3">
				<h4 class="mb-0">Your avatar</h4>
				<p class="mb-0 font-14">PNG or JPG no bigger than 800px wide and tall.</p>
			</div>
		</div>
		<div>
			<a href="#" class="btn btn-primary btn-sm">Upload Photo</a>

			<a href="#" class="btn btn-light btn-sm">Delete Photo</a>
		</div>
	</div>
	<hr class="my-5" />

	<div>
		<!-- form -->
		<form class="row g-3 needs-validation" novalidate>
			<div class="col-12 col-md-12">
				<h4 class="mb-3">General information</h4>
			</div>
			<div class="col-12 col-md-6">
				<!-- label -->
				<label class="form-label" for="informationFormName">
					First Name
					<span class="text-danger">*</span>
				</label>
				<!-- input -->
				<input type="text" id="informationFormName" class="form-control" name="informationFormName" placeholder="First Name" required />
				<div class="invalid-feedback">Please enter first name.</div>
			</div>
			<div class="col-12 col-md-6">
				<!-- label -->
				<label class="form-label" for="informationFormLName">
					Last Name
					<span class="text-danger">*</span>
				</label>
				<!-- input -->
				<input type="text" id="informationFormLName" class="form-control" name="informationFormLName" placeholder="Last Name" required />
				<div class="invalid-feedback">Please enter last name.</div>
			</div>
			<div class="col-12 col-md-6">
				<!-- label -->
				<label class="form-label" for="informationFormEmail">
					Email
					<span class="text-danger">*</span>
				</label>
				<!-- input -->
				<input type="text" id="informationFormEmail" class="form-control" name="informationFormEmail" placeholder="Email address here" required />
				<div class="invalid-feedback">Please enter email.</div>
			</div>
			<div class="col-12 col-md-6">
				<!-- label -->
				<label class="form-label" for="informationFormPhone">Phone</label>
				<!-- input -->
				<input type="text" id="informationFormPhone" class="form-control" name="informationFormPhone" placeholder="Phone" required />
				<div class="invalid-feedback">Please enter phone.</div>
			</div>
			<div class="col-12 col-md-12">
				<h4 class="mt-3">Address</h4>
			</div>
			<div class="col-12 col-md-12">
				<!-- label -->
				<label class="form-label" for="informationFormAddress">Address Line 1</label>
				<!-- input -->
				<input type="text" id="informationFormAddress" class="form-control" name="informationFormAddress" placeholder="Address" required />
				<div class="invalid-feedback">Please enter address.</div>
			</div>
			<div class="col-12 col-md-12">
				<!-- label -->
				<label class="form-label" for="informationFormAddress2">Address Line 2</label>
				<!-- input -->
				<input type="text" id="informationFormAddress2" class="form-control" name="informationFormAddress2" placeholder="Address" required />
				<div class="invalid-feedback">Please enter address.</div>
			</div>
			<div class="col-12 col-lg-4">
				<!-- label -->
				<label for="secectProfileCity" class="form-label">City</label>
				<!-- select -->
				<select class="form-select" id="secectProfileCity" required>
					<option selected disabled value="">Select City</option>
					<option value="1">Ahmedabad</option>
					<option value="2">Jaipur</option>
					<option value="3">Bombay</option>
				</select>
				<div class="invalid-feedback">Please select city.</div>
			</div>

			<div class="col-12 col-lg-4">
				<!-- label -->
				<label class="form-label" for="selectProfileCountry">Country</label>
				<!-- select -->
				<select class="form-select" id="selectProfileCountry" required>
					<option selected disabled value="">Select Country</option>
					<option value="1">India</option>
					<option value="2">UK</option>
					<option value="3">USA</option>
				</select>
				<div class="invalid-feedback">Please select country.</div>
			</div>
			<div class="col-12 col-lg-4">
				<!-- label -->
				<label class="form-label" for="informationFormZipcode">Zip</label>
				<!-- input -->
				<input type="text" id="informationFormZipcode" class="form-control" name="informationFormZipcode" placeholder="ex: 044" required />
				<div class="invalid-feedback">Please enter zipcode.</div>
			</div>
			<div class="col-12">
				<!-- button -->
				<button class="btn btn-primary" type="submit">Save Profile</button>
			</div>
		</form>
	</div>
</div>
</div>

Snippet #9

Password

Forgot your password?
Please enter current password.
Please enter new password.
Please enter confirm password.
<div class="card rounded-3 mb-4">
<div class="card-header bg-white p-4 d-lg-flex justify-content-between align-items-center">
	<h3 class="mb-0 h4">Password</h3>
	<a href="#" class="text-reset font-14">Forgot your password?</a>
</div>
<div class="card-body p-4">
	<!-- form -->
	<form class="row gy-3 needs-validation" novalidate>
		<div class="col-12 col-md-8">
			<!-- label -->
			<label class="form-label" for="forgorFormCurrent">Current Password</label>
			<!-- input -->
			<input type="password" id="forgorFormCurrent" class="form-control" name="forgorFormCurrent" placeholder="************" required="" />
			<div class="invalid-feedback">Please enter current password.</div>
		</div>
		<div class="col-12 col-md-4"></div>
		<div class="col-12 col-md-8">
			<!-- label -->
			<label class="form-label" for="forgotFormNew">New Password</label>
			<!-- input -->
			<input type="password" id="forgotFormNew" class="form-control" name="forgotFormNew" placeholder="************" required="" />
			<div class="invalid-feedback">Please enter new password.</div>
		</div>
		<div class="col-12 col-md-4"></div>
		<div class="col-12 col-md-8">
			<!-- label -->
			<label class="form-label" for="forgotFormCurrent">Confirm Password</label>
			<!-- input -->
			<input type="password" id="forgotFormCurrent" class="form-control" name="forgotFormCurrent" placeholder="************" required="" />
			<div class="invalid-feedback">Please enter confirm password.</div>
		</div>
		<div class="col-12 col-md-4"></div>
		<!-- button -->
		<div class="col-12">
			<button class="btn btn-primary" type="submit">Update Password</button>
		</div>
	</form>
</div>
</div>

Snippet #10

Add New

Back to User
Please enter first name.
Please enter last name.
Please enter email.
Please enter password.
Please select role.
Please select department.
Allow Permission
Please allow permission
Please allow permission
Please allow permission
<div class="card rounded-3">
<div class="card-header bg-white px-4 py-3 d-flex justify-content-between align-items-center">
	<h3 class="mb-0 h4">Add New</h3>
	<a href="#" class="btn btn-light btn-sm">Back to User</a>
</div>
<div class="card-body p-4">
	<form class="row g-3 needs-validation" novalidate>
		<div class="col-md-6 col-12">
			<!-- label -->
			<label for="userFormName" class="form-label">
				First Name
				<span class="text-danger">*</span>
			</label>
			<!-- input -->
			<input type="text" name="userFormName" id="userFormName" placeholder="First Name" name="userFormName" class="form-control" required />
			<div class="invalid-feedback">Please enter first name.</div>
		</div>
		<div class="col-md-6 col-12">
			<!-- label -->
			<label for="userFormLName" class="form-label">
				Last Name
				<span class="text-danger">*</span>
			</label>
			<!-- input -->
			<input type="text" name="userFormLName" id="userFormLName" placeholder="Last Name" name="userFormLName" class="form-control" required />
			<div class="invalid-feedback">Please enter last name.</div>
		</div>
		<div class="col-md-6 col-12">
			<!-- label -->
			<label for="userFormEmail" class="form-label">
				Email
				<span class="text-danger">*</span>
			</label>
			<!-- input -->
			<input type="email" name="userFormEmail" id="userFormEmail" placeholder="Email address here" name="userFormEmail" class="form-control" required />
			<div class="invalid-feedback">Please enter email.</div>
		</div>
		<div class="col-md-6 col-12">
			<!-- label -->
			<label for="userFormPassword" class="form-label">
				Password
				<span class="text-danger">*</span>
			</label>
			<!-- input -->
			<input type="password" name="userFormPassword" id="userFormPassword" placeholder="*******" name="userFormPassword" class="form-control" required />
			<div class="invalid-feedback">Please enter password.</div>
		</div>
		<div class="col-md-6 col-12">
			<!-- label -->
			<label for="selectUsrRole" class="form-label">
				Select Role
				<span class="text-danger">*</span>
			</label>
			<!-- select -->
			<select class="form-select" id="selectUsrRole" required>
				<option selected disabled value="">Select Role</option>
				<option value="Admin">Admin</option>
				<option value="Developer">Developer</option>
				<option value="Designer">Designer</option>
			</select>
			<div class="invalid-feedback">Please select role.</div>
		</div>
		<div class="col-md-6 col-12">
			<!-- label -->
			<label for="selectDepartment" class="form-label">
				Department
				<span class="text-danger">*</span>
			</label>
			<!-- select -->
			<select class="form-select" id="selectDepartment" required>
				<option selected disabled value="">Select Department</option>
				<option value="Admin">Admin</option>
				<option value="User">User</option>
				<option value="Front end Developer">Front end Developer</option>
			</select>
			<div class="invalid-feedback">Please select department.</div>
		</div>
		<div class="col-12">
			<h5 class="mb-3">Allow Permission</h5>
			<!-- form checkbox -->
			<div class="form-check form-check-inline">
				<input type="checkbox" class="form-check-input" id="administrator" name="administrator" required />
				<label class="form-check-label" for="administrator">Administrator</label>
				<div class="invalid-feedback">Please allow permission</div>
			</div>
			<div class="form-check form-check-inline">
				<input type="checkbox" class="form-check-input" id="supervisor" name="supervisor" required />
				<label class="form-check-label" for="supervisor">Supervisor</label>
				<div class="invalid-feedback">Please allow permission</div>
			</div>
			<div class="form-check form-check-inline">
				<input type="checkbox" class="form-check-input" id="operator" name="operator" required />
				<label class="form-check-label" for="operator">Operator</label>
				<div class="invalid-feedback">Please allow permission</div>
			</div>
		</div>
		<div class="col-12 mt-3">
			<button class="btn btn-primary btn-sm" type="submit">Save</button>
		</div>
	</form>
</div>
</div>