Cara Membuat Formulir HTML yang Mengirimkan Anda Email

Pernahkah Anda membuat formulir di situs Anda, hanya untuk lupa memeriksa entri yang dikirimkan? Membuat formulir HTML yang mengirim email setelah pengiriman adalah salah satu cara paling sederhana dan paling efektif untuk menyelesaikan masalah ini.

Di sini, kami akan memandu Anda melalui cara membuat formulir yang mengirimkan email kepada Anda, serta pelanggan, untuk memastikan formulir telah diterima.

Idealnya, browser memungkinkan Anda merutekan pengiriman formulir langsung ke alamat email. Namun, alasan mereka tidak melakukannya adalah karena mengirim email langsung dari formulir web HTML akan mengungkapkan alamat email pengunjung, membuat pengguna rentan terhadap aktivitas jahat, seperti phishing.

Menambahkan alamat mailto: ke formulir bisa menjadi cara potensial untuk menghindari tantangan ini. Opsi ini mengaktifkan klien email default di komputer pengguna, meminta mereka untuk mengirim formulir melalui email. Browser web mengirimkan permintaan ke penyedia layanan email, bukan ke alamat yang ditentukan.

Ada beberapa masalah dengan opsi mailto:. Misalnya, tidak 100% kompatibel dengan semua browser, sangat tidak ramah pengguna, dan tidak mungkin untuk mengontrol pemformatan data saat formulir dikirim oleh browser.

Di luar itu, pesan peringatan akan muncul saat pengguna mengirimkan formulir, memberi tahu mereka bahwa informasi yang akan mereka kirim tidak akan dienkripsi untuk privasi.

Di bawah ini, kami membahas beberapa opsi untuk membuat formulir HTML yang mengirimi Anda email saat entri baru dikirimkan.

Opsi yang Anda pilih bergantung pada cara Anda bekerja dan platform apa yang Anda gunakan. Ini untuk mengatakan bahwa segalanya sedikit berbeda jika rencananya adalah menggunakan campuran HTML dan skrip yang berbeda. Di bawah ini, kami membahas berbagai opsi yang tersedia.

Metode 1: Buat Formulir Kirim Email Menggunakan HTML (Tidak Disarankan)

Hanya menggunakan HTML? Dari awal yang baru, berikut adalah contoh kode untuk digunakan:

Lihat Pena Cara Membuat Formulir HTML yang Mengirimkan Anda Email oleh HubSpot (@hubspot) di CodePen.

Kode ini akan membuat formulir yang menanyakan nama kontak, pesan, dan menyertakan tombol kirim (tidak terlihat di CodePen). Perhatikan bahwa kode ini dasar — ​​tidak akan terlihat super manis. Untuk yang lebih indah, Anda harus menambahkan beberapa baris kode khusus untuk kebutuhan Anda.

Meskipun Anda hanya dapat menggunakan HTML dasar, ini bukanlah pilihan yang ideal. Formulir ini tidak langsung dikirim ke alamat email, melainkan membuka klien email atau jendela alat untuk mengirimkan formulir. Ini dapat menakuti pengguna untuk tidak mengirimkan formulir sama sekali.

Jadi, kode HTML apa yang memungkinkan Anda mengirim pengiriman formulir langsung ke alamat email?

Untuk membuat formulir bekerja dengan server email Anda dan mengirimkannya ke kotak surat, PHP adalah jawabannya — mari kita jelajahi opsi itu sekarang.

Metode 2: Buat Formulir Kirim Email Menggunakan PHP (Lanjutan)

Untuk membuat formulir yang dapat dihubungi oleh pelanggan, skrip PHP akan menjadi teman terbaik Anda. Saya tahu, akronim lain. Yang ini adalah singkatan dari Hypertext Preprocessor, dan bahasa ini bekerja sama dengan HTML untuk memproses formulir.

Sebelum melompat ke dalam proses, mari kita uraikan beberapa dasar-dasar formulir.

Formulir web memiliki dua sisi: Front-end, terlihat di browser oleh pengunjung, dan skrip backend yang berjalan di server.

Browser web pengunjung menggunakan kode HTML untuk menampilkan formulir. Saat formulir dikirimkan, browser mengirimkan informasi ke backend menggunakan tautan yang disebutkan dalam atribut "tindakan" dari tag formulir, mengirimkan data formulir ke URL tersebut.

Misalnya: <form action=https://yourwebsite.com/myform-processor.php> .

Server kemudian meneruskan data ke skrip yang ditentukan dalam URL tindakan — myform-processor.php dalam kasus ini. Dengan menggunakan data ini, skrip backend dapat membuat database pengiriman formulir, mengarahkan pengguna ke halaman lain (misalnya pembayaran), dan mengirim email.

Ada bahasa skrip lain yang dapat Anda gunakan dalam pemrograman backend, seperti Ruby, Perl, atau ASP untuk Windows. Namun, PHP adalah yang paling populer dan digunakan oleh hampir semua penyedia layanan web hosting.

Jika Anda membuat formulir dari awal, berikut adalah langkah-langkah yang dapat Anda ambil.

Langkah 1: Gunakan PHP untuk membuat halaman.

Untuk langkah ini, Anda harus memiliki akses ke cPanel situs web Anda di platform hosting Anda.

Saat Anda membuat halaman web, alih-alih menggunakan ekstensi ".html", ketik ".php" sebagai gantinya. Ini mirip dengan apa yang terjadi ketika Anda menyimpan gambar sebagai "jpg" versus "png".

Dengan melakukan ini, server akan mengetahui host PHP yang Anda tulis. Alih-alih menyimpan halaman HTML kosong seperti itu, simpan sebagai sesuatu seperti ini: "subscriberform.php". Setelah halaman Anda dibuat dan disimpan, Anda kemudian dapat membuat formulir.

Langkah 2: Buat formulir menggunakan kode.

Pada langkah ini, Anda akan menulis kode untuk membuat formulir.

Jika Anda tidak yakin cara membuat formulir dalam HTML, lihat sumber daya Anjing HTML untuk mengetahui dasar-dasarnya.

Kode berikut adalah apa yang diperlukan untuk formulir dasar:

<form method="post" action="subscriberform.php">
		


<textarea name="message"></textarea>
<input type="kirim">
</form>

Karena ini mirip dengan penulisan khusus HTML, baris ini juga akan membuat nama untuk formulir dan area bagi pelanggan untuk mengetikkan pesan khusus dan mengirimkannya kepada Anda.

Perbedaan penting adalah bagian action="subscriberform.php". Bagian kode inilah yang akan membuat halaman mengirimkan formulir saat dikirimkan. Ingatlah bahwa pada contoh pertama, itu bukanlah pilihan.

Langkah 3: Buat formulir mengirim email.

Setelah Anda membuat formulir dan menambahkan semua perbaikan yang tepat tergantung pada preferensi desain Anda, saatnya untuk membuat bagian email.

Untuk ini, Anda akan menggulir ke awal halaman (awal, bahkan sebelum mendefinisikan Doctype HTML). Untuk mengaktifkan pengiriman data di email, kita harus menambahkan kode yang akan memproses data. Salin kode ini atau buat yang serupa:

<?php
if($_POST["pesan"])
mail("[email dilindungi]", "Ini adalah baris subjek",
$_POST["masukkan pesan Anda di sini"]. "Dari: [dilindungi email]");

?>

Segala sesuatu di dalam baris pertama dan terakhir akan memberi tahu halaman web untuk membuat fungsi-fungsi ini berfungsi sebagai PHP. Kode ini juga memeriksa untuk melihat apakah pelanggan menggunakan formulir. Dari sana, ia memeriksa untuk melihat apakah formulir telah dikirim.

Lebih lanjut memecahnya, "mail" mengirimkan formulir yang sudah diisi sebagai email ke "[email protected]," dan baris subjek adalah sebagai berikut. Di baris berikutnya, Anda dapat menulis salinan pesan email di dalam tanda kutip, untuk dikirim dari alamat email mana pun yang Anda pilih.

Setelah formulir dikirimkan, halaman mengirimkan data ke dirinya sendiri. Jika data telah berhasil dikirim, halaman mengirimkannya sebagai email. Browser kemudian memuat HTML halaman — formulir yang disertakan.

Dengan itu, Anda memiliki kode dasar yang Anda butuhkan untuk membuat formulir.

Perhatikan bahwa ini hanyalah salah satu cara untuk melakukannya — sebagai alternatif, Anda juga dapat membuat formulir menggunakan pembuat, lalu menyematkannya ke situs web Anda.

Metode 3: Buat Formulir Kirim Email Menggunakan Pembuat Formulir

Jika Anda tidak menggunakan WordPress untuk membangun situs web Anda dan tidak paham pengkodean, Anda mungkin bingung bagaimana Anda dapat membuat formulir, terutama jika CMS Anda tidak menawarkan editor halaman drag-and-drop.

(Tips menarik: Editor seret-dan-lepas dapat mempermudah dan menyederhanakan pembuatan formulir pengiriman email. Coba CMS Hub — 100% gratis.)

Masing-masing alat di bawah ini memungkinkan Anda membuat formulir yang mengirim email tanpa perlu pengkodean apa pun dari Anda. Bagian terbaiknya adalah Anda tidak perlu mengubah sistem manajemen konten jika tidak mau. Sebagai gantinya, Anda dapat menyematkan formulir ke situs web Anda menggunakan kode penyematan masing-masing alat.

1. HubSpot: Pembuat Formulir Email Terbaik Secara Keseluruhan

HubSpot menyertakan pembuat formulir di tingkat gratis semua produknya. Karena HubSpot sudah memiliki email Anda, maka HubSpot akan secara otomatis mengirimi Anda pesan saat entri baru dikirimkan.

Pembuat formulir HubSpot ditautkan dengan alat lain di platform, termasuk Hub Pemasaran dan Hub CMS, dan tidak memerlukan pengetahuan teknis sebelumnya. Jika Anda ingin memperluas formulir untuk menyertakan kemampuan pemasaran, Anda juga dapat melakukannya.

Misalnya, Anda dapat membuat formulir kustom yang terhubung ke daftar kontak Anda. Anda juga dapat menyesuaikan formulir tersebut dan memicu email otomatis berdasarkan penyelesaian formulir Anda. Perhatikan bahwa yang terakhir membutuhkan peningkatan premium.

Jika Anda ingin mempelajari cara menerima email setelah pengiriman formulir, lihat artikel Basis Pengetahuan kami.

2. Forms.io: Pembuat Formulir Email Cepat Terbaik

Forms.io memungkinkan Anda membuat formulir dengan cepat di antarmuka seret dan lepas, lalu menyematkannya di situs Anda menggunakan kode penyematan HTML. Anda akan menerima lansiran atau notifikasi, lalu Anda dapat mengelola respons di backend alat. Ini gratis untuk 10 pengguna, tetapi jika perusahaan Anda membutuhkan lebih banyak kursi, Anda dapat memiliki akses seharga $14,99/bulan.

3. Jotform: Email Terbaik untuk Builder untuk Berbagai Formulir

Jika Anda berharap Anda akan membutuhkan lebih dari satu formulir, Jotform adalah pilihan yang bagus. Ini memberi Anda beberapa opsi untuk menyematkan formulir di situs web Anda: JavaScript, iFrame, atau seluruh kode sumber formulir. Anda juga memiliki opsi untuk membuat lightbox atau formulir popup.

Jotform gratis dengan branding-nya. Harga mulai dari $24/bulan.

Lihat lebih banyak alat pembuat formulir di sini.

Metode 4: Buat Formulir Kirim Email Menggunakan Plugin

Jika Anda menjalankan situs web WordPress, kami memiliki kabar baik: Anda memiliki banyak sekali plugin pembuat formulir yang tersedia untuk Anda, yang sebagian besar tersedia dengan biaya gratis yang luar biasa. Semua alat ini akan mengirim email setelah menerima kiriman.

1. Plugin Formulir HubSpot: Terbaik untuk Menghasilkan Prospek

Jika Anda berencana untuk menggunakan formulir Anda sebagai alat pembuatan prospek, maka kami sangat menyarankan untuk menggunakan plugin formulir HubSpot. Ini menautkan langsung ke akun HubSpot Anda, memungkinkan Anda untuk menggunakannya bersama dengan HubSpot CRM, Marketing Hub, Sales Hub, dan banyak lagi.

2. WPForms: Terbaik untuk Menyematkan Di Mana Saja

WPForms adalah pembuat formulir drag-and-drop yang memungkinkan Anda untuk mengonfigurasinya ke email Anda setelah menerima kiriman. Anda juga dapat menyematkan formulir di mana saja di situs Anda, termasuk sidebar dan footer.

3. Formulir AR

ARForms memungkinkan Anda untuk menerima pemberitahuan email berdasarkan ketentuan yang telah Anda tetapkan, tetapi Anda juga bisa mendapatkan pemberitahuan email untuk semua pengiriman. Anda juga dapat mengintegrasikannya dengan alat lain di tumpukan teknologi Anda, termasuk HubSpot, PayPal, dan Google Spreadsheet.

Manfaat Formulir HTML yang Mengirim Email

Baik Anda ingin mengonversi lebih banyak pengunjung menjadi prospek, mengumpulkan informasi untuk tim penjualan Anda, atau membuat lebih banyak pendukung merek yang setia, formulir sangat penting untuk strategi masuk. Jika Anda tidak memiliki formulir di situs web Anda, Anda bisa kehilangan lebih banyak prospek, konversi lebih tinggi, dan pelanggan jangka panjang yang lebih bahagia.

Masalahnya adalah mudah untuk melupakan memeriksa tanggapan, dan bahkan lebih mudah untuk mendapatkan kiriman tetapi tidak memiliki catatan yang dapat dicari. Formulir yang mengirim email kembali kepada Anda menyimpan informasi di kotak masuk Anda untuk referensi dan kemudahan.

Catatan editor: Postingan ini awalnya diterbitkan pada Desember 2019 dan telah diperbarui untuk kelengkapan.