Skip to content Skip to sidebar Skip to footer

Menyimpan Input Formulir Custom HTML Sendiri di Google Form & Spreadsheet

zooba.ID | Menyimpan Hasil Input Formulir HTML Sendiri di Google Spreadsheet | How to Submit an HTML Form to Google Spreadsheets - Google form telah memudahkan orang untuk mengumpulkan informasi mulai dari survey, data pendaftaran, maupun kuis. Guru-guru bisa membuat kuis online untuk siswanya dengan bantuan Google Form, lihat CARA MEMBUAT KUIS ONLINE. Sayangnya, tampilan Google Form kayak gitu aja, dieditpun ya masih kayak gitu.

Kirim data formulir html ke google spreadsheet - submit data to google via html form

Sehingga tampilan yang seperti ini kadang mengindikasikan bahwa kita kurnag profesional, karena menggunakan layanan gratisan. Sebagai orang yang yang agak tahu dunia perkodean, saya mencoba untuk mencari cara Menyimpan Hasil Input Formulir HTML Sendiri di Google Spreadsheet | How to Submit an HTML Form to Google Spreadsheets. Nah, ketemu, sehingga kita bisa membuat formulir dengan desain kita sendiri dan mengirim datanya ke Google Spreadsheet.

CARA SUBMIT DATA KE GOOGLE SPREADSHEET PAKAI FORMULIR HTML SENDIRI

Saya anggap anda sudah ngerti kode. Setelah anda membuat formulir HTML sendiri, selanjutnya menghubungkannya ke Google Form. Prinsipnya adalah mengirim data dengan ajax ke Google Form. sehingga kita harus tahu target kirim kita, yaitu name untuk setiap input.

Langkah 1:  Setelah kita generate Google Form, selanjutnya kita inspect element (saya menggunakan Firefox) sehingga muncul jendela inspector seperti gambar di bawah ini.

 

Langkah 2: Selanjutnya kita klik target yang akan kita selidiki name nya. Caranya klik ikon cursor, lalu klik pada elemen input satu persatu. Di bagian kanan akan terlihat source codenya. Cari bagian name di input itu. Name digunakan sebagai penanda spesifik untuk input yang bersangkutan.

 
 Misal kita memiliki 5 input dengan name sebagai berikut:
Input Nama Ujian namenya adalah entry.501284819
Input Nama namenya adalah entry.1731008988
Input NIS namenya adalah entry.1635458420
Input Kelas namenya adalah entry.1563831830
Input Sekolah namenya adalah entry.1251729609
Input Nilai namenya adalah entry.1403654562

Langkah 3: Selanjutnya, di formulir HTML yang anda miliki, berikan target name pada input formulir kita. Pastikan submit dengan javascript yaitu fungsi postToGoogle (namanya gak harus itu sih, bebas lah). Menyimpan Hasil Input Formulir HTML Sendiri di Google Spreadsheet | How to Submit an HTML Form to Google Spreadsheets Contoh:

<form action="" autocomplete="off" id="form" onsubmit="return postToGoogle();" style="display: none;" target="_self">
<input id="ujianField" name="entry.501284819" placeholder="Nama Ujian" required="" type="text" />
<input id="namaField" name="entry.1731008988" placeholder="Nama Lengkap" required="" type="text" /> 
<input id="nisField" name="entry.1635458420" placeholder="NIS" required="" type="number" />
<input id="kelasField" name="entry.1563831830" placeholder="Kelas" required="" type="text" />
<input id="sekolahField" name="entry.1251729609" placeholder="Sekolah" required="" type="text" />
<input id="nilaiField" name="entry.1403654562" placeholder="Nilai" required="" type="text" />
<button class="common_btn" id="send" type="submit">KIRIM</button>
</form>
Perhatikan yang berwarna biru. Sesuaikan seperti name yang ada di Google Form ya.

Langkah 4: Setting pada kode JS yang berguna untuk submit ke Google Form dan diteruskan ke Google Spreadsheet.  Jangan lupa ganti yang biru dengan milik anda seniri.

function postToGoogle() {
// Mendapatkan variabel untuk dikirimkan ke Google Form
 var field1 = $("#ujianField").val();
 var field2 = $("#namaField").val();
 var field3 = $("#nisField").val();
 var field4 = $("#kelasField").val();
 var field5 = $("#sekolahField").val();
 var field6 = $("#nilaiField").val();

// Setting ajax untuk pengiriman form memanfaatkan input name, lihat url google form, silakan ganti milik anda
$.ajax({url:"https://docs.google.com/forms/d/e/1FAIpQLSdaqQI9DUqRviycbOL_z5rbjJGD9Ya43Rvo47eq5_QTJsktzAi/formResponse?", data: {"entry.501284819": field1, "entry.1731008988": field2, "entry.1635458420": field3, "entry.1563831830": field4, "entry.1251729609": field5, "entry.1403654562": field6},

// Mengirim post ke google form dan menampilkan pesan berhasil
type: "POST",
dataType: "xml",
success: function(d){},error: function(x, y, z){$('#form').hide();alert("Hasil ujian sudah disimpan. Lihat tautan yang disediakan");}

});
return false;
}

Setelah kita coba Menyimpan Hasil Input Formulir HTML Sendiri di Google Spreadsheet | How to Submit an HTML Form to Google Spreadsheets, hasilnya data bisa masuk ke Google Spreadsheet.

Demo silakan ke PrediksiUjian.com. Silakan isi kolom komentar jika ada masalah.

Demikain artikel Menyimpan Hasil Input Formulir HTML Sendiri di Google Spreadsheet | How to Submit an HTML Form to Google Spreadsheets semoga bermanfaat.

3 comments for "Menyimpan Input Formulir Custom HTML Sendiri di Google Form & Spreadsheet"

  1. This comment has been removed by the author.

    ReplyDelete
  2. Bisa saya lihat perintah keseluruhan..? Soalnya punya saya kenapa tidak terinput ke spreadsheeynya yaa..

    ReplyDelete
  3. Demonya gak bisa.. Dan kalau bisa buatin video tutornya dong..

    Saya ingin buat formulir pendaftaran siswa baru dengan html yang terkirim ke WA dan tersimpan di sperdsheet juga

    ReplyDelete