Address Form
Bootstrap 5 Address Form component
Responsive address form built with Bootstrap 5. Address form templates include basic examples, email validation, use of cards, use of photos & more.
Basic examples
Simple example of an address form on checkout. Visit the validation documentation in order to learn how to add email and phone number validation to specific input fields.
Billing details
Summary
- Products $53.98
- Shipping Gratis
-
Total amount$53.98
(including VAT)
<div class="row">
<div class="col-md-8 mb-4">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0">Biling details</h5>
</div>
<div class="card-body">
<form>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row mb-4">
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form7Example1" class="form-control" />
<label class="form-label" for="form7Example1">First name</label>
</div>
</div>
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form7Example2" class="form-control" />
<label class="form-label" for="form7Example2">Last name</label>
</div>
</div>
</div>
<!-- Text input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form7Example3" class="form-control" />
<label class="form-label" for="form7Example3">Company name</label>
</div>
<!-- Text input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form7Example4" class="form-control" />
<label class="form-label" for="form7Example4">Address</label>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form7Example5" class="form-control" />
<label class="form-label" for="form7Example5">Email</label>
</div>
<!-- Number input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="number" id="form7Example6" class="form-control" />
<label class="form-label" for="form7Example6">Phone</label>
</div>
<!-- Message input -->
<div data-mdb-input-init class="form-outline mb-4">
<textarea class="form-control" id="form7Example7" rows="4"></textarea>
<label class="form-label" for="form7Example7">Additional information</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-2">
<input class="form-check-input me-2" type="checkbox" value="" id="form7Example8" checked />
<label class="form-check-label" for="form7Example8">
Create an account?
</label>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0">Summary</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
Products
<span>$53.98</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
Shipping
<span>Gratis</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>Total amount</strong>
<strong>
<p class="mb-0">(including VAT)</p>
</strong>
</div>
<span><strong>$53.98</strong></span>
</li>
</ul>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg btn-block">
Make purchase
</button>
</div>
</div>
</div>
</div>
Delivery address form card
You can embed an address form inside a Card. This example uses a background generated with our Gradient Generator and an irregular shaped card in order to make it more visually interesting.
We've also added animation on scroll to make the design more dynamic and highlight the speed of delivery.
Welcome
You are 30 seconds away from compleating your order!
Delivery Details
<div class="row mt-3 mx-3" style="margin-top:25px ;">
<div class="col-md-3">
<div style="margin-top: 50px; margin-left: 10px;" class="text-center">
<i id="animationDemo" data-mdb-animation="slide-right" data-mdb-toggle="animation"
data-mdb-animation-reset="true" data-mdb-animation-start="onScroll"
data-mdb-animation-on-scroll="repeat" class="fas fa-3x fa-shipping-fast text-white"></i>
<h3 class="mt-3 text-white">Welcome</h3>
<p class="white-text">You are 30 seconds away from compleating your order!</p>
</div>
<div class="text-center">
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-white btn-rounded back-button">Go back</button>
</div>
</div>
<div class="col-md-9 justify-content-center">
<div class="card card-custom pb-4">
<div class="card-body mt-0 mx-5">
<div class="text-center mb-3 pb-2 mt-3">
<h4 style="color: #495057 ;">Delivery Details</h4>
</div>
<form class="mb-0">
<div class="row mb-4">
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form9Example1" class="form-control input-custom" />
<label class="form-label" for="form9Example1">First name</label>
</div>
</div>
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form9Example2" class="form-control input-custom" />
<label class="form-label" for="form9Example2">Last name</label>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form9Example3" class="form-control input-custom" />
<label class="form-label" for="form9Example3">City</label>
</div>
</div>
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form9Example4" class="form-control input-custom" />
<label class="form-label" for="form9Example4">Zip</label>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form9Example6" class="form-control input-custom" />
<label class="form-label" for="form9Example6">Address</label>
</div>
</div>
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="email" id="typeEmail" class="form-control input-custom" />
<label class="form-label" for="typeEmail">Email</label>
</div>
</div>
</div>
<div class="float-end ">
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-rounded"
style="background-color: #0062CC ;">Place order</button>
</div>
</form>
</div>
</div>
</div>
</div>
.gradient-custom {
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
}
.card-custom {
border-bottom-left-radius: 10% 50%;
border-top-left-radius: 10% 50%;
background-color: #f8f9fa ;
}
.input-custom {
background-color: white ;
}
.white-text {
color: hsl(52, 0%, 98%);
font-weight: 100 ;
font-size: 14px;
}
.back-button {
background-color: hsl(52, 0%, 98%);
font-weight: 700;
color: black ;
margin-top: 50px ;
}
Advanced address form
With the use of MDB components you can create a variety of simple & complex address forms.
Adding a Select menu with a country of delivery is one of the most common use cases. If you are planning to include the country list in your address form, you should also take a look at the list of Flags that can be easily included as icons.
Delivery Country:
Email address
your-email@gmail.com
1 item Edit
$35.00
Denim jacket
Black UK 8Qty:1
Delivery address
<div class="container my-5 py-5">
<!--Section: Design Block-->
<section>
<div class="row">
<div class="col-md-8">
<div class="card mb-4">
<div class="card-body">
<p class="text-uppercase h4 text-font">Delivery Country:</p>
<div class="row">
<div class="col-md-1">
<img src="https://mdbcdn.b-cdn.net/img/Others/extended-example/usa2.webp"
class="rounded-circle me-2" style="width: 35px;" alt="USA" />
</div>
<div class="col-md-8">
<select data-mdb-select-init>
<option value="1">United States</option>
<option value="2">Spain</option>
<option value="3">Poland</option>
<option value="4">Italy</option>
<option value="5">Greece</option>
<option value="6">Germany</option>
<option value="7">Croatia</option>
<option value="8">Sweden</option>
</select>
</div>
</div>
</div>
</div>
<div class="card mb-4 accordion" id="accordionExample">
<div class="card body accordion-item">
<h2 class="accordion-header" id="headingOne">
<div data-mdb-collapse-init class="accordion-button collapsed text-uppercase text-font h4" type="button"
data-mdb-target="#collapseOne" aria-expanded="false"
aria-controls="collapseOne">
Promo/Student Code or Vouchers
</div>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
data-mdb-parent="#accordionExample">
<div class="accordion-body">
<div data-mdb-input-init class="form-outline d-flex">
<input type="text" id="form1" class="form-control" />
<label class="form-label" for="form1">Enter code</label>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<p class="text-uppercase fw-bold mb-3 text-font">Email address</p>
<div class="row">
<div class="col-md-4">
<p>your-email@gmail.com</p>
</div>
<div class="col-md-7">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark float-end button-color "
data-mdb-ripple-color="dark">
Change
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-4 position-static">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0 text-font">1 item <span class="float-end mt-1"
style="font-size: 13px ;">Edit</span></h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
class="rounded-3" style="width: 100px;" alt="Blue Jeans Jacket" />
</div>
<div class="col-md-6 ms-3">
<span class="mb-0 text-price">$35.00</span>
<p class="mb-0 text-descriptions">Denim jacket </p>
<span class="text-descriptions fw-bold">Black</span> <span
class="text-descriptions fw-bold">UK 8</span>
<p class="text-descriptions mt-0">Qty:<span class="text-descriptions fw-bold">1</span>
</p>
</div>
</div>
<div class="card-footer mt-4">
<ul class="list-group list-group-flush">
<li
class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0 text-muted">
Subtotal
<span>$35.00</span>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center px-0 fw-bold text-uppercase">
Total to pay
<span>$35.00</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-8 mb-4">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0 text-font text-uppercase">Delivery address</h5>
</div>
<div class="card-body">
<form>
<div class="row mb-4">
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form11Example1" class="form-control" />
<label class="form-label" for="form11Example1">First name</label>
</div>
</div>
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form11Example2" class="form-control" />
<label class="form-label" for="form11Example2">Last name</label>
</div>
</div>
</div>
<!-- Text input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form11Example3" class="form-control" />
<label class="form-label" for="form11Example3">Company name</label>
</div>
<!-- Text input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form11Example4" class="form-control" />
<label class="form-label" for="form11Example4">Address</label>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form11Example5" class="form-control" />
<label class="form-label" for="form11Example5">Email</label>
</div>
<!-- Number input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="number" id="form11Example6" class="form-control" />
<label class="form-label" for="form11Example6">Phone</label>
</div>
<!-- Message input -->
<div data-mdb-input-init class="form-outline mb-4">
<textarea class="form-control" id="form11Example7" rows="4"></textarea>
<label class="form-label" for="form11Example7">Additional information</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-2">
<input class="form-check-input me-2" type="checkbox" value="" id="form11Example8" checked />
<label class="form-check-label" for="form11Example8">
Create an account?
</label>
</div>
</form>
</div>
</div>
<div class="text-center">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn button-order col-md-10">Place order</button>
</div>
</div>
</div>
</section>
<!--Section: Design Block-->
</div>
.text-font{
font-family: futura-pt,Tahoma,Geneva,Verdana,Arial,sans-serif;
font-weight: 700;
letter-spacing: .156rem;
font-size: 1.125rem;
}
.text-price{
padding: 0 .625rem;
font-family: futura-pt,Tahoma,Geneva,Verdana,Arial,sans-serif;
font-style: normal;
font-size: .75rem;
font-weight: 700;
line-height: .813rem;
letter-spacing: 1.6px;
}
.text-descriptions{
font-family: futura-pt,Tahoma,Geneva,Verdana,Arial,sans-serif;
font-style: normal;
font-size: .75rem;
font-weight: 400;
line-height: 1.125rem;
margin: .313rem 0 .938rem;
padding: 0 .625rem;
}
.button-color{
color: #4e4e4e ;
border-color: #4e4e4e ;
}
.button-order{
font-family: futura-pt,Tahoma,Geneva,Verdana,Arial,sans-serif;
font-style: normal;
font-size: .75rem;
font-weight: 700;
background-color: hsl(90, 40%, 50%);
color: white;
}
Address form with image
Adding an Image to your address form will make it more visually appealing.
In the example below we've used a Background Image to add some additional text on top. We've covered the image with Mask Overlay to ensure high contrast - text on top of an image is usually easier to read when you apply a mask. For white text in the example, a dark mask is perfect but you can customize your mask by tweaking its color, transparency and blur effect with our Mask Generator.
Lorem ipsum delivery
Everything at your doorstep.
Delivery Info
<div class="container py-5">
<div class="row d-flex justify-content-center align-items-center">
<div class="col">
<div class="card my-4 shadow-3">
<div class="row g-0">
<div class="col-xl-6 d-xl-block bg-image">
<img src="https://mdbcdn.b-cdn.net/img/Others/extended-example/delivery.webp" alt="Sample photo"
class="img-fluid" />
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6)">
<div class=" justify-content-center align-items-center h-100">
<div class=" text-center" style="margin-top: 220px;">
<i class="fas fa-truck text-white fa-3x"></i>
<p class="text-white title-style">Lorem ipsum delivery</p>
<p class="text-white mb-0"></p>
<figure class="text-center mb-0">
<blockquote class="blockquote text-white">
<p class="pb-3">
<i class="fas fa-quote-left fa-xs text-primary"
style="color: hsl(210, 100%, 50%) ;"></i>
<span class="lead font-italic">Everything at your doorstep.</span>
<i class="fas fa-quote-right fa-xs text-primary"
style="color: hsl(210, 100%, 50%) ;"></i>
</p>
</blockquote>
</figure>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card-body p-md-5 text-black">
<h3 class="mb-4 text-uppercase">Delivery Info</h3>
<div class="row">
<div class="col-md-6 mb-4">
<div data-mdb-input-init 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 data-mdb-input-init 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 data-mdb-input-init 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="row">
<div class="col-md-6 mb-4">
<select data-mdb-select-init>
<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 data-mdb-select-init>
<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 data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form3Example3" class="form-control form-control-lg" />
<label class="form-label" for="form3Example3">Zip</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form3Example2" class="form-control form-control-lg" />
<label class="form-label" for="form3Example2">Email</label>
</div>
<div class="d-flex justify-content-end pt-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-success btn-lg ms-2"
style="background-color:hsl(210, 100%, 50%) ">Place order</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.title-style{
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: 700;
font-size: 20px;
color: hsl(52, 0%, 98%);
}
.title-quote{
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: 400;
color: hsl(52, 0%, 98%);
}