Contact Sections
Component #1
How can we help?
Need help, have questions or want to suggest a feature? Send us a message here.
Visit us:
153 Williamson Plaza, Maggieberg
Call us:
+1 (062) 109-9222
Email us:
example@site.com
<!-- Contact -->
<div class="container content-space-1">
<div class="mx-auto" style="max-width: 37.5rem;">
<!-- Card -->
<div class="card card-lg">
<div class="card-body">
<!-- Heading -->
<div class="w-lg-85 text-center mx-lg-auto mb-7">
<h4>How can we help?</h4>
<p class="fs-6">Need help, have questions or want to suggest a feature? Send us a message here.</p>
</div>
<!-- End Heading -->
<form>
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label visually-hidden" for="contactEmail">Your name</label>
<input type="text" class="form-control form-control-lg" name="name" id="contactName" placeholder="Your name" aria-label="Your name" required data-msg="Please enter your name.">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label visually-hidden" for="contactEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email" id="contactEmail" placeholder="Your email" aria-label="Your email" required data-msg="Please enter a valid email address.">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-12">
<!-- Form -->
<div class="mb-4">
<label class="form-label visually-hidden" for="contactDetails">Detail</label>
<textarea class="form-control form-control-lg" id="contactDetails" rows="5" placeholder="Tell us more about detail" aria-label="Tell us more about detail"></textarea>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="d-grid">
<button type="submit" class="btn btn-lg btn-primary">Submit</button>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Contact -->
<!-- Shape -->
<div class="shape-container">
<div class="shape shape-bottom text-primary-dark zi-0">
<svg width="3000" height="400" viewBox="0 0 3000 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 400H3000V0L0 400Z" fill="#fff"/>
</svg>
</div>
</div>
<!-- End Shape -->
<!-- Contact Info -->
<div class="bg-primary-dark">
<div class="container content-space-b-1">
<div class="row col-sm-divider col-divider-light">
<div class="col-sm-4">
<!-- Info -->
<div class="text-center py-sm-5">
<span class="svg-icon text-white mb-3">
@@include("../assets/vendor/duotone-icons/gen/gen018.svg")
</span>
<h5 class="text-white">Visit us:</h5>
<p class="text-white-70 mb-0">153 Williamson Plaza, Maggieberg</p>
</div>
<!-- End Info -->
</div>
<!-- End Col -->
<div class="col-sm-4">
<!-- Info -->
<div class="text-center py-sm-5">
<span class="svg-icon text-white mb-3">
@@include("../assets/vendor/duotone-icons/elc/elc002.svg")
</span>
<h5 class="text-white">Call us:</h5>
<p class="text-white-70 mb-0">+1 (062) 109-9222</p>
</div>
<!-- End Info -->
</div>
<!-- End Col -->
<div class="col-sm-4">
<!-- Info -->
<div class="text-center py-sm-5">
<span class="svg-icon text-white mb-3">
@@include("../assets/vendor/duotone-icons/gen/gen016.svg")
</span>
<h5 class="text-white">Email us:</h5>
<p class="text-white-70 mb-0">example@site.com</p>
</div>
<!-- End Info -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Contact Info -->
Component #2
<!-- Form -->
<div class="container content-space-1">
<!-- Form -->
<div class="mx-auto" style="max-width: 35rem;">
<form>
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label visually-hidden" for="hireUsFormFirstName">First name</label>
<input type="text" class="form-control" name="hireUsFormNameFirstName" id="hireUsFormFirstName" placeholder="Jacob" aria-label="Jacob">
</div>
<!-- End Form -->
</div>
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label visually-hidden" for="hireUsFormLasttName">Last name</label>
<input type="text" class="form-control" name="hireUsFormNameLastName" id="hireUsFormLasttName" placeholder="Williams" aria-label="Williams">
</div>
<!-- End Form -->
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label visually-hidden" for="hireUsFormWorkEmail">Email address</label>
<input type="text" class="form-control" name="hireUsFormNameWorkEmail" id="hireUsFormWorkEmail" placeholder="email@site.com" aria-label="email@site.com">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label visually-hidden" for="hireUsFormCompanyName">Company name <span class="form-label-secondary">(Optional)</span></label>
<input type="text" class="form-control" name="hireUsFormNameCompanyName" id="hireUsFormCompanyName" placeholder="Htmlstream" aria-label="Htmlstream">
</div>
<!-- End Form -->
<!-- Select -->
<div class="mb-4">
<label class="form-label visually-hidden" for="hireUsFormBudget">Budget</label>
<select name="hireUsFormNameBudget" id="hireUsFormBudget" class="form-select" aria-label="Tell us about your budget">
<option selected>Tell us about your budget</option>
<option value="1">$1,000 - $10,000</option>
<option value="2">$10,000 - $20,000</option>
<option value="3">$20,000 - $30,000</option>
<option value="4">$30,000 - $40,000</option>
<option value="5">$40,000 - $50,000</option>
<option value="6">$50,000 - and more</option>
</select>
</div>
<!-- End Select -->
<!-- Form -->
<div class="mb-4">
<label class="form-label visually-hidden" for="hireUsFormDetails">Details</label>
<textarea class="form-control" name="hireUsFormNameDetails" id="hireUsFormDetails" placeholder="Tell us about your project" aria-label="Tell us about your project" rows="4"></textarea>
</div>
<!-- End Form -->
<!-- Checkbox -->
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="signupFormPrivacyCheck" name="signupFormPrivacyCheck" required data-msg="Please accept our Privacy Policy.">
<label class="form-check-label" for="signupFormPrivacyCheck"> By submitting this form I have read and acknowledged the <a href=../page-privacy.html>Privacy Policy</a></label>
</div>
<!-- End Checkbox -->
<div class="d-grid mb-2">
<button type="submit" class="btn btn-primary btn-lg">Send inquiry</button>
</div>
<div class="text-center">
<span class="form-text">We'll get back to you in 1-2 business days.</span>
</div>
</form>
</div>
<!-- End Form -->
</div>
<!-- End Form -->
Component #3
Contact sales by phone or location
-
London, UK (HQ) -
153 Williamson Plaza, Maggieberg, SE56 FF12
-
062 1099222
-
San Francisco, US -
517 Michigan Avenue, California, 94080
-
724-597-6746
-
Berlin, Germany -
Feldstrasse 62, Drackenstedt, Sachsen-Anhalt
-
039293 40 53
Contact sales by email
If you wish to write us an email instead please use example@site.com
<!-- Contact Form -->
<div class="container content-space-1">
<div class="row justify-content-md-between">
<div class="col-md-6 mb-7 mb-md-0">
<!-- Card -->
<div class="card card-lg">
<!-- Card Body -->
<div class="card-body">
<form>
<div class="row">
<div class="col-sm-6 mb-4 mb-sm-0">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="contactsFormFirstName">First name</label>
<input type="text" class="form-control" name="contactsFormNameFirstName" id="contactsFormFirstName" placeholder="Jacob" aria-label="Jacob">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="contactsFormLasttName">Last name</label>
<input type="text" class="form-control" name="contactsFormNameLastName" id="contactsFormLasttName" placeholder="Williams" aria-label="Williams">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="contactsFormJobTitle">Job title</label>
<input type="text" class="form-control" name="contactsFormNameJobTitle" id="contactsFormJobTitle" placeholder="E-commerce platform" aria-label="E-commerce platform">
</div>
<!-- End Form -->
<div class="row">
<div class="col-sm-6 mb-4 mb-sm-0">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="contactsFormCompany">Company</label>
<input type="text" class="form-control" name="contactsFormNameCompany" id="contactsFormCompany" placeholder="Htmlstream" aria-label="Htmlstream">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="contactsFormCompanyWebsite">Company website</label>
<input type="text" class="form-control" name="contactsFormNameCompanyWebsite" id="contactsFormCompanyWebsite" placeholder="htmlstream.com" aria-label="htmlstream.com">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="contactsFormWorkEmail">Work email</label>
<input type="text" class="form-control" name="contactsFormNameWorkEmail" id="contactsFormWorkEmail" placeholder="email@site.com" aria-label="email@site.com">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="contactsFormDetails">Details</label>
<textarea class="form-control" name="contactsFormNameDetails" id="contactsFormDetails" placeholder="Tell us about your payment sales" aria-label="Tell us about your payment sales" rows="4"></textarea>
</div>
<!-- End Form -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Send inquiry</button>
</div>
</form>
</div>
<!-- End Card Body -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md-6 col-lg-5">
<div class="mb-4">
<h6>Contact sales by phone or location</h6>
</div>
<ul class="list-unstyled list-py-1">
<li>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 text-center" style="width: 1.5rem;">
<img class="avatar avatar-xss avatar-circle" src="../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="Image description"/>
</div>
<div class="flex-grow-1 ms-2">
<span>London, UK (HQ)</span>
</div>
</div>
</li>
<li>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 text-center" style="width: 1.5rem;">
<span class="svg-icon svg-icon-xs text-muted mt-0">
@@include("../assets/vendor/duotone-icons/gen/gen018.svg")
</span>
</div>
<div class="flex-grow-1 ms-2">
<span>153 Williamson Plaza, Maggieberg, SE56 FF12</span>
</div>
</div>
</li>
<li>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 text-center" style="width: 1.5rem;">
<span class="svg-icon svg-icon-xs text-muted mt-0">
@@include("../assets/vendor/duotone-icons/elc/elc002.svg")
</span>
</div>
<div class="flex-grow-1 ms-2">
<span>062 1099222</span>
</div>
</div>
</li>
</ul>
<hr class="my-5">
<ul class="list-unstyled list-py-1">
<li>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 text-center" style="width: 1.5rem;">
<img class="avatar avatar-xss avatar-circle" src="../assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="Image description"/>
</div>
<div class="flex-grow-1 ms-2">
<span>San Francisco, US</span>
</div>
</div>
</li>
<li>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 text-center" style="width: 1.5rem;">
<span class="svg-icon svg-icon-xs text-muted mt-0">
@@include("../assets/vendor/duotone-icons/gen/gen018.svg")
</span>
</div>
<div class="flex-grow-1 ms-2">
<span>517 Michigan Avenue, California, 94080</span>
</div>
</div>
</li>
<li>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 text-center" style="width: 1.5rem;">
<span class="svg-icon svg-icon-xs text-muted mt-0">
@@include("../assets/vendor/duotone-icons/elc/elc002.svg")
</span>
</div>
<div class="flex-grow-1 ms-2">
<span>724-597-6746</span>
</div>
</div>
</li>
</ul>
<hr class="my-5">
<ul class="list-unstyled list-py-1">
<li>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 text-center" style="width: 1.5rem;">
<img class="avatar avatar-xss avatar-circle" src="../assets/vendor/flag-icon-css/flags/1x1/de.svg" alt="Image description"/>
</div>
<div class="flex-grow-1 ms-2">
<span>Berlin, Germany</span>
</div>
</div>
</li>
<li>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 text-center" style="width: 1.5rem;">
<span class="svg-icon svg-icon-xs text-muted mt-0">
@@include("../assets/vendor/duotone-icons/gen/gen018.svg")
</span>
</div>
<div class="flex-grow-1 ms-2">
<span>Feldstrasse 62, Drackenstedt, Sachsen-Anhalt</span>
</div>
</div>
</li>
<li>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 text-center" style="width: 1.5rem;">
<span class="svg-icon svg-icon-xs text-muted mt-0">
@@include("../assets/vendor/duotone-icons/elc/elc002.svg")
</span>
</div>
<div class="flex-grow-1 ms-2">
<span>039293 40 53</span>
</div>
</div>
</li>
</ul>
<div class="mt-5">
<h6>Contact sales by email</h6>
<p>If you wish to write us an email instead please use <a href="mailto:example@site.com">example@site.com</a></p>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Contact Form -->