Formspree

14 May 2025

Penjelasan tentang formspree

Panduan Lengkap tentang Formspree

Formspree adalah layanan form handler yang memungkinkan Anda untuk mengirimkan data formulir (form) melalui email tanpa memerlukan backend server. Anda cukup membuat HTML form, dan Formspree akan menangani pengiriman form dan mengirimkan hasilnya ke email yang ditentukan.

Apa itu Formspree?

Formspree adalah alat yang memungkinkan Anda mengirimkan data dari formulir HTML ke email Anda tanpa menulis backend kode server. Ini sangat berguna jika Anda tidak ingin menangani server sendiri atau menggunakan platform yang tidak menyediakan form handler.

Kelebihan Menggunakan Formspree

Langkah-Langkah Menggunakan Formspree

1. Membuat Akun di Formspree

Untuk menggunakan Formspree, Anda harus membuat akun terlebih dahulu.

2. Membuat Formulir HTML

Formulir HTML adalah tempat pengguna akan memasukkan data. Berikut adalah contoh dasar formulir HTML yang menggunakan Formspree untuk mengirim data:

<form action="https://formspree.io/f/mjkwpnrq"
 method="POST">
  <label for="name">Nama:</label>
  <input type="text" id="name" name="name" 
  required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="_replyto"
   required>

  <label for="message">Pesan:</label>
  <textarea id="message" name="message" required>
    
  </textarea>

  <button type="submit">Kirim Pesan</button>
</form>

Penjelasan:

3. Mengonfigurasi Formspree

4. Mengirim Formulir

Setelah formulir HTML Anda siap dan dikonfigurasi, ketika pengguna mengisi formulir dan mengirimkannya, data akan dikirimkan ke email yang telah Anda tentukan melalui Formspree. Anda akan menerima email setiap kali formulir dikirim.

5. Menangani Respons dan Pengaturan Lanjutan

Formspree memungkinkan Anda untuk mengonfigurasi beberapa pengaturan lanjutan, seperti:

6. Menggunakan JavaScript dengan Formspree

Formspree memungkinkan integrasi dengan JavaScript untuk meningkatkan interaktivitas pengiriman form. Berikut adalah contoh menggunakan JavaScript untuk menangani pengiriman form tanpa melakukan reload halaman:

<script>
  const form = document.querySelector
  ('form');
  form.addEventListener('submit', function
  (event) {
    event.preventDefault(); 
    // Mencegah reload halaman setelah 
    // pengiriman

    fetch('https://formspree.io/f/mjkwpnrq', 
    {
      method: 'POST',
      body: new FormData(form),
      headers: {
        'Accept': 'application/json'
      }
    })
    .then(response => {
      if (response.ok) {
        alert('Formulir berhasil dikirim!');
      } else {
        alert('Terjadi kesalahan, 
        coba lagi.');
      }
    })
    .catch(error => {
      alert('Terjadi kesalahan: ' + error);
    });
  });
</script>

Dalam contoh ini, setelah formulir dikirim, JavaScript akan menangani pengiriman data dan memberikan respons tanpa mereload halaman.

Paket yang Tersedia

Formspree menawarkan beberapa paket:

Fitur Premium:

Keamanan Formspree

Formspree menggunakan mekanisme keamanan untuk mencegah penyalahgunaan formulir Anda:

Kesimpulan

Formspree adalah pilihan yang sangat baik bagi siapa saja yang ingin mengirim data formulir melalui email tanpa harus menulis kode backend atau mengelola server. Dengan pengaturan yang mudah dan berbagai fitur tambahan seperti email balasan otomatis dan integrasi dengan JavaScript, Formspree sangat cocok untuk situs statis atau aplikasi frontend yang membutuhkan pengiriman formulir.

Referensi

Penjelasan: