Tanggal :26 September 2022

Bikin Kontak Form Tanpa Backend

Saat anda membuat website apakah itu website company profile, blog atau jenis-jenis website lainnya tentu anda pasti akan membutuhkan sebuah kontak form dimana ketika ada visitor yang ingin menghubungi anda akan menggunakan Kontak Form, Di artikel ini saya akan membagikan cara bagaimana membuat contact form tanpa harus coding backend cepat dan mudah

Kenapa Tanpa Backend?

Ini adalah contoh studi kasus real dimana saya membuat website yg sederhana seperti tools online qrcode generator gratis yang dapat anda akses di alamat URL : useqrcode.me tools ini sangat sederhana dan tanpa database, Ketika saya ingin menambahkan contact form saya harus membuat database dan ngurusin queue emailnya tentu sangat tidak efektif menurut saya karena saya hanya butuh kontak form saja kenapa saya harus bikin database dan ngurusin queuenya emailnya ribet banget dah haha? dari sinilah saya terfikir untuk tidak membangun backend kontak form dan memilih alternatif lain untuk mengatasi masalah ini

Alternatif Custom Form Tanpa Backend

Saat ini ada beberapa alternatif untuk membuat custom form seperti kontak form tanpa backend yaitu:

  1. formspree.io
  2. formsubmit.co
  3. formbold.com
  4. emailjs.com
  5. smtpjs.com

layanan-layanan web diatas dapat anda gunakan untuk membuat kontak form tanpa backend di tutorial ini saya akan coba implementasikan menggunakan layanan formsubmit kenapa saya memiliih layanan formsubmit salah satu alasannya mudah di integrasikan dan gratis selamanya

Integrasi FormSubmit

pertama silahkan anda akses formsubmit di alamat url : formsubmit.co

lalu silahkan anda copy code di bawah ini

<div class="container">
  <h1>FormSubmit Demo</h1>
  <form target="_blank" action="https://formsubmit.co/adi@kawankoding.com" method="POST">
    <div class="form-group">
      <div class="form-row">
        <div class="col">
          <input type="text" name="name" class="form-control" placeholder="Full Name" required>
        </div>
        <div class="col">
          <input type="email" name="email" class="form-control" placeholder="Email Address" required>
        </div>
      </div>
    </div>
    <div class="form-group">
      <textarea placeholder="Your Message" class="form-control" name="message" rows="10" required></textarea>
    </div>
    <button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>
  </form>
</div>

pada source code diatas silahkan anda perhatikan pada form action https://formsubmit.co/adi@kawankoding.com

silahkan anda ganti adi@kawankoding.com menjadi alamat email yang anda gunakan pada kontak form website anda

lalu setelah itu copy dan pastekan source halaman html diatas pada project web anda dan silahkan anda coba jika tidak ada kendala maka anda seharusnya sudah berhasil membuat kontak form tanpa backend

Untuk demo versi jadinya silahkan anda cek di alamat url : https://useqrcode.me/?p=contact

Catatan : Untuk Pengiriman email pertama kali dibutuhkan verifikasi email namun ini hanya pertama saja selanjutnya tidak perlu melakukan verifikasi email lagi

Kesimpulan

Dengan Menggunakan Layanan Formsubmit kita tidak perlu pusing mikirin backend untuk kontak form kita cukup plug and play semua sudah beres sangat efisien dan cepat sekali bukan? hehehe

bagaimana menurut anda? apakah anda tertarik menggunakan layanan yg sama ?

jawab di kolom komentar ya

see u again

Share

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.