Home / HTML / Membuat Form Kontak dengan HTML + Email Submission

Membuat Form Kontak dengan HTML + Email Submission

Created at by Aris Munandar
Share on

Form kontak HTML adalah elemen penting dalam setiap website yang memungkinkan pengunjung untuk mengirim pesan atau pertanyaan langsung kepada pemilik website. Dalam panduan lengkap ini, kita akan belajar cara membuat form kontak yang fungsional dengan fitur email submission secara langkah demi langkah.

Daftar isi

Baca juga: Membuat Template Blog Sederhana Menggunakan HTML

Mengapa Form Kontak Penting untuk Website?

Memiliki form kontak html yang baik memberikan banyak manfaat untuk website Anda:

  • Komunikasi Langsung – Pengunjung dapat menghubungi Anda dengan mudah
  • Profesionalitas – Menunjukkan kredibilitas dan keseriusan bisnis
  • Lead Generation – Mengumpulkan informasi potensial customer
  • User Experience – Memberikan cara mudah untuk berinteraksi
  • Privasi Email – Melindungi alamat email dari spam bot

Persiapan Sebelum Memulai

Sebelum membuat form kontak html, pastikan Anda memahami:

  1. HTML Dasar – Tag form, input, textarea, dan button
  2. CSS – Untuk styling form yang menarik
  3. Email Service – FormSubmit, Formspree, atau EmailJS untuk pengiriman email
  4. Validasi Form – Memastikan data yang diinput valid

Struktur Dasar Form Kontak HTML

Form kontak umumnya terdiri dari beberapa elemen penting:

  • Nama – Input text untuk nama pengirim
  • Email – Input email untuk alamat email pengirim
  • Subjek – Input text untuk topik pesan (opsional)
  • Pesan – Textarea untuk isi pesan
  • Tombol Submit – Button untuk mengirim form

Langkah 1: Membuat Struktur HTML Form

Mari kita mulai dengan membuat file HTML untuk form kontak html kita.

1.1 Membuat File HTML Dasar

Buat file baru bernama contact.html dan tambahkan struktur dasar:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Form kontak untuk menghubungi kami">
    <title>Form Kontak - Hubungi Kami</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="contact-box">
            <h1>Hubungi Kami</h1>
            <p class="subtitle">Isi form di bawah ini untuk mengirim pesan kepada kami</p>
        </div>
    </div>
</body>
</html>Code language: HTML, XML (xml)

Penjelasan:

  • lang="id" – Menentukan bahasa Indonesia
  • viewport – Membuat form responsif
  • .container – Wrapper untuk layout
  • .contact-box – Container untuk form kontak

1.2 Menambahkan Form Element

Tambahkan elemen form dengan action ke service email:

<form action="https://formsubmit.co/your-email@example.com" method="POST" class="contact-form">
    <!-- Form fields akan ditambahkan di sini -->
</form>Code language: HTML, XML (xml)

Penjelasan:

  • action – URL tujuan pengiriman form (ganti dengan email Anda)
  • method="POST" – Metode pengiriman data
  • FormSubmit adalah layanan gratis untuk mengirim email dari form HTML

1.3 Menambahkan Input Field Nama

<div class="form-group">
    <label for="name">Nama Lengkap <span class="required">*</span></label>
    <input type="text" id="name" name="name" placeholder="Masukkan nama lengkap Anda" required>
</div>Code language: JavaScript (javascript)

Penjelasan:

  • label – Label untuk input field
  • for="name" – Menghubungkan label dengan input
  • required – Membuat field wajib diisi
  • placeholder – Teks petunjuk di dalam input

1.4 Menambahkan Input Field Email

<div class="form-group">
    <label for="email">Alamat Email <span class="required">*</span></label>
    <input type="email" id="email" name="email" placeholder="nama@example.com" required>
</div>Code language: JavaScript (javascript)

Penjelasan:

  • type="email" – Validasi otomatis format email
  • Browser akan memvalidasi format email sebelum submit

1.5 Menambahkan Input Field Subjek

<div class="form-group">
    <label for="subject">Subjek</label>
    <input type="text" id="subject" name="_subject" placeholder="Topik pesan Anda">
</div>Code language: JavaScript (javascript)

Penjelasan:

  • name="_subject" – FormSubmit akan menggunakan ini sebagai subject email
  • Field ini opsional (tidak ada atribut required)

1.6 Menambahkan Textarea untuk Pesan

<div class="form-group">
    <label for="message">Pesan <span class="required">*</span></label>
    <textarea id="message" name="message" rows="6" placeholder="Tulis pesan Anda di sini..." required></textarea>
</div>Code language: HTML, XML (xml)

Penjelasan:

  • textarea – Input untuk teks panjang
  • rows="6" – Tinggi default textarea (6 baris)
  • required – Pesan wajib diisi

1.7 Menambahkan Hidden Fields (FormSubmit Configuration)

<!-- Konfigurasi FormSubmit -->
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="https://yourwebsite.com/thank-you.html">
<input type="hidden" name="_template" value="table">Code language: HTML, XML (xml)

Penjelasan:

  • _captcha="false" – Menonaktifkan captcha (opsional)
  • _next – URL redirect setelah submit berhasil
  • _template="table" – Format email dalam bentuk tabel

1.8 Menambahkan Tombol Submit

<div class="form-group">
    <button type="submit" class="submit-btn">
        <span>Kirim Pesan</span>
    </button>
</div>Code language: HTML, XML (xml)

Penjelasan:

  • type="submit" – Tombol untuk mengirim form
  • .submit-btn – Class untuk styling tombol

Langkah 2: Styling Form dengan CSS

Sekarang kita akan membuat file style.css untuk mempercantik form kontak html kita.

2.1 Reset dan Base Styling

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}Code language: CSS (css)

Penjelasan:

  • box-sizing: border-box – Perhitungan width lebih mudah
  • linear-gradient – Background gradient yang menarik
  • min-height: 100vh – Tinggi minimal full viewport
  • display: flex – Centering container

2.2 Styling Container dan Contact Box

.container {
    max-width: 600px;
    width: 100%;
}

.contact-box {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.contact-box h1 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 10px;
    text-align: center;
}

.subtitle {
    color: #666;
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.95rem;
}Code language: CSS (css)

Penjelasan:

  • border-radius: 15px – Sudut melengkung
  • box-shadow – Efek bayangan untuk depth
  • text-align: center – Teks di tengah

2.3 Styling Form Groups

.contact-form {
    margin-top: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.required {
    color: #e74c3c;
}Code language: CSS (css)

Penjelasan:

  • display: block – Label di atas input
  • font-weight: 600 – Label semi-bold
  • .required – Tanda asterisk merah untuk field wajib

2.4 Styling Input Fields

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}Code language: CSS (css)

Penjelasan:

  • transition – Animasi smooth saat focus
  • :focus – Style saat input aktif
  • resize: vertical – Textarea hanya bisa resize vertikal
  • box-shadow pada focus – Efek glow saat input aktif

2.5 Styling Submit Button

.submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.submit-btn:active {
    transform: translateY(0);
}Code language: CSS (css)

Penjelasan:

  • linear-gradient – Tombol dengan gradient
  • transform: translateY(-2px) – Efek naik saat hover
  • box-shadow – Bayangan yang berubah saat hover
  • :active – Style saat tombol diklik

2.6 Responsive Design

@media (max-width: 768px) {
    .contact-box {
        padding: 30px 20px;
    }
    
    .contact-box h1 {
        font-size: 1.6rem;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    
    .contact-box {
        padding: 25px 15px;
    }
    
    .contact-box h1 {
        font-size: 1.4rem;
    }
}Code language: CSS (css)

Penjelasan:

  • @media – Aturan CSS untuk layar kecil
  • Padding dan font size disesuaikan untuk mobile
  • Form tetap nyaman digunakan di semua perangkat

Kode Lengkap Form Kontak HTML

Berikut adalah kode lengkap untuk referensi Anda:

File: contact.html (Lengkap)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Form kontak untuk menghubungi kami">
    <meta name="keywords" content="form kontak, hubungi kami, contact form">
    <title>Form Kontak - Hubungi Kami</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="contact-box">
            <h1>Hubungi Kami</h1>
            <p class="subtitle">Isi form di bawah ini untuk mengirim pesan kepada kami</p>
            
            <form action="https://formsubmit.co/your-email@example.com" method="POST" class="contact-form">
                <!-- Nama -->
                <div class="form-group">
                    <label for="name">Nama Lengkap <span class="required">*</span></label>
                    <input type="text" id="name" name="name" placeholder="Masukkan nama lengkap Anda" required>
                </div>
                
                <!-- Email -->
                <div class="form-group">
                    <label for="email">Alamat Email <span class="required">*</span></label>
                    <input type="email" id="email" name="email" placeholder="nama@example.com" required>
                </div>
                
                <!-- Subjek -->
                <div class="form-group">
                    <label for="subject">Subjek</label>
                    <input type="text" id="subject" name="_subject" placeholder="Topik pesan Anda">
                </div>
                
                <!-- Pesan -->
                <div class="form-group">
                    <label for="message">Pesan <span class="required">*</span></label>
                    <textarea id="message" name="message" rows="6" placeholder="Tulis pesan Anda di sini..." required></textarea>
                </div>
                
                <!-- Hidden Fields untuk FormSubmit -->
                <input type="hidden" name="_captcha" value="false">
                <input type="hidden" name="_next" value="https://yourwebsite.com/thank-you.html">
                <input type="hidden" name="_template" value="table">
                
                <!-- Submit Button -->
                <div class="form-group">
                    <button type="submit" class="submit-btn">
                        <span>Kirim Pesan</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>Code language: HTML, XML (xml)

File: style.css (Lengkap)

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Container */
.container {
    max-width: 600px;
    width: 100%;
}

/* Contact Box */
.contact-box {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.contact-box h1 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 10px;
    text-align: center;
}

.subtitle {
    color: #666;
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

/* Form Styling */
.contact-form {
    margin-top: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.required {
    color: #e74c3c;
}

/* Input Fields */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.submit-btn:active {
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-box {
        padding: 30px 20px;
    }
    
    .contact-box h1 {
        font-size: 1.6rem;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    
    .contact-box {
        padding: 25px 15px;
    }
    
    .contact-box h1 {
        font-size: 1.4rem;
    }
    
    .submit-btn {
        font-size: 1rem;
        padding: 12px;
    }
}Code language: CSS (css)

Berikut ini adalah tampilan dari kode diatas.

Membuat Form Kontak dengan HTML + Email Submission

Cara Menggunakan FormSubmit

FormSubmit adalah layanan gratis untuk mengirim email dari form kontak html tanpa backend. Berikut cara setupnya:

Langkah Setup FormSubmit:

  1. Ganti Email di Action
    <form action="https://formsubmit.co/your-email@example.com" method="POST">
    Ganti your-email@example.com dengan email Anda

  2. Submit Form Pertama Kali

    • Isi form dan submit
    • Cek inbox email Anda
    • Klik link konfirmasi dari FormSubmit

  3. Form Siap Digunakan

    • Setelah konfirmasi, form akan langsung berfungsi
    • Email akan dikirim ke inbox Anda setiap ada submission

Fitur Tambahan FormSubmit:

<!-- Custom Subject -->
<input type="hidden" name="_subject" value="Pesan Baru dari Website!">

<!-- Redirect After Submit -->
<input type="hidden" name="_next" value="https://yoursite.com/thanks.html">

<!-- Disable Captcha -->
<input type="hidden" name="_captcha" value="false">

<!-- CC Email -->
<input type="hidden" name="_cc" value="another@email.com">

<!-- Auto Response -->
<input type="hidden" name="_autoresponse" value="Terima kasih! Kami akan segera merespons.">Code language: HTML, XML (xml)

Alternatif Email Service Lainnya

Selain FormSubmit, ada beberapa alternatif untuk form kontak html:

1. Formspree

<form action="https://formspree.io/f/your-form-id" method="POST">Code language: HTML, XML (xml)
  • Gratis untuk 50 submission/bulan
  • Dashboard untuk melihat submission
  • Spam filtering

2. EmailJS

// Menggunakan JavaScript
emailjs.send("service_id", "template_id", {
    name: "John Doe",
    email: "john@example.com",
    message: "Hello!"
});Code language: JavaScript (javascript)
  • 200 email gratis/bulan
  • Lebih fleksibel dengan JavaScript
  • Custom email templates

3. Netlify Forms

<form name="contact" method="POST" data-netlify="true">Code language: HTML, XML (xml)
  • Gratis untuk 100 submission/bulan
  • Otomatis jika hosting di Netlify
  • Spam protection built-in

Tips Optimasi Form Kontak

Berikut tips untuk membuat form kontak html yang lebih baik:

1. Validasi Client-Side

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>Code language: HTML, XML (xml)
  • Gunakan atribut pattern untuk validasi custom
  • required untuk field wajib
  • minlength dan maxlength untuk batasan karakter

2. Feedback Visual

input:valid {
    border-color: #28a745;
}

input:invalid:not(:placeholder-shown) {
    border-color: #dc3545;
}Code language: CSS (css)
  • Berikan feedback visual saat input valid/invalid
  • Gunakan warna hijau untuk valid, merah untuk invalid

3. Loading State

form.addEventListener('submit', function() {
    submitBtn.innerHTML = 'Mengirim...';
    submitBtn.disabled = true;
});Code language: JavaScript (javascript)
  • Tampilkan loading state saat form sedang disubmit
  • Disable tombol untuk mencegah double submit

4. Success Message

<div class="success-message" style="display: none;">
    Pesan Anda berhasil dikirim! Kami akan segera merespons.
</div>Code language: HTML, XML (xml)
  • Tampilkan pesan sukses setelah submit
  • Bisa menggunakan redirect atau modal

Keamanan Form Kontak

Penting untuk memperhatikan keamanan form kontak html:

1. Honeypot Field

<input type="text" name="_honey" style="display:none">Code language: HTML, XML (xml)
  • Field tersembunyi untuk menangkap spam bot
  • FormSubmit otomatis mengabaikan submission jika field ini terisi

2. reCAPTCHA

<div class="g-recaptcha" data-sitekey="your-site-key"></div>Code language: HTML, XML (xml)
  • Melindungi dari spam dan bot
  • Google reCAPTCHA v2 atau v3

3. Rate Limiting

  • Batasi jumlah submission dari IP yang sama
  • Gunakan service yang menyediakan rate limiting

4. Sanitasi Input

  • Jangan pernah trust user input
  • Service seperti FormSubmit otomatis melakukan sanitasi

Kesimpulan

Membuat form kontak html dengan email submission adalah skill penting untuk web developer. Dengan mengikuti panduan langkah demi langkah di atas, Anda telah berhasil membuat form kontak yang:

  • ✅ Responsif di semua perangkat
  • ✅ Memiliki validasi input yang baik
  • ✅ Terintegrasi dengan email service
  • ✅ Desain modern dan user-friendly
  • ✅ Mudah dikustomisasi sesuai kebutuhan

Form kontak yang baik akan meningkatkan engagement pengunjung dan memudahkan komunikasi dengan audiens Anda. Anda dapat mengembangkan form ini lebih lanjut dengan menambahkan fitur seperti file upload, multiple choice, atau integrasi dengan CRM.

Selamat mencoba membuat form kontak HTML Anda sendiri!

Share on

Related article!

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Your email address will not be published. Required fields are marked *

Discover more from Bahasaweb.com

Subscribe now to keep reading and get access to the full archive.

Continue reading