Membuat Form Kontak dengan HTML + Email Submission

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

Mengapa Form Kontak Penting untuk Website?
Persiapan Sebelum Memulai
Struktur Dasar Form Kontak HTML
Langkah 1: Membuat Struktur HTML Form
Langkah 2: Styling Form dengan CSS
Kode Lengkap Form Kontak HTML
Cara Menggunakan FormSubmit
Alternatif Email Service Lainnya
Tips Optimasi Form Kontak
Keamanan Form Kontak
Kesimpulan

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:

HTML Dasar – Tag form, input, textarea, dan button
CSS – Untuk styling form yang menarik
Email Service – FormSubmit, Formspree, atau EmailJS untuk pengiriman email
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:

Ganti Email di Action

<form action="https://formsubmit.co/your-email@example.com" method="POST">

Ganti your-email@example.com dengan email Anda

Submit Form Pertama Kali
- Isi form dan submit
- Cek inbox email Anda
- Klik link konfirmasi dari FormSubmit
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!

Membuat Form Kontak dengan HTML + Email Submission

Daftar isi

Mengapa Form Kontak Penting untuk Website?

Persiapan Sebelum Memulai

Struktur Dasar Form Kontak HTML

Langkah 1: Membuat Struktur HTML Form

1.1 Membuat File HTML Dasar

1.2 Menambahkan Form Element

1.3 Menambahkan Input Field Nama

1.4 Menambahkan Input Field Email

1.5 Menambahkan Input Field Subjek

1.6 Menambahkan Textarea untuk Pesan

1.7 Menambahkan Hidden Fields (FormSubmit Configuration)

1.8 Menambahkan Tombol Submit

Langkah 2: Styling Form dengan CSS

2.1 Reset dan Base Styling

2.2 Styling Container dan Contact Box

2.3 Styling Form Groups

2.4 Styling Input Fields

2.5 Styling Submit Button

2.6 Responsive Design

Kode Lengkap Form Kontak HTML

File: contact.html (Lengkap)

File: style.css (Lengkap)

Cara Menggunakan FormSubmit

Langkah Setup FormSubmit:

Fitur Tambahan FormSubmit:

Alternatif Email Service Lainnya

1. Formspree

2. EmailJS

3. Netlify Forms

Tips Optimasi Form Kontak

1. Validasi Client-Side

2. Feedback Visual

3. Loading State

4. Success Message

Keamanan Form Kontak

1. Honeypot Field

2. reCAPTCHA

3. Rate Limiting

4. Sanitasi Input

Kesimpulan

1 HTML Dasar (Pemula)

2 HTML Menengah

3 HTML Lanjutan

4 HTML Mahir

5 HTML Ahli (Bonus & Tips)

Related article!

Comments

Leave comment