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

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

Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2.1k

v.4.6
NewsPortal Full Website

Author:
Zahid Hasan Riyad

4 weeks ago

295

v.5.3
progress-steps
progress-steps

Author:
Rami AlAjo

1 year ago

2.7k

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

Author:
Anonymous

1 month ago

139

v.4.6
Form validation by donald trump
form validation

Author:
Faysal

1 month ago

150

v.4.6
Bootstrap Form with Javascript Validation

Author:
User

1 month ago

143

v.4.6
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

1 month ago

168

v.5.3
Contact us form

Author:
Anonymous

2 years ago

8.2k

v.4.6
vulgh

Author:
Anonymous

4 weeks ago

115

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

Author:
Tanvir fahad

3 months ago

844

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

1 year ago

3.3k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent