Assalamualaikum Wr.Wb...
dengan diberikan nikmat dan rezeki dari Allah SWT, saya Mr.Gagaltotal666 akan
berbagi kepada anda yaitu tentang cara membuat form kontak tanpa harus
menggunakan Backend - dengan FormSubmit.
biasa nya kita kalau mau membuat sebuah page/halaman kontak
harus ada kirim aksi dari backend entah menggunakan framework js, php, dan
sebagainya, nah disini kita dibantu pihak ke 3 melainkan hanya verifikasi email
saja dan cukup mudah untuk di akses nya
cocok untuk di blogger serta wordpress beserta CMS lain nya
misal web anda membuat cms sendiri dan tidak mau ribet memenuhi di DB
bisa menggunakan cara ini loh yaps menggunakan FormSubmit.co
sebenarnya banyak alternatif penyedia lain nya contoh sebagai berikut :
- formspree.io
- formsubmit.co
- formbold.com
- emailjs.com
- smtpjs.com
oke langsung aja ikuti langkah berikut
yang pertama saya contohkan untuk pengguna blogger dan cms wordpress
untuk form kontak frontend nya bisa contoh seperti ini :
<div class="Form"><h1>Kirim Pesan Gan!</h1><form action="https://formsubmit.co/emailanda@gmail.com" method="POST" target="_blank"><p></p><br /><input class="contact-form-name" name="name" required="" size="30" style="max-width: 100%; width: 100%;" type="text" /><p></p><br /><input class="contact-form-email" name="email" required="" size="30" style="max-width: 100%; width: 100%;" type="email" /><p></p><br /><textarea class="contact-form-email-message" name="message" required="" rows="5" style="max-width: 100%; width: 100%;"></textarea><p></p><button class="contact-form-button contact-form-button-submit" type="submit">Kirim pesan</button><p></p></form></div>
contoh form frontend diatas sudah responsive
dan sudah saya pasang di blog saya sendiri
nah dibagian action itu isi email aktif anda,
yang ingin user untuk mengirim pesan ke email anda
untuk method nya jangan lupa kasih POST
enpoint yang disediakan berupa
- name
- email
- message
untuk keamanan seperti XSS saya masih belum mencoba nya
tapi ya mau ngapain XSS juga, soalnya sudah ada keamanan dari formsubmit.co
oke lanjut jika menggunakan framework CSS Bootstrap
contoh form frontend nya seperti ini
<div class="container"><h1>FormSubmit Demo</h1><form target="_blank" action="https://formsubmit.co/emailanda@gmail.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>
contoh tampilan dan jika ada isi pesan kontak masuk ke email
oke mungkin itu saja cukup bagaimana cara membuat form kontak
tanpa harus menggunakan backend, kalau ada yang ditanyakan
silakan berkomentar ya dan berikan masukan nya
jika ada kesalahan dari artikel ini
sekian dan semoga bermanfaat
Wasalamualaikum Wr.Wb...
0 Comments