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.6k

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

8.2k

v.4.6
vulgh

Author:
Anonymous

2 months ago

414

v.5.3
Simple login form

Author:
Prajwal Hallale

2 years ago

9.1k

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

Author:
Anonymous

2 months ago

375

v.4.6
NewsPortal Full Website

Author:
Zahid Hasan Riyad

2 months ago

762

v.5.3
E-Commarce

Author:
Anonymous

2 months ago

592

v.5.3
Portfolio Full Website

Author:
Zahid Hasan Riyad

2 months ago

560

v.5.3
Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2.3k

v.4.6
Login Form with input field validation, and display error or success messages using only HTML, CSS, and Bootstrap, you can follow this approach.
HTML: Form Structure: Contains fields for username and password with validation attributes (required, minlength). Feedback Messages: Placeholder div for dynamic error messages. CSS: Background Gradient: Applied to the body. Card Styling: Rounded corners and centered layout. Button Styling: Custom colors for the submit button. Validation Styling: Borders and error message styling. JavaScript: Validation Logic: Basic client-side validation to check if fields are empty or meet minimum length requirements. Feedback Messages: Display appropriate error or success messages based on validation.

Author:
zobaidul kaziex

2 years ago

8.9k

v.4.6
contact us

Author:
java stories story

1 year ago

4.3k

v.5.3
Contact From Section

Author:
Shahriar Noyon

5 months ago

453

v.4.6
Simple Login form

Author:
Prajwal Hallale

2 years ago

10.2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent