Bagaimana cara membuat formulir web di google sheets?

PENAFIAN. Artikel ini menggunakan Spreadsheet API produk kami, yang menurut pengguna kami adalah cara termudah untuk menyimpan data formulir web/html ke Google Spreadsheet. Ini memiliki tingkat gratis yang murah hati

Jika Anda seperti kami dan sering membuat situs web di mana tidak ada yang memerlukan server dan database kecuali beberapa formulir, Anda juga pasti merasa frustrasi dengan semua pekerjaan ekstra yang harus Anda lakukan hanya untuk menyimpan data dari beberapa bidang.

Langkah 1. Siapkan formulir kontak dalam file HTML atau melalui Formulir Google

Oke, jika Anda tidak tahu HTML apa pun, ini mungkin kurva belajar yang curam. Contohnya kecil jadi Anda harus menggunakan istilah Google yang tidak Anda mengerti dan mungkin masuk akal

Mari buat formulir dalam HTML. Ini adalah formulir kontak dasar dan tidak mengandung gaya apa pun

Bentuknya akan terlihat seperti ini

Kode lengkap untuk Formulir Kontak dan cara menangani pengiriman ada di bawah

Buka file kosong di editor teks yang Anda gunakan untuk pemrograman, salin dan tempel kode di bawah ini dan simpan file dengan [. html] ekstensi. Kami menyimpan milik kami sebagai ContactForm. html

Kami akan membahas bagian HTML sekarang dan bagian Javascript nanti

Formulir kontak memiliki 4 bidang

Pay attention to the name attribute of the tags. These will be the column headers of our spreadsheet we save the data in and they MUST match up.

Kami akan memberi nama empat tag input sebagai berikut. Baris mengacu pada baris kode

1. full_name, baris 29 Ini akan menjadi bidang teks dengan nama lengkap orang tersebut
2. email, baris 33 Ini akan menjadi bidang teks dengan email orang tersebut
3. umur, baris 37–38 Ini akan menjadi bidang pemilihan radio dengan dua pilihan umur. 18–35 dan 35+. Kami akan menunjukkannya dalam atribut nilai bidang radio
4. pesan, baris 42 Ini akan menjadi area teks yang berisi pesan yang diketik orang tersebut

All four tags will be inside a tag (line 26) that we will give an id attribute of myForm. Do not give it any other id as the data submission to spreadsheet function that we will write later in the Javascript is dependent on it.

Finally, our main component will be a (line 47) that will be submitting the data. In its title attribute we are going to specify the function SubForm().

Sekali lagi, jangan beri nama lain pada fungsi tersebut karena kami akan menulis fungsi persis ini nanti di Javascript untuk menangani pengiriman data

Bagian ini mudah

1. Buka Lembar Google kosong

2. Write column headers equal to the name(s) of the tags

Setiap kali seseorang mengirimkan data, itu akan disimpan di kolom yang sesuai. Langkah ini sangat penting jadi pastikan tajuk ini PERSIS sama dengan nama tag masukan di atas

Langkah 3. Dapatkan URL API Anda dari Spreadsheet API

1. Mendaftar untuk sebuah Akun

• Klik Daftar di Navbar

• Daftar dengan email dan kata sandi Anda

2. Unggah file yang Anda buat di Langkah 2 dengan mengeklik "Google Spreadsheet"

3. Salin URL API untuk file Anda di bawah Tab Buat

Salin URL API untuk file Anda dan simpan di tempat yang mudah dijangkau. Kami akan menggunakan ini di Javascript di bawah ini untuk mengirimkan data

Jika tombol privat aktif, maka tautan akan menjadi sangat panjang dan berisi akses dan kunci rahasia untuk API ini. Tombol pribadi kami mati di bawah sehingga tautannya pendek. Terserah mau pakai yang mana. Jika Anda ingin menjadikannya pribadi, Anda perlu membeli akun dan kodenya akan terlihat seperti berikut

Kami akan menggunakan AJAX untuk mengirimkan formulir. Sekali lagi, jika Anda tidak terbiasa dengan Javascript, jQuery, atau AJAX, ini mungkin kurva belajar yang curam

We are going to include the full HTML code here again. The Javascript part is within the tags (lines 5–23).

1. Tambahkan jQuery dari CDN (baris 5–8)

Kita perlu memastikan pustaka jQuery LENGKAP disertakan dalam HTML kita untuk menggunakan AJAX