→ Shahriar Noyon
→ Contact From Section

Contact From Section

This bootstrap css example is contributed by Shahriar Noyon, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Form

Author Shahriar Noyon

383

v.4.6

Fork Fullscreen

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<section id="contact" class="contact-area section-padding">
	<div class="container">										
		<div class="section-title text-center">
			<h1>Get in Touch</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis dignissim. Aenean vitae metus in augue pretium ultrices.</p>
		</div>					
		<div class="row">
			<div class="col-lg-7">	
				<div class="contact ContactSection">
					<form class="form" name="enq" method="post" action="contact.php" onsubmit="return validation();">
						<div class="row ">
							<div class="form-group col-md-6">
								<input type="text" name="name" class="form-control" placeholder="Name" required="required">
							</div>
							<div class="form-group col-md-6">
								<input type="email" name="email" class="form-control" placeholder="Email" required="required">
							</div>
							<div class="form-group col-md-6">
								<input type="text" name="Phone Number" class="form-control" placeholder="Phone Number" required="required">
							</div>
							<div class="form-group col-md-6">
								<input type="text" name="Address" class="form-control" placeholder="text" required="required">
							</div>
							<div class="form-group col-md-12">
								<textarea rows="6" name="message" class="form-control" placeholder="Your Message" required="required"></textarea>
							</div>
							<div class="col-md-12 text-center">
								<button type="submit" value="Send message" name="submit" id="submitButton" class="btn btn-contact-bg" title="Submit Your Message!">Send Message</button>
							</div>
						</div>
					</form>
				</div>
			</div> 
			<div class="col-lg-5">
				<div class="single_address">
					<i class="fa fa-map-marker"></i>
					<h4>Our Address</h4>
					<p>3481 Melrose Place, Beverly Hills</p>
				</div>
				<div class="single_address">
					<i class="fa fa-envelope"></i>
					<h4>Send your message</h4>
					<p>Info@example.com</p>
				</div>
				<div class="single_address">
					<i class="fa fa-phone"></i>
					<h4>Call us on</h4>
					<p>(+1) 517 397 7100</p>
				</div>
				<div class="single_address">
					<i class="fa fa-clock-o"></i>
					<h4>Work Time</h4>
					<p>Mon - Fri: 08.00 - 16.00. <br>Sat: 10.00 - 14.00</p>
				</div>					
			</div> 
		</div>
	</div>	
</section>

More Examples

E- Commarce full website

Author:
Zahid Hasan Riyad

1 month ago

267

v.5.3
Portfolio Full Website

Author:
Zahid Hasan Riyad

1 month ago

278

v.5.3
yash from
amr from ta keow copy korbe nha .korle tui morog chor

Author:
rimon majumder

4 months ago

197

v.4.6
HTML, CSS, and Bootstrap. This approach will be purely HTML and CSS without any JavaScript.
HTML: Bootstrap Integration: Linked to Bootstrap CDN for styling. Form Structure: Contains input fields for name, email, and message, all within a card component. CSS: Background Gradient: Applied to the body for a visually appealing background. Card Styling: Rounded corners and padding for the card. Button Styling: Custom colors for the submit button, including hover effects. How to Use: Create an index.html file and copy the above code into it. Open the HTML file in your web browser to view the Contact Us form.

Author:
zobaidul kaziex

2 years ago

3.3k

v.4.6
NewsPortal Full Website

Author:
Zahid Hasan Riyad

1 month ago

422

v.5.3
new-validation-form
new-validation-form

Author:
Anonymous

1 month ago

182

v.4.6
Form validation by donald trump
form validation

Author:
Faysal

1 month ago

192

v.4.6
vulgh

Author:
Anonymous

1 month ago

210

v.5.3
Simple login form

Author:
Prajwal Hallale

2 years ago

8.8k

v.4.6
Contact section for portfolio with JS validation

Author:
sajid taz

3 months ago

347

v.4.6
siam form validation
form validation resourse

Author:
Anonymous

4 months ago

185

v.4.6
Contact us form

Author:
Anonymous

2 years ago

8.3k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent