→ sajid taz
→ Contact section for portfolio with JS va...

Contact section for portfolio with JS validation

This bootstrap css example is contributed by sajid taz, on 12-Jun-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Form

Author sajid taz

366

v.4.6

Fork Fullscreen

<section class="py-5 bg-light text-center">
        <div class="container">
            <h1 class="display-4 fw-bold">Contact Us</h1>
            <p class="text-muted">Let's discuss your project or answer your questions.</p>
        </div>
    </section>

<section class="py-5 bg-dark text-white">
        <div class="container">

<div class="col-lg-6">

<h3 class="fw-bold mb-4">Send a Message</h3>

</div>

<div class="col-lg-6">

<div class="mb-4">
                        <h3 class="fw-bold">Contact Information</h3>

<p class="text-secondary">
                            Feel free to reach out for web development,
                            data analytics, dashboard creation, or freelance work.
                        </p>

<ul class="list-unstyled">
                            <li class="mb-3">
                                <i class="bi bi-geo-alt-fill text-primary me-2"></i>
                                South Banasree, Dhaka, Bangladesh
                            </li>

<li class="mb-3">
                                <i class="bi bi-envelope-fill text-primary me-2"></i>
                                contact@example.com
                            </li>

<li class="mb-3">
                                <i class="bi bi-telephone-fill text-primary me-2"></i>
                                +8801XXXXXXXXX
                            </li>
                        </ul>
                    </div>

<div class="shadow rounded overflow-hidden">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d878.4417165114371!2d90.44579844811383!3d23.757540406867143!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b9e0f0760a9f%3A0x349c258a9bffb00e!2sSthapati%20Staff%20House!5e0!3m2!1sen!2sbd!4v1781120139314!5m2!1sen!2sbd"
                            width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy">
                        </iframe>
                    </div>

</div>

</div>
    </section>

More Examples

Portfolio Full Website

Author:
Zahid Hasan Riyad

2 months ago

390

v.5.3
Contact us form

Author:
Anonymous

2 years ago

8.4k

v.4.6
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

2 years ago

9k

v.4.6
Form validation by donald trump
form validation

Author:
Faysal

2 months ago

237

v.4.6
Password Reset Form
Multi-step password reset form with email verification, code validation, and password strength meter built with Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

8k

v.4.6
contact us

Author:
java stories story

1 year ago

4.2k

v.5.3
Simple login form

Author:
Prajwal Hallale

2 years ago

9k

v.4.6
form-validation
form-validation

Author:
Mustaq hussin

2 months ago

307

v.4.6
User Settings Form
form with following sections - Personal Information - Profile Picture - Email Preferences - Account Settings - Change Password - Privacy Settings

Author:
Juniper

1 year ago

6.1k

v.5.3
siam form validation
form validation resourse

Author:
Anonymous

4 months ago

211

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

Author:
rimon majumder

4 months ago

224

v.4.6
E-Commarce

Author:
Anonymous

1 month ago

419

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent