Basic example
<div class="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
<form>
<div class="form-group mb-6">
<label for="exampleInputEmail1" class="form-label inline-block mb-2 text-gray-700">Email address</label>
<input type="email" class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="block mt-1 text-xs text-gray-600">We'll never share your email with anyone
else.</small>
</div>
<div class="form-group mb-6">
<label for="exampleInputPassword1" class="form-label inline-block mb-2 text-gray-700">Password</label>
<input type="password" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="form-group form-check mb-6">
<input type="checkbox"
class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
id="exampleCheck1">
<label class="form-check-label inline-block text-gray-800" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Submit</button>
</form>
</div>
Login form
<div class="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
<form>
<div class="form-group mb-6">
<label for="exampleInputEmail2" class="form-label inline-block mb-2 text-gray-700">Email address</label>
<input type="email" class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputEmail2"
aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group mb-6">
<label for="exampleInputPassword2" class="form-label inline-block mb-2 text-gray-700">Password</label>
<input type="password" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputPassword2"
placeholder="Password">
</div>
<div class="flex justify-between items-center mb-6">
<div class="form-group form-check">
<input type="checkbox"
class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
id="exampleCheck2">
<label class="form-check-label inline-block text-gray-800" for="exampleCheck2">Remember me</label>
</div>
<a href="#!"
class="text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out">Forgot
password?</a>
</div>
<button type="submit" class="
w-full
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Sign in</button>
<p class="text-gray-800 mt-6 text-center">Not a member? <a href="#!"
class="text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out">Register</a>
</p>
</form>
</div>
Register form
<div class="block p-6 rounded-lg shadow-lg bg-white max-w-md">
<form>
<div class="grid grid-cols-2 gap-4">
<div class="form-group mb-6">
<input type="text" class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput123"
aria-describedby="emailHelp123" placeholder="First name">
</div>
<div class="form-group mb-6">
<input type="text" class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput124"
aria-describedby="emailHelp124" placeholder="Last name">
</div>
</div>
<div class="form-group mb-6">
<input type="email" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput125"
placeholder="Email address">
</div>
<div class="form-group mb-6">
<input type="password" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput126"
placeholder="Password">
</div>
<div class="form-group form-check text-center mb-6">
<input type="checkbox"
class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
id="exampleCheck25" checked>
<label class="form-check-label inline-block text-gray-800" for="exampleCheck25">Subscribe to our newsletter</label>
</div>
<button type="submit" class="
w-full
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Sign up</button>
</form>
</div>
Contact form
<div class="block p-6 rounded-lg shadow-lg bg-white max-w-md">
<form>
<div class="form-group mb-6">
<input type="text" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput7"
placeholder="Name">
</div>
<div class="form-group mb-6">
<input type="email" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput8"
placeholder="Email address">
</div>
<div class="form-group mb-6">
<textarea
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleFormControlTextarea13"
rows="3"
placeholder="Message"
></textarea>
</div>
<div class="form-group form-check text-center mb-6">
<input type="checkbox"
class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
id="exampleCheck87" checked>
<label class="form-check-label inline-block text-gray-800" for="exampleCheck87">Send me a copy of this message</label>
</div>
<button type="submit" class="
w-full
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Send</button>
</form>
</div>
Subscription form
Subscription form is a form used to get user information such as name and email address. Its main purpose is that your customers will receive emails whenever you introduce a new product or item. Creating such a form is crucial because it may help you generate more leads for your website. Therefore, in order to attract the attention of customers as well as call to action to enter user emails, create eye-catching, interesting forms as well as display them in a place where users can easily find them.
<div class="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
<form>
<div class="form-group mb-6">
<input type="text" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput90"
placeholder="Name">
</div>
<div class="form-group mb-6">
<input type="email" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput91"
placeholder="Email address">
</div>
<div class="form-group form-check text-center mb-6">
<input type="checkbox"
class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
id="exampleCheck96" checked>
<label class="form-check-label inline-block text-gray-800" for="exampleCheck96">I have read and agree to the terms</label>
</div>
<button type="submit" class="
w-full
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Subscribe</button>
</form>
</div>
If you are looking for more advanced options, try Bootstrap Forms from MDBootstrap.