contact us

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

Tags: Form

Author java stories story

4.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-primary">Kirim Pesan</button>
      </form>
    </div>

<div class="col-lg-6 ">
      <div style="height:100%">
        <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 text-primary"></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 text-primary"></i>
      <p class="mb-0">info@example.com</p>
    </div>
    <div class="col-md-3 col-6">
      <i class="bi bi-instagram fs-4 text-primary"></i>
      <p class="mb-0">@namakamu</p>
    </div>
    <div class="col-md-3 col-6">
      <i class="bi bi-facebook fs-4 text-primary"></i>
      <p class="mb-0">Facebook Page</p>
    </div>
  </div>
</section>

More Examples

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

v.4.6
Contact From Section

Author:
Shahriar Noyon

5 months ago

462

v.4.6
form-validation
form-validation

Author:
Mustaq hussin

3 months ago

417

v.4.6
Contact section for portfolio with JS validation

Author:
sajid taz

4 months ago

427

v.4.6
Form Section

Author:
Tanvir fahad

5 months ago

969

v.4.6
Simple login form

Author:
Prajwal Hallale

2 years ago

9.2k

v.4.6
E-Commerce Full

Author:
Zahid Hasan Riyad

3 months ago

831

v.5.3
Bootstrap Form with Javascript Validation

Author:
User

3 months ago

474

v.4.6
Form validation by donald trump
form validation

Author:
Faysal

3 months ago

325

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

Author:
Anonymous

3 months ago

400

v.4.6
yash from
amr from ta keow copy korbe nha .korle tui morog chor

Author:
rimon majumder

5 months ago

291

v.4.6
Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2.4k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent