Contact Us Example


This code snippet creates a “Contact Us” section on a website, featuring a contact form with fields for name, email address, and a message, as well as a full-width background image of a map. This provides customers with an interactive way to reach out to the company and a visual representation of their location, adding a local touch to your website.

<section class="py-5">
	<div class="position-relative py-5">
		<div class="position-absolute"><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/map-img-4.png"></div>
		<div class="position-relative">
			<div class="container">
				<div class="row justify-content-end">
					<div class="col-lg-6">
						<div class="bg-white p-5 rounded shadow mt-5">
							<h2 class="display-6 fw-bold text-center mb-4">Contact Us</h2>
							<form>
								<div class="row">
									<div class="col-md-12">
										<div class="mb-3">
											<input class="form-control bg-light" placeholder="Your name" type="text">
										</div>
									</div>
									<div class="col-md-12">
										<div class="mb-3">
											<input class="form-control bg-light" placeholder="Your email" type="text">
										</div>
									</div>
									<div class="col-md-12">
										<div class="mb-3">
											<textarea class="form-control bg-light" placeholder="Your message" rows="4"></textarea>
										</div>
									</div>
									<div class="col-md-5">
										<div class="d-grid">
											<button class="btn btn-primary" type="submit">Send message</button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top