Contact Us
These sections provide users with ways to get in touch with the company, organization, or individual.
Overview
"Contact Us" blocks are sections on websites or applications that provide users with ways to get in touch with the company, organization, or individual. These blocks may include contact forms, email addresses, phone numbers, physical addresses, or links to social media profiles.
Examples
Below are a few examples of “Contact Us” sections.
Example 1
Contact Us
Get in touch with us
Whether you have a question, need support, or just want to say hello — we’re here for you.
Phone
+1 (234) 567-8901
hello@yourcompany.com
Address
1234 Market Street, Suite 500
San Francisco, CA 94103, USA
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="img-fluid rounded-4"
alt="Contact Us"
/>
</div>
<div class="col-lg-6 offset-lg-1 mt-5 mt-lg-0">
<h1 class="text-primary text-uppercase fw-semibold fs-5 mb-2">Contact Us</h1>
<h2 class="mb-2">Get in touch with us</h2>
<p class="text-muted mb-4">
Whether you have a question, need support, or just want to say hello — we’re here for you.
</p>
<div class="d-flex gap-3 mb-3">
<i class="ri-phone-fill text-primary fs-3"></i>
<div>
<h5 class="mb-1">Phone</h5>
<p class="text-muted mb-0">+1 (234) 567-8901</p>
</div>
</div>
<div class="d-flex gap-3 mb-3">
<i class="ri-mail-fill text-primary fs-3"></i>
<div>
<h5 class="mb-1">Email</h5>
<p class="text-muted mb-0">hello@yourcompany.com</p>
</div>
</div>
<div class="d-flex gap-3">
<i class="ri-map-pin-fill text-primary fs-3"></i>
<div>
<h5 class="mb-1">Address</h5>
<p class="text-muted mb-0">1234 Market Street, Suite 500 <br />San Francisco, CA 94103, USA</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center"> <div class="col-lg-5"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid
rounded-4" alt="Contact Us" /> </div> <div class="col-lg-6
offset-lg-1 mt-5 mt-lg-0"> <h1 class="text-primary text-uppercase fw-semibold
fs-5 mb-2">Contact Us</h1> <h2 class="mb-2">Get in touch with
us</h2> <p class="text-muted mb-4"> Whether you have a question, need
support, or just want to say hello — we’re here for you. </p> <div class="d-flex
gap-3 mb-3"> <i class="ri-phone-fill text-primary fs-3"></i>
<div> <h5 class="mb-1">Phone</h5> <p class="text-muted
mb-0">+1 (234) 567-8901</p> </div> </div> <div class="d-flex
gap-3 mb-3"> <i class="ri-mail-fill text-primary fs-3"></i>
<div> <h5 class="mb-1">Email</h5> <p class="text-muted
mb-0">hello@yourcompany.com</p> </div> </div> <div
class="d-flex gap-3"> <i class="ri-map-pin-fill text-primary
fs-3"></i> <div> <h5 class="mb-1">Address</h5> <p
class="text-muted mb-0">1234 Market Street, Suite 500 <br />San Francisco, CA
94103, USA</p> </div> </div> </div> </div> </div>
</section>
Example 2
Contact Us
Whether you have a question, need support, or just want to say hello — we’re here for you.
Phone
+1 (234) 567-8901
hello@yourcompany.com
Address
1234 Market Street, Suite 500
San Francisco, CA 94103, USA
<section class="bg-body py-5">
<div class="container">
<i class="ri-customer-service-fill text-primary fs-1"></i>
<h2 class="mb-2">Contact Us</h2>
<p class="text-muted mb-4">
Whether you have a question, need support, or just want to say hello — we’re here for you.
</p>
<div class="row align-items-center">
<div class="col-lg-6">
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control form-control-lg" id="name" placeholder="John Doe">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control form-control-lg" id="email" placeholder="you@example.com">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control form-control-lg" id="message" rows="2" placeholder="Write your message here..."></textarea>
</div>
<button type="submit" class="btn btn-lg btn-primary w-100">Submit</button>
</form>
</div>
<div class="col-lg-5 offset-lg-1 mt-5 mt-lg-0">
<div class="d-flex gap-3 mb-3">
<i class="ri-phone-fill text-primary fs-3"></i>
<div>
<h5 class="mb-1">Phone</h5>
<p class="text-muted mb-0">+1 (234) 567-8901</p>
</div>
</div>
<div class="d-flex gap-3 mb-3">
<i class="ri-mail-fill text-primary fs-3"></i>
<div>
<h5 class="mb-1">Email</h5>
<p class="text-muted mb-0">hello@yourcompany.com</p>
</div>
</div>
<div class="d-flex gap-3">
<i class="ri-map-pin-fill text-primary fs-3"></i>
<div>
<h5 class="mb-1">Address</h5>
<p class="text-muted mb-0">1234 Market Street, Suite 500 <br />San Francisco, CA 94103, USA</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <i
class="ri-customer-service-fill text-primary fs-1"></i> <h2
class="mb-2">Contact Us</h2> <p class="text-muted mb-4">
Whether you have a question, need support, or just want to say hello — we’re here for you.
</p> <div class="row align-items-center"> <div
class="col-lg-6"> <form> <div class="mb-3"> <label
for="name" class="form-label">Name</label> <input
type="text" class="form-control form-control-lg" id="name"
placeholder="John Doe"> </div> <div class="mb-3"> <label
for="email" class="form-label">Email</label> <input
type="email" class="form-control form-control-lg" id="email"
placeholder="you@example.com"> </div> <div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control form-control-lg" id="message"
rows="2" placeholder="Write your message here..."></textarea>
</div> <button type="submit" class="btn btn-lg btn-primary
w-100">Submit</button> </form> </div> <div class="col-lg-5
offset-lg-1 mt-5 mt-lg-0"> <div class="d-flex gap-3 mb-3"> <i
class="ri-phone-fill text-primary fs-3"></i> <div> <h5
class="mb-1">Phone</h5> <p class="text-muted mb-0">+1 (234)
567-8901</p> </div> </div> <div class="d-flex gap-3 mb-3">
<i class="ri-mail-fill text-primary fs-3"></i> <div> <h5
class="mb-1">Email</h5> <p class="text-muted
mb-0">hello@yourcompany.com</p> </div> </div> <div
class="d-flex gap-3"> <i class="ri-map-pin-fill text-primary
fs-3"></i> <div> <h5 class="mb-1">Address</h5> <p
class="text-muted mb-0">1234 Market Street, Suite 500 <br />San Francisco, CA
94103, USA</p> </div> </div> </div> </div> </div>
</section>
Example 3
Contact Us
Get in touch with us
Whether you have a question, need support, or just want to say hello — we’re here for you.
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center gx-5">
<div class="col-lg-6">
<h1 class="text-primary text-uppercase fw-semibold fs-5 mb-2">Contact Us</h1>
<h2 class="mb-2">Get in touch with us</h2>
<p class="text-muted mb-3">
Whether you have a question, need support, or just want to say hello — we’re here for you.
</p>
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control form-control-lg" id="name" placeholder="John Doe">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control form-control-lg" id="email" placeholder="you@example.com">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control form-control-lg" id="message" rows="2" placeholder="Write your message here..."></textarea>
</div>
<button type="submit" class="btn btn-lg btn-primary w-100">Submit</button>
</form>
</div>
<div class="col-lg-6 pt-5 pt-lg-0">
<div class="ratio ratio-1x1">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d19804.362337859196!2d-0.13413989999999998!3d51.509865!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761b3339ecb7bb%3A0xf3f518b6c548f0d7!2sLondon%2C%20UK!5e0!3m2!1sen!2sin!4v1713182000000!5m2!1sen!2sin"
width="600"
height="600"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center gx-5"> <div class="col-lg-6"> <h1
class="text-primary text-uppercase fw-semibold fs-5 mb-2">Contact Us</h1>
<h2 class="mb-2">Get in touch with us</h2> <p class="text-muted
mb-3"> Whether you have a question, need support, or just want to say hello — we’re here
for you. </p> <form> <div class="mb-3"> <label
for="name" class="form-label">Name</label> <input
type="text" class="form-control form-control-lg" id="name"
placeholder="John Doe"> </div> <div class="mb-3"> <label
for="email" class="form-label">Email</label> <input
type="email" class="form-control form-control-lg" id="email"
placeholder="you@example.com"> </div> <div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control form-control-lg" id="message"
rows="2" placeholder="Write your message here..."></textarea>
</div> <button type="submit" class="btn btn-lg btn-primary
w-100">Submit</button> </form> </div> <div class="col-lg-6
pt-5 pt-lg-0"> <div class="ratio ratio-1x1"> <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d19804.362337859196!2d-0.13413989999999998!3d51.509865!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761b3339ecb7bb%3A0xf3f518b6c548f0d7!2sLondon%2C%20UK!5e0!3m2!1sen!2sin!4v1713182000000!5m2!1sen!2sin"
width="600" height="600" style="border:0;"
allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"> </iframe> </div>
</div> </div> </div> </section>
Example 4
Stay in the Loop
Subscribe with your email to receive the latest updates and exclusive content straight to your inbox.
<section class="bg-primary-subtle py-lg-4 my-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8 text-md-center py-5">
<h1 class="text-primary text-uppercase fw-semibold fs-5 mb-3">Stay in the Loop</h1>
<h2 class="mb-4">
Subscribe with your email to receive the latest updates and exclusive content straight
to your inbox.
</h2>
<form class="row justify-content-center g-2">
<div class="col-md-8 col-lg-6">
<input
type="email"
class="form-control form-control-lg"
placeholder="Enter your email"
required
>
</div>
<div class="col-md-auto">
<button type="submit" class="btn btn-lg btn-primary w-100">
Subscribe
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="bg-primary-subtle py-lg-4 my-5"> <div
class="container"> <div class="row justify-content-center"> <div
class="col-md-10 col-lg-8 text-md-center py-5"> <h1 class="text-primary
text-uppercase fw-semibold fs-5 mb-3">Stay in the Loop</h1> <h2
class="mb-4"> Subscribe with your email to receive the latest updates and exclusive
content straight to your inbox. </h2> <form class="row justify-content-center
g-2"> <div class="col-md-8 col-lg-6"> <input type="email"
class="form-control form-control-lg" placeholder="Enter your email" required
> </div> <div class="col-md-auto"> <button type="submit"
class="btn btn-lg btn-primary w-100"> Subscribe </button> </div>
</form> </div> </div> </div> </section>
Example 5
Contact Us
Get in touch with us
Phone
+1 (234) 567-8901
hello@yourcompany.com
Address
1234 Market Street, Suite 500 San Francisco, CA 94103, USA
<section class="bg-body py-5">
<div class="container">
<h1 class="text-center text-primary text-uppercase fw-semibold fs-5 mb-2">Contact Us</h1>
<h2 class="text-center mb-4">Get in touch with us</h2>
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<form class="mb-4">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control form-control-lg" id="name" placeholder="John Doe">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control form-control-lg" id="email" placeholder="you@example.com">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control form-control-lg" id="message" rows="3" placeholder="Write your message here..."></textarea>
</div>
<button type="submit" class="btn btn-lg btn-primary w-100">Submit</button>
</form>
<div class="card bg-secondary shadow border-0">
<div class="card-body">
<div class="d-flex gap-3 mb-3">
<i class="ri-phone-fill text-primary fs-3"></i>
<div>
<h5 class="mb-1">Phone</h5>
<p class="text-muted mb-0">+1 (234) 567-8901</p>
</div>
</div>
<div class="d-flex gap-3 mb-3">
<i class="ri-mail-fill text-primary fs-3"></i>
<div>
<h5 class="mb-1">Email</h5>
<p class="text-muted mb-0">hello@yourcompany.com</p>
</div>
</div>
<div class="d-flex gap-3">
<i class="ri-map-pin-fill text-primary fs-3"></i>
<div>
<h5 class="mb-1">Address</h5>
<p class="text-muted mb-0">1234 Market Street, Suite 500 San Francisco, CA 94103, USA</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <h1
class="text-center text-primary text-uppercase fw-semibold fs-5 mb-2">Contact
Us</h1> <h2 class="text-center mb-4">Get in touch with us</h2>
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3"> <form
class="mb-4"> <div class="mb-3"> <label for="name"
class="form-label">Name</label> <input type="text"
class="form-control form-control-lg" id="name" placeholder="John
Doe"> </div> <div class="mb-3"> <label for="email"
class="form-label">Email</label> <input type="email"
class="form-control form-control-lg" id="email"
placeholder="you@example.com"> </div> <div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control form-control-lg" id="message"
rows="3" placeholder="Write your message here..."></textarea>
</div> <button type="submit" class="btn btn-lg btn-primary
w-100">Submit</button> </form> <div class="card bg-secondary shadow
border-0"> <div class="card-body"> <div class="d-flex gap-3
mb-3"> <i class="ri-phone-fill text-primary fs-3"></i> <div>
<h5 class="mb-1">Phone</h5> <p class="text-muted mb-0">+1
(234) 567-8901</p> </div> </div> <div class="d-flex gap-3
mb-3"> <i class="ri-mail-fill text-primary fs-3"></i> <div>
<h5 class="mb-1">Email</h5> <p class="text-muted
mb-0">hello@yourcompany.com</p> </div> </div> <div
class="d-flex gap-3"> <i class="ri-map-pin-fill text-primary
fs-3"></i> <div> <h5 class="mb-1">Address</h5> <p
class="text-muted mb-0">1234 Market Street, Suite 500 San Francisco, CA 94103,
USA</p> </div> </div> </div> </div> </div> </div>
</section>
ESC