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

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

Simple Login form

Author:
Prajwal Hallale

2 years ago

10.1k

v.5.3
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

2 months ago

247

v.5.3
contact us

Author:
java stories story

1 year ago

4.2k

v.5.3
HTML, CSS, and Bootstrap. This approach will be purely HTML and CSS without any JavaScript.
HTML: Bootstrap Integration: Linked to Bootstrap CDN for styling. Form Structure: Contains input fields for name, email, and message, all within a card component. CSS: Background Gradient: Applied to the body for a visually appealing background. Card Styling: Rounded corners and padding for the card. Button Styling: Custom colors for the submit button, including hover effects. How to Use: Create an index.html file and copy the above code into it. Open the HTML file in your web browser to view the Contact Us form.

Author:
zobaidul kaziex

2 years ago

3.4k

v.4.6
E-Commarce

Author:
Anonymous

1 month ago

417

v.5.3
Contact us form

Author:
Anonymous

2 years ago

8.4k

v.4.6
Bootstrap Form with Javascript Validation

Author:
User

2 months ago

291

v.4.6
siam form validation
form validation resourse

Author:
Anonymous

4 months ago

211

v.4.6
Agriculture Website for Live project_WDD

Author:
Anonymous

3 months ago

466

v.4.6
Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2.2k

v.4.6
E-Commerce Full

Author:
Zahid Hasan Riyad

2 months ago

569

v.5.3
form-validation
form-validation

Author:
Mustaq hussin

2 months ago

306

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent