Contact Us Component


This code snippet creates a “Contact Us” component on a website which includes a contact form with fields for first name, last name, email address, phone number, and a brief message. This allows visitors to submit inquiries or feedback directly to the website’s owner or administrator, creating a simple yet effective contact section on the website.

<section class="py-5 bg-primary">
	<div class="container">
		<div class="row align-items-center justify-content-between">
			<div class="col-lg-6 bg-white p-5">
				<h2 class="display-6 fw-bold text-center mb-4">Contact Us</h2>
				<form>
					<div class="row">
						<div class="col-md-6">
							<div class="mb-3">
								<input class="form-control bg-light" placeholder="First name" type="text">
							</div>
						</div>
						<div class="col-md-6">
							<div class="mb-3">
								<input class="form-control bg-light" placeholder="Last name" type="text">
							</div>
						</div>
						<div class="col-md-6">
							<div class="mb-3">
								<input class="form-control bg-light" placeholder="Email address" type="text">
							</div>
						</div>
						<div class="col-md-6">
							<div class="mb-3">
								<input class="form-control bg-light" placeholder="Phone number" 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-4">
							<div class="d-grid">
								<button class="btn btn-primary" type="submit">Send message</button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="col-lg-5 text-white mt-5 mt-lg-4">
				<div class="mb-4">
					<div>
						Address
					</div>
					<div class="display-6 fw-semibold">
						123 Mountain View, California, United States
					</div>
				</div>
				<div class="mb-4">
					<div>
						Phone
					</div>
					<div class="display-6 fw-semibold">
						+1 123-456-789
					</div>
				</div>
				<div class="mb-4">
					<div>
						Email
					</div>
					<div class="display-6 fw-semibold text-break">
						<a class="text-link text-white text-decoration-none" href="mailto:samplemail@mail.com">hello@yourdomain.com</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top