Mengirim data formulir html ke alamat email tanpa php

Contoh Langkah-demi-Langkah menggunakan Formulir HTML untuk mengirim Pesan "Hubungi Kami" melalui Email tanpa Server Backend menggunakan Google Script - Tanpa PHP, Python, Ruby, Java, Node. js dll

Lihat contoh yang berfungsi di sini. https. //dwyl. github. io/html-form-send-email-via-google-script-tanpa-server/

Peringatan. API Google memiliki batasan berapa banyak email yang dapat dikirim dalam sehari. Ini mungkin berbeda di akun Google Anda, lihat batasannya di sini. Kami merekomendasikan untuk mengimplementasikan tutorial ini melalui Bagian 3, karena data akan selalu ditambahkan ke spreadsheet terlebih dahulu, kemudian dikirim melalui email jika memungkinkan

Mengapa?

Kami membutuhkan cara mengirim email dari halaman HTML "statis" saat Anda tidak (ingin) memiliki server

Keuntungan Utama

• Tidak ada "Backend" untuk Menyebarkan/Memelihara/Membayar
• Sepenuhnya Dapat Disesuaikan - setiap aspek dapat disesuaikan
• Email dikirim melalui Google Mail yang Masuk Daftar Putih di Mana Saja (keberhasilan pengiriman tinggi)
• Kumpulkan/Simpan data formulir apa pun dalam Spreadsheet agar mudah dilihat
  (sempurna jika Anda perlu membaginya dengan orang non-teknis)

Apa?

Alih-alih menggunakan server untuk mengirim email Anda, yang mudah tetapi membutuhkan perawatan,
gunakan Google untuk mengirim email atas nama Anda dan gunakan Google Spreadsheets untuk melacak data

Anda dapat menggunakan layanan "gratis" seperti http. //formspree. io/ untuk memproses pengiriman formulir Anda jika Anda tidak peduli ke mana Anda mengirimkan data dan ingin mengelola data yang dikirimkan
di kotak masuk email Anda (berantakan. yuck. )
Atau. Anda dapat menginvestasikan beberapa menit dan menyimpan data pribadi/dapat dikelola. Ambil pilihanmu

Bagaimana?

1. Buat Salinan Contoh Spreadsheet

Sampel. https. //dokumen. google. com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy

Masuk ke akun Google Anda dan klik "Buat salinan. "

Ini akan memberi Anda sesuatu seperti ini

Catatan. Jangan ragu untuk mengubah nama Salinan menjadi apa pun yang Anda inginkan, itu tidak akan memengaruhi hasilnya

2. Buka Editor Skrip

Buka editor skrip. dengan mengeklik "Alat" > "Editor skrip. "

Inilah snapshot skrip yang Anda butuhkan (pada titik ini dalam latihan). google-script-hanya-email. js

3. Tetapkan TO_ADDRESS_ dalam Skrip

Peringatan. Jika Anda tidak menghapus komentar dan menyetel email Anda sebagai nilai TO_ADDRESS, seseorang yang memiliki keterampilan web dapat mengubah formulir Anda dan mengirim data email ke alamat email arbitrer

Risiko ini mungkin tidak terlalu mungkin. Alih-alih, jika mau, Anda dapat membiarkan variabel ini dikomentari jika Anda menerima kemungkinan risiko ini tetapi menginginkan kemudahan tambahan untuk menyetel variabel email ini di dalam formulir HTML Anda sebagai atribut

result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

0. Ini memungkinkan Anda untuk dengan mudah mengubah ke mana mengirim email di dalam formulir HTML Anda tanpa kembali melalui langkah 2-6. Fungsionalitas ini mengharuskan Anda untuk menggunakan file JS yang disediakan di Bagian Dua, Langkah 10

Jika Anda tidak ingin menerima potensi risiko tersebut, harap batalkan komentar pada kode untuk variabel TO_ADDRESS, dan tetapkan nilai ini sama dengan email yang seharusnya menerima data formulir saat dikirimkan

4. Simpan Versi Baru Skrip Anda

Ini tidak segera jelas tetapi Anda harus mengklik "Kelola Versi. "

Kemudian buat versi baru Anda

5. Publikasikan Skrip yang Diperbarui sebagai Aplikasi Web

Pilih versi proyek terbaru untuk diterapkan
⚠️ Catatan. Anda harus memilih opsi

result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

_2 untuk tarik-turun 'Siapa yang memiliki akses ke aplikasi' atau respons formulir tidak akan ditambahkan ke spreadsheet. ⚠️

6. Izinkan Skrip untuk Mengirim Email

Salin URL aplikasi web ke clipboard / notepad Anda. Kemudian Klik "OK"

7. Buat Formulir HTML dasar Anda

Menggunakan templat di

result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

_3 di repo ini, buat file html Anda sendiri dengan formulir dasar. (simpan file)

⚠️ Jika Anda sudah mencoba menggunakan formulir Anda sendiri dengan langkah ini daripada contoh di repo ini

• Setiap elemen formulir Anda harus memiliki atribut

  result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

  4 yang sama dengan nama kolom Anda di lembar Google
• Formulir

  result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

  5 harus

  result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

  6, i. e.

  result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

  _7
  • Jika Anda ingin mengubahnya nanti, Anda harus membuat versi

    result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

    8 Anda sendiri dan mengubah

    result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

    5 yang diharapkan

Ingatlah untuk mengubah Formulir

MailApp.sendEmail({

  to: TO_ADDRESS,

  subject: "Contact form submitted",

  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`

  htmlBody: formatMailBody(mailData)

});

0 URL ke yang Anda salin di langkah sebelumnya

8. Buka Formulir HTML (halaman) di Browser Anda

Isi beberapa contoh data di Formulir HTML

Kirim formulir. Anda akan melihat konfirmasi bahwa itu telah dikirim.

9. Periksa kotak masuk email untuk alamat yang Anda tetapkan

Buka kotak masuk untuk alamat email yang Anda atur di Langkah 3 (di atas)

Selesai. Itu dia. Anda baru saja membuat formulir HTML yang mengirim email

Bagian Dua - Membuatnya Terlihat Bagus

Kita akan mempertahankan Super Lean ini dengan menggunakan PURE CSS untuk Style kita (memperbaiki Formulir HTML "jelek" di langkah 8). Dan

MailApp.sendEmail({

  to: TO_ADDRESS,

  subject: "Contact form submitted",

  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`

  htmlBody: formatMailBody(mailData)

});

_1 formulir menggunakan JQuery "AJAX" untuk menjaga orang di halaman/situs Anda (hindari halaman respons "jelek")

10. Kirim Formulir menggunakan JavaScript "AJAX"

Untuk mencegah halaman berubah menjadi respons/hasil

MailApp.sendEmail({

  to: TO_ADDRESS,

  subject: "Contact form submitted",

  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`

  htmlBody: formatMailBody(mailData)

});

_2, kita perlu mengirimkan formulir menggunakan AJAX

Perbarui

result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

_3 Anda untuk menyertakan file JavaScript berikut di akhir file Anda (*sebelum tag

MailApp.sendEmail({

  to: TO_ADDRESS,

  subject: "Contact form submitted",

  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`

  htmlBody: formatMailBody(mailData)

});

4 penutup)

<script data-cfasync="false" type="text/javascript"

src="//cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>

Peringatan. Jika Anda tidak menyetel variabel TO_ADDRESS_ di Langkah 3, maka Anda perlu menyertakan atribut

MailApp.sendEmail({

  to: TO_ADDRESS,

  subject: "Contact form submitted",

  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`

  htmlBody: formatMailBody(mailData)

});

6 di dalam elemen formulir utama. Lihat contoh formulir untuk lebih jelasnya. Jika tidak, jika Anda menyetel variabel ini, Anda tidak memerlukan atribut form ini

Ini sekarang akan menampilkan pesan "Terima Kasih" saat formulir dikirimkan

Membuat orang tersebut tetap pada halaman yang sama. Tidak ada penyegaran

11. Sesuaikan Pesan yang Ditampilkan saat Formulir Dikirim

Tautkan pesan Anda dengan mengedit

MailApp.sendEmail({

  to: TO_ADDRESS,

  subject: "Contact form submitted",

  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`

  htmlBody: formatMailBody(mailData)

});

_7 div

12. Gunakan CSS untuk Membuat Formulir Terlihat Bagus

Untuk

MailApp.sendEmail({

  to: TO_ADDRESS,

  subject: "Contact form submitted",

  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`

  htmlBody: formatMailBody(mailData)

});

_8 contoh kita menggunakan Pure CSS. http. //purecss. io/start/ karena bobotnya yang ringan (4. 0KB diperkecil dan di-gzip) dan menyelesaikan "masalah" kita saat ini. Membuatnya Terlihat Bagus

Tanpa menghabiskan terlalu banyak waktu untuk ini, kita dapat membuat formulir terlihat jauh lebih bagus

13. Buat email terlihat bagus juga

Secara default, isi email terkirim berisi pasangan kunci-nilai dari formulir, dengan kunci sebagai

MailApp.sendEmail({

  to: TO_ADDRESS,

  subject: "Contact form submitted",

  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`

  htmlBody: formatMailBody(mailData)

});

9 dan nilai sebagai

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

0. Ini adalah tampilan data yang cukup mendasar dan sangat mudah

Anda harus mendapatkan sesuatu yang terlihat seperti secara kasar.

Ingatlah bahwa ini sedang dalam proses dan berpotensi membuka Anda untuk mendapatkan lebih dari yang Anda tawar-menawar di email. Karena konten email sekarang mengulang semua data yang dikirim dalam formulir, jika robot atau pengguna jahat memutuskan untuk

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

1 lebih dari yang Anda minta, Anda mungkin akan mendapatkannya di kotak masuk Anda. Gunakan dengan hati-hati untuk saat ini. Kami sedang menyelidiki peningkatan

Anda dapat memodifikasi ini, melalui editor skrip. Garis

result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

memiliki semua yang Anda butuhkan. Anda dapat menyesuaikan markup agar sesuai dengan Anda. Kami memilih

MailApp.sendEmail({

  to: TO_ADDRESS,

  subject: "Contact form submitted",

  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`

  htmlBody: formatMailBody(mailData)

});

_9 karena itu adalah ukuran terbaik untuk email, dan menambahkan sejumlah kecil CSS ke dalamnya untuk memperbaiki kapitalisasi (semua kuncinya adalah huruf kecil di objek JS) dan sedikit spasi default. Meskipun gaya sebaris seperti ini umumnya merupakan praktik yang buruk pada halaman web normal, untuk HTML email, ini adalah satu-satunya cara yang dapat diandalkan untuk melakukan CSS
Kami menggunakan

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

0 untuk bagian nilai, karena bisa berupa apa saja - baris tunggal, multibaris (misalnya

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

4 tidak akan memotongnya)

Sementara kita di sini, ada juga opsi

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

5 untuk metode

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

6 yang dikomentari secara default

MailApp.sendEmail({

  to: TO_ADDRESS,

  subject: "Contact form submitted",

  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`

  htmlBody: formatMailBody(mailData)

});

_

Anda dapat membatalkan komentar jika Anda ingin menambahkan bidang balasan ke email Anda. Contoh dalam skrip akan menetapkan balasan sebagai email yang dikirimkan dalam formulir

Dokumentasi Google memberikan lebih banyak informasi tentang MailApp. sendEmail (misalnya

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

_7/

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

8 dll. ) jika Anda tertarik. https. // pengembang. google. com/apps-script/reference/mail/mail-app

Bagian Tiga - Menyimpan Data Formulir Kontak yang Dikirim dalam Spreadsheet

Mengirim data formulir langsung ke kotak masuk email Anda adalah langkah awal yang baik, tetapi kami dapat melakukannya dengan lebih baik. Juga, seperti disebutkan di atas, Google memiliki batasan berapa banyak email yang dapat Anda kirim dalam sehari, sehingga menyimpan data ke dalam spreadsheet lebih aman dan tidak mudah kehilangan data.

14. Tambahkan Fungsi

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

_9 ke Skrip Google Apps Anda

Ini akan merekam data yang diterima dari

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

1 sebagai baris dalam spreadsheet
Lihat. skrip-google-apps. js untuk kode lengkap yang dapat Anda salin-tempel

15. Simpan Versi Baru dan Publikasikan Ulang

Ikuti Langkah 4, 5 & 6 untuk menyimpan versi baru dan menerbitkan ulang skrip

16. Uji Ulang Pengiriman Formulir

17 Konfirmasi Data telah Dimasukkan ke dalam Spreadsheet

Server Langsung (di

<fieldset class="pure-group">

  <label for="color">Favourite Color: </label>

  <input id="color" name="color" placeholder="green" />

</fieldset>

_1 Anda)

Karena kami memuat eksternal. js, browser web kami tidak akan mengizinkan kami untuk hanya membuka file index. html dari direktori lokal untuk menguji formulir

Buka terminal Anda dan jalankan perintah ini untuk menginstal modul node dan memulai server langsung

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

Ini akan memakan waktu satu menit untuk menginstal, tetapi setelah selesai

<fieldset class="pure-group">

  <label for="color">Favourite Color: </label>

  <input id="color" name="color" placeholder="green" />

</fieldset>

2 Anda akan mulai

Itu memulai sebuah node. js server HTTP pada port 8000 dan membuka formulir yang baru saja Anda buat di browser default Anda. Jika Anda ingin memperbarui gaya formulir dengan gaya. css atau Javascript sisi klien dalam form-submission-handler. js, pastikan untuk mengedit index. html untuk memuat sumber daya tersebut secara lokal daripada melalui GitHub

Catatan. Ini adalah rasa ringan dari Node.js. js untuk pemula mutlak. Anda tidak perlu simpul. js untuk "menerapkan" formulir ini, Anda dapat menjalankannya di server web apa pun yang menyajikan HTML/CSS/JavaScript. Jika Anda belum pernah menggunakan Node. js sebelumnya, lihat. http. //panduan node. com/pemula. html tetapi untuk keperluan latihan ini (mengirim formulir tanpa server) Anda tidak memerlukan node. js atau

<fieldset class="pure-group">

  <label for="color">Favourite Color: </label>

  <input id="color" name="color" placeholder="green" />

</fieldset>

_2 itu hanya hal yang menyenangkan untuk dimiliki saat Anda membuat formulir karena secara otomatis memuat ulang halaman saat Anda membuat perubahan di editor teks Anda

Ingin lebih?

Jika Anda ingin kami melanjutkan tutorial ini, beri tahu kami

Untuk kenyamanan Anda, kami telah menyelenggarakan demo lapangan yang berfungsi di Halaman GitHub, periksa untuk melihat kode dan cara kerjanya. https. //dwyl. github. io/html-form-send-email-via-google-script-tanpa-server/

Tambahkan bidang Anda sendiri

Menanggapi permintaan Henry Beary, kami membuat penangan formulir menjadi generik yang berarti Anda sekarang dapat menambahkan bidang apa pun yang Anda inginkan ke formulir

Kami juga membuat formulir,

<fieldset class="pure-group">

  <label for="color">Favourite Color: </label>

  <input id="color" name="color" placeholder="green" />

</fieldset>

_4, yang menggunakan semua jenis elemen input formulir sehingga Anda dapat menyalin dan menempelkan elemen sesuai keinginan ke dalam formulir Anda sendiri. Pastikan untuk memperbarui nama dan ID mereka. Anda dapat menemukan contoh kerja dari formulir tes ini di sini. https. //dwyl. github. io/html-form-send-email-via-google-script-without-server/test. html

Ingatlah untuk menyertakan bidang di dalam formulir yang memiliki id

result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

6 dan pastikan bahwa

result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

4 elemen formulir cocok dengan judul kolom baru di spreadsheet Anda. e. g

<fieldset class="pure-group">

  <label for="color">Favourite Color: </label>

  <input id="color" name="color" placeholder="green" />

</fieldset>

Ini akan memungkinkan Anda menangkap warna favorit orang tersebut. e. g.

Beri tahu kami jika Anda memiliki pertanyaan

pencegahan SPAM

Untuk menghindari spam dan mengisi kuota penggunaan Google Apps, kami akan menerapkan teknik pencegahan SPAM sederhana yang dikenal sebagai Honeypot di mana teknik ini pada dasarnya membuat bidang teks tersembunyi yang jika diisi dianggap sebagai bot spam dan mencegah formulir tersebut dari

Bisakah Anda mengirimkan formulir tanpa PHP?

Bisakah saya mengirim data formulir HTML ke email?

Bagaimana cara mengirim email dari formulir HTML menggunakan JavaScript?

Bagaimana Anda mengirimkan data formulir HTML?