contact us custom

This bootstrap css example is contributed by java stories story, on 15-Aug-2025. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Form

Author java stories story

2.3k

v.5.3

Fork Fullscreen

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<section class="container py-5" id="contact">
  <h2 class="text-center mb-5">Contact Us</h2>
  
  <div class="row g-4">
    
    <div class="col-lg-6">
      <form>
        <div class="mb-3">
          <label for="name" class="form-label">Nama</label>
          <input type="text" class="form-control" id="name" placeholder="Masukkan nama Anda">
        </div>
        <div class="mb-3">
          <label for="email" class="form-label">Email</label>
          <input type="email" class="form-control" id="email" placeholder="Masukkan email Anda">
        </div>
        <div class="mb-3">
          <label for="message" class="form-label">Pesan</label>
          <textarea class="form-control" id="message" rows="5" placeholder="Tulis pesan Anda di sini"></textarea>
        </div>
        <button type="submit" class="btn btn-custom">Kirim Pesan</button>
      </form>
    </div>

<div class="col-lg-6">
      <div class="ratio ratio-4x3">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.9982121735464!2d-122.08424948469245!3d37.4219999798259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb5cb29975b69%3A0x77b7b4e528b0c6b6!2sGoogleplex!5e0!3m2!1sen!2sid!4v1618477596623!5m2!1sen!2sid"
          width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
      </div>
    </div>
  </div>

<div class="row text-center mt-5 gy-4">
    <div class="col-md-3 col-6">
      <i class="bi bi-telephone-fill fs-4 contact-icon"></i>
      <p class="mb-0">+62 812-3456-7890</p>
    </div>
    <div class="col-md-3 col-6">
      <i class="bi bi-envelope-fill fs-4 contact-icon"></i>
      <p class="mb-0">info@example.com</p>
    </div>
    <div class="col-md-3 col-6">
      <i class="bi bi-instagram fs-4 contact-icon"></i>
      <p class="mb-0">@namakamu</p>
    </div>
    <div class="col-md-3 col-6">
      <i class="bi bi-facebook fs-4 contact-icon"></i>
      <p class="mb-0">Facebook Page</p>
    </div>
  </div>
</section>

More Examples

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

7.9k

v.4.6
Contact From Section

Author:
Shahriar Noyon

3 months ago

374

v.4.6
E- Commarce full website

Author:
Zahid Hasan Riyad

1 month ago

217

v.5.3
Simple Login form

Author:
Prajwal Hallale

2 years ago

9.9k

v.5.3
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

1 month ago

189

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

2 years ago

8.9k

v.4.6
form-validation
form-validation

Author:
Mustaq hussin

1 month ago

168

v.4.6
progress-steps
progress-steps

Author:
Rami AlAjo

1 year ago

2.7k

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

5.9k

v.5.3
Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2.2k

v.4.6
new-validation-form
new-validation-form

Author:
Anonymous

1 month ago

161

v.4.6
Simple login form

Author:
Prajwal Hallale

2 years ago

8.8k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent