contact form

Contact form

This bootstrap css example is contributed by Md. Hasibur Rahman, on 25-Jul-2026. Component is made with bootstrap css v.4.6. It is responsive. similar terms for this example are Get in touch, Contact form

Tags: Contact us

Author Md. Hasibur Rahman

111

v.4.6

Fork Fullscreen

<div class="container my-5">
    <h2 class="section-title">Contact & Contribute</h2>
    <p>
      Use the form below to contact the archive administrators or to
      contribute your own documents, photographs, or interview material.
    </p>

<form onsubmit="handleContactForm(event)">

<div class="mb-3">
            <label for="email" class="form-label">Email Address</label>
            <input type="email" class="form-control" id="email" required>
          </div>

<div class="mb-3">
            <label for="subject" class="form-label">Subject</label>
            <select class="form-select" id="subject">
              <option value="general">General Inquiry</option>
              <option value="contribute">Contribute Material</option>
              <option value="correction">Report a Correction</option>
            </select>
          </div>

<div class="mb-3">
            <label for="message" class="form-label">Message</label>
            <textarea class="form-control" id="message" rows="4" required></textarea>
          </div>

<div class="mb-3">
            <label for="fileUpload" class="form-label">
              Attach a Document, Photo, or Audio File (optional)
            </label>
            <input type="file" class="form-control" id="fileUpload">
          </div>

<button type="submit" class="btn btn-success">Send Message</button>
        </form>

</div>

<div class="col-md-4">
        <h5>Administrator Contact Info</h5>
        <p>
          Email: hasibur@gmail.com<br>
          Phone: +880-1234-5678<br>
          Address: Dhaka, Bangladesh
        </p>
      </div>
    </div>
  </div>

More Examples

Personal Information Section

Author:
Shahriar Noyon

3 months ago

503

v.4.6
Get in Touch form

Author:
Mateo Rojas

1 year ago

3k

v.5.3
Contact Us

Author:
istiakahmedchowdhury10

3 weeks ago

102

v.4.6
Contact us section with Image

Author:
Anonymous

2 years ago

8.7k

v.4.6
Google MAP API

Author:
Shahriar Noyon

3 months ago

394

v.4.6
Personal Portfolio Contact Section

Author:
Creative Araf

1 month ago

198

v.5.3
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

1 year ago

8.8k

v.4.6
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

2 weeks ago

146

v.5.3
E-Commerce Checkout Section

Author:
Creative Araf

1 month ago

156

v.5.3
E-Commerce Contact Section

Author:
Creative Araf

1 month ago

172

v.5.3
contact page

Author:
Md. Hasibur Rahman

1 month ago

158

v.5.3
chi_siamo

Author:
Anonymous

4 months ago

762

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent