Logo

Default Forms

Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Media / Equalizer Created with Sketch.
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Logo

Basic Form Layout

Please enter your full name
We'll never share your email with anyone else
$

								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control form-control-solid" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control form-control-solid" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group">
											<label>Subscription</label>
											<div class="input-group input-group-lg">
												<div class="input-group-prepend"><span class="input-group-text" >$</span></div>
												<input type="text" class="form-control form-control-solid" placeholder="99.9"/>
											</div>
										</div>
										<div class="form-group">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>

Section Separator

Please enter your full name
We'll never share your email with anyone else
$

								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>

										<div class="separator separator-dashed my-5"></div>

										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>

										<div class="separator separator-dashed my-5"></div>

										<div class="form-group">
											<label>Subscription</label>
											<div class="input-group">
												<div class="input-group-prepend"><span class="input-group-text" >$</span></div>
												<input type="text" class="form-control" placeholder="99.9"/>
											</div>
										</div>

										<div class="separator separator-dashed my-5"></div>

										<div class="form-group">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>

Horizontal Form Layout

1. Customer Info:

Please enter your full name
We'll never share your email with anyone else

2. Customer Account:

Please enter your account holder 

								<form class="form">
									<div class="card-body">
										<h3 class="font-size-lg text-dark font-weight-bold mb-6">1. Customer Info:</h3>
										<div class="mb-15">
											<div class="form-group row">
												<label class="col-lg-3 col-form-label">Full Name:</label>
												<div class="col-lg-6">
													<input type="email" class="form-control" placeholder="Enter full name"/>
													<span class="form-text text-muted">Please enter your full name</span>
												</div>
											</div>
											<div class="form-group row">
												<label class="col-lg-3 col-form-label">Email address:</label>
												<div class="col-lg-6">
													<input type="email" class="form-control" placeholder="Enter email"/>
													<span class="form-text text-muted">We'll never share your email with anyone else</span>
												</div>
											</div>
										</div>

										<h3 class="font-size-lg text-dark font-weight-bold mb-6">2. Customer Account:</h3>
										<div class="mb-3">
											<div class="form-group row">
												<label class="col-lg-3 col-form-label">Holder:</label>
												<div class="col-lg-6">
													<input type="email" class="form-control" placeholder="Enter full name"/>
													<span class="form-text text-muted">Please enter your account holder</span>
												</div>
											</div>
											<div class="form-group row">
												<label class="col-lg-3 col-form-label">Contact</label>
												<div class="col-lg-6">
													<div class="input-group">
														<div class="input-group-prepend"><span class="input-group-text"><i class="la la-chain"></i></span></div>
														<input type="text" class="form-control" placeholder="Phone number"/>
													</div>
												</div>
											</div>
											<div class="form-group row align-items-center">
												<label class="col-lg-3 col-form-label">Communication:</label>
												<div class="col-lg-6">
													<div class="checkbox-inline">
														<label class="checkbox">
															<input type="checkbox"/>
															<span></span>
															Email
														</label>
														<label class="checkbox">
															<input type="checkbox"/>
															<span></span>
															SMS
														</label>
														<label class="checkbox">
															<input type="checkbox"/>
															<span></span>
															Phone
														</label>
													</div>
												</div>
											</div>
										</div>

									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col-lg-3"></div>
											<div class="col-lg-6">
												<button type="reset" class="btn btn-success mr-2">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
										</div>
									</div>
								</form>

Form Label Aligment

1. Customer Info:

Please enter your full name
We'll never share your email with anyone else

2. Customer Account:

Please enter your account holder 

								<form class="form">
									<div class="card-body">
										<h3 class="font-size-lg text-dark font-weight-bold mb-6">1. Customer Info:</h3>
										<div class="mb-15">
											<div class="form-group row">
												<label class="col-lg-3 col-form-label text-right">Full Name:</label>
												<div class="col-lg-6">
													<input type="email" class="form-control" placeholder="Enter full name"/>
													<span class="form-text text-muted">Please enter your full name</span>
												</div>
											</div>
											<div class="form-group row">
												<label class="col-lg-3 col-form-label text-right">Email address:</label>
												<div class="col-lg-6">
													<input type="email" class="form-control" placeholder="Enter email"/>
													<span class="form-text text-muted">We'll never share your email with anyone else</span>
												</div>
											</div>
										</div>

										<h3 class="font-size-lg text-dark font-weight-bold mb-6">2. Customer Account:</h3>
										<div class="mb-3">
											<div class="form-group row">
												<label class="col-lg-3 col-form-label text-right">Holder:</label>
												<div class="col-lg-6">
													<input type="email" class="form-control" placeholder="Enter full name"/>
													<span class="form-text text-muted">Please enter your account holder</span>
												</div>
											</div>
											<div class="form-group row">
												<label class="col-lg-3 col-form-label text-right">Contact</label>
												<div class="col-lg-6">
													<div class="input-group">
														<div class="input-group-prepend"><span class="input-group-text"><i class="la la-chain"></i></span></div>
														<input type="text" class="form-control" placeholder="Phone number"/>
													</div>
												</div>
											</div>
											<div class="form-group row align-items-center">
												<label class="col-lg-3 col-form-label  text-right">Communication:</label>
												<div class="col-lg-6">
													<div class="checkbox-inline">
														<label class="checkbox">
															<input type="checkbox"/>
															<span></span>
															Email
														</label>
														<label class="checkbox">
															<input type="checkbox"/>
															<span></span>
															SMS
														</label>
														<label class="checkbox">
															<input type="checkbox"/>
															<span></span>
															Phone
														</label>
													</div>
												</div>
											</div>
										</div>

									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col-lg-3"></div>
											<div class="col-lg-6">
												<button type="reset" class="btn btn-success mr-2">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
										</div>
									</div>
								</form>
2024© Keenthemes
About Team Contact

Quick Actions finance & reports

Stockholm-icons / Shopping / Euro Created with Sketch. Accounting
Stockholm-icons / Communication / Mail-attachment Created with Sketch. Members
Stockholm-icons / Shopping / Box2 Created with Sketch. Projects
Stockholm-icons / Communication / Group Created with Sketch. Customers
Stockholm-icons / Shopping / Chart-bar1 Created with Sketch. Email
Stockholm-icons / Design / Color-profile Created with Sketch. Settings
Stockholm-icons / Shopping / Euro Created with Sketch. Orders

User Profile 15 messages

Ryan Smith
Art Director
Stockholm-icons / Communication / Mail-notification Created with Sketch. ryan@keen.com
Stockholm-icons / Communication / Adress-book2 Created with Sketch.
My Account
Profile info update
Stockholm-icons / General / Settings-1 Created with Sketch.
My Tasks
Todo and tasks
Stockholm-icons / General / Half-star Created with Sketch.
My Events
Logs and notifications
Stockholm-icons / Communication / Mail-opened Created with Sketch.
My Statements
latest tasks and projects
Sign Out
Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65% Stockholm-icons / Navigation / Angle-right Created with Sketch.
AH
Andreas Hawks Python Developer
+23% Stockholm-icons / Navigation / Angle-right Created with Sketch.
SC
Sarah Connor HTML, CSS. jQuery
-34% Stockholm-icons / Navigation / Angle-right Created with Sketch.
Pic
Amanda Harden UI/UX, Art Director
+72% Stockholm-icons / Navigation / Angle-right Created with Sketch.
SR
Sean Robbins UI/UX, Art Director
+65% Stockholm-icons / Navigation / Angle-right Created with Sketch.
JT
Jason Tatum ASP.NET Developer
+139% Stockholm-icons / Navigation / Angle-right Created with Sketch.

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
HTML RTL
Demo 2
HTML RTL
Demo 3
HTML RTL
Demo 4
HTML RTL
Demo 5
HTML RTL
Demo 6
HTML RTL
Demo 7
HTML RTL
Demo 8
Coming soon
Demo 9
Coming soon
Buy Keen Now!