→ Ad Apon7
→ form

form

This bootstrap css example is contributed by Ad Apon7, on 09-May-2026. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Register, Sign in

Tags: Login Form

Author Ad Apon7

468

v.5.3

Fork Fullscreen

<div class="container mb-5">
    <h2 class="section-title">Get In Touch</h2>

<div class="contact-wrapper">
        <div class="row g-0">
            
            <div class="col-lg-6">
                <div class="form-container">
                    <form id="contactForm" class="needs-validation" novalidate>
                        <div class="mb-3">
                            <label class="form-label">EMAIL ADDRESS</label>
                            <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
                            <div class="invalid-feedback">Valid email is required.</div>
                        </div>

<div class="mb-3">
                            <label class="form-label">PHONE NUMBER</label>
                            <input type="tel" class="form-control" id="phone" placeholder="+880 1XXX XXXXXX" required>
                            <div class="invalid-feedback">Phone number is required.</div>
                        </div>

<div class="mb-3">
                            <label class="form-label">ADDRESS</label>
                            <input type="text" class="form-control" id="address" placeholder="City, Country" required>
                            <div class="invalid-feedback">Address is required.</div>
                        </div>

<div class="mb-4">
                            <label class="form-label">MESSAGE (SMS)</label>
                            <textarea class="form-control" id="message" rows="4" placeholder="How can I help you?" required></textarea>
                            <div class="invalid-feedback">Please enter your message.</div>
                        </div>

<button type="submit" class="btn btn-black shadow-sm">SEND MESSAGE</button>
                    </form>
                </div>
            </div>

<div class="col-lg-6">
                <div class="map-container">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14602.40428574163!2d90.3662588!3d23.8158149!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c0c16921312d%3A0x70c79361a84f3c44!2sMirpur%2C%20Dhaka!5e0!3m2!1sen!2sbd!4v1715424000000!5m2!1sen!2sbd" 
                        allowfullscreen="" 
                        loading="lazy">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Bootstrap Login Modal
Elegant Login Form

Author:
César Ferreira

1 year ago

5.9k

v.5.3
Form validation by donald trump
form validation

Author:
Faysal

2 months ago

297

v.4.6
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

3 months ago

340

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

Author:
Anonymous

2 months ago

375

v.4.6
Simple login form

Author:
Prajwal Hallale

2 years ago

9.1k

v.4.6
vulgh

Author:
Anonymous

2 months ago

414

v.5.3
Bootstrap 5 Login Modal

Author:
Anonymous

2 years ago

17.4k

v.5.3
Simple Login form

Author:
Prajwal Hallale

2 years ago

10.2k

v.5.3
E-Commarce

Author:
Anonymous

2 months ago

592

v.5.3
Login modal

Author:
Prajwal Hallale

2 years ago

8k

v.4.6
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

2 years ago

9.6k

v.4.6
Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2.3k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent