JOEE txt

Beranda
Blog

Membuat Halaman Hubungi Kami dengan HTML dan Google Sheets

Halaman "Hubungi Kami" adalah komponen penting dari situs web mana pun. Ini menyediakan jalur komunikasi langsung antara Anda dan pengunjung



Halaman "Hubungi Kami" adalah komponen penting dari situs web mana pun. Ini menyediakan jalur komunikasi langsung antara Anda dan pengunjung, pelanggan, atau klien potensial Anda. Baik Anda menjalankan blog, toko online, organisasi nirlaba, atau jenis situs web lainnya, halaman "Hubungi Kami" memungkinkan audiens menjangkau Anda dengan pertanyaan, umpan balik, atau peluang mereka.

Namun, menyiapkan halaman "Hubungi Kami" mungkin tampak menakutkan, terutama jika Anda ingin menyimpan dan mengelola pesan yang Anda terima dengan cara yang teratur. Di situlah tutorial ini masuk. Kami akan menunjukkan cara membuat halaman "Hubungi Kami" menggunakan HTML dan CSS untuk front-end, dan Google Sheets dan Google Apps Script untuk back-end. Ini akan memungkinkan Anda untuk mengumpulkan pesan dari pengguna dan menyimpannya langsung ke Google Sheet, sehingga mudah untuk mengelola dan menanggapi pesan Anda.

Langkah 1: Membuat Formulir HTML

Pertama, mari buat formulir HTML yang akan diisi pengguna. Kami akan menyertakan bidang untuk nama, email, dan pesan pengguna. Kami juga akan menambahkan tombol kirim. Ini kodenya:

 <form id="submit-to-google-sheet" name="submit-to-google-sheet">  
   <label for="name">Name:</label>  
   <input type="text" id="name-sn-1" name="name" required><br>  
   <label for="email">Email:</label>  
   <input type="email" id="email-sn" name="email" required><br>  
   <label for="message">Message:</label>  
   <textarea cols="25" id="message-sn" name="message" required></textarea><br>  
   <button id="submit-button-sn" type="submit" value="Send">Send</button>  
 </form>  
 <div id="sending-message" style="display: none;">Please wait, Your message is being sent...</div>  
 <div id="success-message" style="display: none;">Your message has been sent. Thank you!</div>


Langkah 2: Menata Formulir dengan CSS

Selanjutnya, kita akan menambahkan beberapa CSS untuk membuat form kita terlihat bagus. Kami akan memberi gaya pada formulir, label, kolom masukan, tombol, dan pesan. Berikut kode CSSnya:

 <style>#submit-to-google-sheet{ width: auto; max-width: 600px; margin: 0 auto; padding: 20px 50px 20px 23px; background-color: #f8f8f8; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;} #submit-to-google-sheet:hover{ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);} #submit-to-google-sheet label{ display: block; margin-bottom: 5px; font-weight: bold; color: #333; font-size: 1.1em;} #submit-to-google-sheet input, #submit-to-google-sheet textarea{ width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 3px; font-size: 1em; transition: border 0.3s ease;} #submit-to-google-sheet input:focus, #submit-to-google-sheet textarea:focus{ border-color: #007BFF; outline: none;} #submit-to-google-sheet button{ padding: 10px 20px; background-color: #007BFF; color: #fff; border: none; border-radius: 3px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease;} #submit-to-google-sheet button:hover{ background-color: #0056b3;} #sending-message, #success-message{ padding: 10px; border-radius: 3px; margin-bottom: 20px; transition: all 0.3s ease;} #sending-message{ background-color: #ffcc00; color: #333;} #success-message{ background-color: #28a745; color: #fff;} @media (max-width: 600px){ #submit-to-google-sheet{ box-shadow: none; border: none;} #submit-to-google-sheet label{ font-size: 0.9em;} #submit-to-google-sheet input, #submit-to-google-sheet textarea{ font-size: 0.8em;} #submit-to-google-sheet button{ font-size: 0.8em;}} </style>

Tampilan nya


Langkah 3: Menyiapkan Google Sheets dan Google Apps Script

Langkah ini melibatkan pembuatan dokumen Google Sheets baru, menulis Skrip Google Apps untuk menangani pengiriman formulir, dan menerapkan skrip sebagai aplikasi web.

3.1 Membuat Dokumen Google Sheets Baru

Pertama, Anda harus membuat dokumen Google Sheets baru untuk menyimpan pesan. Begini caranya:

  1. Buka Google Spreadsheet (sheets.google.com).
  2. Klik "+ Spreadsheet baru" untuk membuat dokumen baru.
  3. Beri nama spreadsheet seperti "Tanggapan Formulir Kontak".

3.2 Menulis Skrip Google Apps

Selanjutnya, Anda akan menulis Skrip Google Apps untuk menangani pengiriman formulir. Skrip ini akan dipicu setiap kali pengguna mengirimkan formulir di halaman "Hubungi Kami" Anda.

Berikut cara membuat skrip:

  1. Dari dokumen Google Sheets Anda, klik "Extensions" > "Apps Script".
  2. Hapus kode apa pun di editor skrip dan ganti dengan kode berikut:

 function doPost(e) {  
   var params = e.parameter;  
   var name = params.name;  
   var email = params.email;  
   var message = params.message;  
   // Get current date and time  
   var now = new Date();  
   var timestamp = Utilities.formatDate(now, "IST", "yyyy-MM-dd HH:mm:ss");  
   // Store data in Google Sheet  
   var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();  
   sheet.appendRow([timestamp, name, email, message]);  
   // Send email - Comment out lines below to send email  
   // var emailBody = 'You received a new message from ' + name + ' (' + email + ') at ' + timestamp + ':\n\n' + message;  
   // MailApp.sendEmail({  
   //  to: 'Provide_YOUR_EMAIL_ADDRESS',   
   //  subject: 'New message',  
   //  body: emailBody,  
   // });  
   return ContentService.createTextOutput(JSON.stringify({ 'result': 'success' })).setMimeType(ContentService.MimeType.JSON);  
  }


3. Klik "File"> "Simpan" dan beri nama proyek Anda seperti "Script Formulir Kontak".

3.3 Menyiapkan Pemicu

  1. Dari editor Apps Script, klik ikon jam, yang melambangkan "Pemicu". Ini akan membuka halaman "Pemicu proyek".
  2. Klik "+ Tambahkan Pemicu" di kanan bawah halaman.
  3. Di bawah "Pilih fungsi mana yang akan dijalankan", pilih doPostdari menu tarik-turun.
  4. Di bawah "Pilih jenis acara", pilih "Pada pengiriman formulir".
  5. Klik "Simpan".

Anda akan diminta untuk mengotorisasi skrip dengan akun Google Anda. Ini diperlukan karena skrip memerlukan izin untuk menambahkan baris ke dokumen Google Sheets Anda dan mengirim email atas nama Anda.

Berikut cara mengotorisasi skrip:

  1. Sebuah kotak dialog akan muncul mengatakan "Otorisasi diperlukan". Klik "Tinjau Izin".
  2. Pilih akun Google Anda.
  3. Anda akan melihat layar yang mengatakan "Aplikasi ini tidak diverifikasi". Klik "Lanjutan" dan kemudian "Pergi ke Nama Proyek (tidak aman)".
  4. Klik "Izinkan" untuk memberikan skrip izin yang diperlukan.

Sekarang, setiap kali pengguna mengirimkan formulir di halaman "Hubungi Kami", doPost fungsi tersebut akan dipicu, dan pesan pengguna akan disimpan di dokumen Google Sheets Anda.

Setelah menyiapkan pemicu dan mengotorisasi skrip, Anda dapat melanjutkan untuk menerapkan skrip sebagai aplikasi web seperti yang dijelaskan di pesan sebelumnya.

3.4 Menerapkan Skrip sebagai Aplikasi Web

Terakhir, Anda akan menerapkan skrip sebagai aplikasi web. Ini akan memberi Anda URL yang dapat Anda gunakan untuk memicu skrip.

Berikut cara menerapkan skrip:

  1. Dari editor Apps Script, klik “Publish” > “Deploy as web app”.
  2. Di bawah "Versi proyek", pilih "Baru" dan tulis deskripsi versi seperti "Versi awal".
  3. Di bawah "Jalankan aplikasi sebagai", pilih "Saya (email Anda)".
  4. Di bawah "Siapa yang memiliki akses ke aplikasi", pilih "Siapa saja, bahkan anonim". Ini memungkinkan pengguna yang tidak masuk ke akun Google untuk mengirimkan formulir.
  5. Klik "Terapkan".
  6. Anda akan melihat pesan yang mengatakan "Diperlukan otorisasi". Klik "Tinjau Izin", pilih akun Anda, dan berikan izin yang diperlukan.
  7. Anda kemudian akan melihat pesan yang mengatakan "Aplikasi ini tidak diverifikasi". Klik "Advanced" dan kemudian "Go to Contact Form Script (unsafe)".
  8. Klik "Izinkan" untuk memberikan izin yang diperlukan.
  9. Anda kemudian akan melihat kotak dialog dengan URL aplikasi web Anda. Salin URL ini dan simpan di suatu tempat – Anda akan memerlukannya di langkah berikutnya.

Dan itu saja! Anda sekarang telah menyiapkan Google Sheets dan Google Apps Script untuk menangani pengiriman formulir dari halaman "Hubungi Kami".

Langkah 4: Menghubungkan Formulir HTML ke Google Sheets

Terakhir, kami akan menggunakan JavaScript untuk menghubungkan formulir HTML kami ke Google Sheets. Saat formulir dikirimkan, kami akan mengirimkan permintaan POST ke aplikasi web Apps Script kami, yang kemudian akan menyimpan data di Google Sheets. Berikut kode JavaScriptnya:

 <script>  
   var scriptURL = 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec'  
   var form = document.forms['submit-to-google-sheet']  
   var successMessage = document.getElementById('success-message');  
   var sendingMessage = document.getElementById('sending-message');  
   form.addEventListener('submit', function(e) {  
     e.preventDefault()  
     form.style.display = 'none'; // hide the form immediately  
     sendingMessage.style.display = 'block'; // show the sending message  
     fetch(scriptURL, { method: 'POST', body: new FormData(form) })  
       .then(function(response) {  
         console.log('Success!', response)  
         sendingMessage.style.display = 'none'; // hide the sending message  
         successMessage.style.display = 'block'; // show the success message  
       })  
       .catch(function(error) {  
         console.error('Error!', error.message)  
         form.style.display = 'block'; // show the form again in case of error  
         sendingMessage.style.display = 'none'; // hide the sending message  
       })  
   })  
 </script>


Perhatikan bahwa Anda harus mengganti

 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec'

dengan URL apl web Apps Script Anda sendiri. 

Dan itu saja! Anda sekarang memiliki halaman "Hubungi Kami" yang mengumpulkan pesan dari pengguna dan menyimpannya langsung ke Google Sheet. Selamat membuat kode!

Semoga bermanfaat.

No one is too busy, it's just a matter of priority.