Create simple form using formspree.io

Seringkali ketika membuat sebuah website atau blog Anda dipusingkan dengan membuat kontak form, padahal yang ingin kita buat adalah kontak form sederhana yang terdiri dari empat field (biasanya) yaitu field nama, email, subject dan isi pesan. Di era modern ini sudah banyak teknologi yang mempermudah kita menyelesaikan masalah membuang-buang waktu dengan membuat kontak form tersebut, salah satunya yang akan saya bahas adalah menggunakan formspree “an functional HTML forms”.

Apa yang akan kita buat?
Kita akan membuat sebuah form HTML tanpa PHP, Django, Ruby on Rails, Laravel dan sebagainya (Ya, hanya HTML)

Apa yang kita butuhkan?

• Bootstrap form css (Untuk membuat design form yang lebih minimalist)
• Editor
• Sedikit pengetahuan tentang HTML/CSS

PoC

Formspree.io yang akan kita gunakan tidak perlu registrasi hanya saja ketika kita melakukan input pada form yang telah kita buat pertama kali akan dilakukan verifikasi, kita hanya akan membuat tag form dengan field berikut :

1. nama
2. email
3. subject
4. kategori pesan (option)
5. isi pesan

Kita akan mulai membuat form sederhana menggunakan HTML

    

    Nama
    
    

    

    Email
    
    

    

    Subject
    
    

    

    Kategori
    
      Pilih Kategori
      ExploreCrew
      Kategori Coder
      Kategori Hacker
      Kategori Developer
    
    

    

    Isi Pesan
    /textarea>
    

    

    
    

Membuat form sederhana sudah selesai, jika dilihat class yang saya gunakan seperti form-control, form-group, dan btn itu adalah class dari bootstrap, saya menggunakan bootstrap agar lebih minimalis dan responsive untuk form layoutnya. include bootstratp.form.css di codingan form kita,

Kita dapat melihat formnya sudah terlihat bagus namun belum bisa digunakan, yang akan kita lakukan adalah menambahkan action dan method pada tag

seperti code berikut

Penjelasan dari kode diatas adalah pada action kita menggunakan layanan formspree sebagai third-party untuk mengirimkan input form ke email kita, dan untuk method yang dibutuhkan oleh formspree adalah POST agar dapat memproses hasil dari kontak form kita.

Selanjutnya upload form kita lalu isi form tersebut untuk pertama kali dan submit, cek email Anda dan klik verify pada email yang Anda terima. Kontak form Anda sudah ready dan siap digunakan

• Source Code : https://github.com/ariestiyansyah/Simple-form/
• Live : http://ariestiyansyah.github.io/Simple-form/