Cara Membuat Formulir Kontak Menggunakan Formspree

Anda dapat menggunakan banyak metode di situs web Anda untuk memungkinkan pengguna mengirim email kepada Anda dengan aman. Salah satu contohnya adalah menggunakan atribut mailto pada formulir kontak. Atribut mailto membuka aplikasi email yang diinstal bagi pengguna untuk memasukkan pesan.

Untuk pengalaman yang lebih baik, pertimbangkan untuk mengintegrasikan alat seperti Formspree. Formspree bertindak sebagai perantara, merekam data formulir dan mengirimkannya ke alamat email yang Anda tentukan.

Apa itu Formspree dan Bagaimana Cara Kerjanya?

Formspree adalah layanan email yang dapat Anda integrasikan ke dalam formulir kontak khusus. Saat Anda masuk ke Formspree, Anda dapat menentukan alamat email target Anda untuk formulir. Formspree menangani pengiriman formulir atas nama Anda. Ini memungkinkan Anda

Formspree akan menghasilkan titik akhir, yang perlu Anda tambahkan ke formulir kustom Anda. Saat pengguna menekan tombol "Kirim", formulir akan menggunakan titik akhir untuk memanggil layanan API Formspree. Ini akan menghasilkan email dengan isi formulir kontak.

Formspree akan mengirimkan email ini ke email target yang Anda cantumkan di akun Formspree Anda. Anda kemudian akan menerima email di kotak masuk Anda. Akun Formspree Anda juga memiliki tempat di mana Anda dapat melihat pengiriman formulir kontak Anda.

Untuk mendaftarkan email Anda dengan Formspree, masuk dan masukkan alamat email target untuk formulir Anda.

1. Masuk ke Formspree. Jika Anda tidak memiliki akun, Anda harus memasukkan alamat email dan kata sandi Anda. Daftar menggunakan alamat email yang Anda inginkan untuk mengirim formulir kontak. Anda mungkin juga perlu memverifikasi alamat email ini selama proses pendaftaran.
2. Setelah proses pendaftaran selesai, halaman "Formulir" akan terbuka. Klik Bentuk baru.
3. Masukkan nama apa pun untuk formulir kontak Anda dan biarkan pengaturan proyek default. Masukkan alamat email target di bidang "Kirim email ke". Di sinilah Formspree akan mengirimkan kiriman formulir kontak Anda. Setelah selesai, klik Buat Formulir.
4. Formspree akan memberi Anda titik akhir, dan contoh cara menggunakannya. Anda perlu menambahkan titik akhir ini ke formulir kontak khusus Anda di situs web Anda (lebih lanjut tentang ini nanti).
5. Secara default, Formspree menyimpan formulir Anda di bawah proyek yang disebut "Proyek Pertama Saya". Jika Anda ingin mengubah nama ini, kembali ke halaman "Formulir". Klik Pengaturan di sebelah nama proyek.
6. Di sini, Anda dapat mengubah nama proyek Anda menjadi sesuatu yang lain. Misalnya, Anda dapat mengganti namanya agar memiliki nama yang sama dengan situs web Anda. Anda juga dapat menambahkan URL untuk situs web Anda.

Anda perlu menambahkan titik akhir yang disediakan oleh Formspree ke dalam formulir kontak di kode situs web Anda.

1. Tambahkan titik akhir ke dalam atribut "aksi" untuk formulir. Ini akan menyebabkan browser pengguna mengirim formulir ke URL tersebut saat mereka mengirimkannya.

   <bentuk tindakan ="https://formspree.io/f/xjvlaqpe" metode ="POS">
   <!-- Formulir Anda di sini -->
   <jenis tombol ="Kirimkan" kelas="tombol"> Kirim </button>
   </form>

2. Tambahkan input ke formulir Anda. Anda dapat menggunakan formulir contoh ini yang menggunakan kerangka kerja CSS Bootstrap:

   <bentuk tindakan ="https://formspree.io/f/mbjqjrdl" kelas="bantalan ekstra" metode ="POS">
   <kelas div="bentuk-kelompok">
   <label untuk ="membalas ke"> Alamat email anda </label>
   <jenis masukan ="surel" kelas="bentuk-kontrol" id="membalas ke" nama="_membalas ke" ngModel="membalas" aria-dijelaskan oleh="emailBantuan" tempat penampung="[email protected]">
   <id kecil ="emailBantuan" kelas="bentuk-teks teks-dibisukan"> Email Anda tidak akan dibagikan dengan orang lain. </small>
   </div>
   <kelas div="bentuk-kelompok">
   <label untuk ="pesan"> Pesanmu </label>
   <nama teks ="pesan" gaya="tinggi: 200px" kelas="bentuk-kontrol" id="pesan" tempat penampung="Hei! Saya'aku menghubungimu karena..."></textarea>
   </div>
   <jenis tombol ="Kirimkan" kelas="tombol"> Kirim </button>
   </form>
   

Untuk menguji apakah Formspree berfungsi, kirim pesan kepada diri Anda sendiri menggunakan formulir kontak, tekan Kirim, dan periksa kotak masuk email Anda.

1. Jalankan situs web Anda dan buka halaman yang memiliki formulir kontak. Masukkan pesan ke dalam formulir kontak dan tekan Kirim.
2. Anda akan menerima pesan formulir kontak di kotak masuk Anda.
3. Jika Anda kembali ke Formspree, klik tombol Kiriman tab. Di sini Anda juga dapat melihat pesan yang dikirimkan dari formulir kontak Anda.

Formspree adalah salah satu dari banyak layanan yang dapat Anda gunakan untuk mengintegrasikan formulir kontak khusus ke situs Anda. Ini memungkinkan Anda untuk mulai menerima umpan balik pengguna dengan cepat tanpa harus khawatir tentang detail backend.

Jika Anda baru membuat formulir dengan HTML dan JavaScript, Anda juga dapat mempelajari lebih lanjut tentang validasi formulir sisi klien. Ini membantu memastikan bahwa formulir kontak Anda dapat memvalidasi semua input pengguna.

Tentang Penulis

Sharlene Von Drehnen (9 Artikel Diterbitkan)

Sharlene adalah Penulis Teknologi di MUO dan juga bekerja penuh waktu di Pengembangan Perangkat Lunak. Dia memiliki gelar Sarjana IT dan memiliki pengalaman sebelumnya dalam Penjaminan Mutu dan bimbingan Universitas. Sharlene suka bermain game dan bermain piano.

More From Sharlene Von Drehnen