Modifikasi Google Forms Contact Information Untuk Contact Form Blog

Tentunya sangat disayangkan kalau kemudahan yang disediakan Google tidak kita manfaatkan dan maksimalkan penggunaannya, salah satunya yaitu penggunaan Google Forms. Banyak blogger yang tidak memanfaatkan Google Forms ini alasannya terkendala dengan pemasangannya di blog.

Seperti kita ketahui bahwa Google Forms ini sanggup disimpan di blog dengan arahan embed berupa iframe. Tentunya hal ini yang menyebabkannya kurang disukai blogger alasannya tampilannya tidak sanggup di-custom biar sesuai dengan tampilan blog. Alih-alih tampilannya tidak sanggup di-custom, ada beberapa yang menggunakannya dengan memakai link pribadi ke halaman forms.

Dari itu, aku terus mencoba mencari cara biar tampilan Google Forms ini sanggup di-custom, khususnya untuk form Contact Information untuk dimanfaatkan sebagai Contact Form blog.

Terinspirasi dari SneakySheep, risikonya aku berhasil memodifikasi Google Forms Contact Information untuk contact form blog dengan validasi form memakai halaman "Terima Kasih" kita sendiri.

Demo

Di bawah ini responses untuk pesan yang masuk dari contact form demo di atas.


Bagaimana, tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama

Silahkan buat dulu contact form di Google Forms, silahkan masuk ke https://docs.google.com/forms/ kemudian buat form baru dengan menentukan form Contact Information.

Buat form ini hanya berisi 3 kolom untuk Nama, Email, dan Comments dan pastikan semuanya required. Untuk kolom lainnya silahkan hapus (Address dan Phone Number silahkan dihapus), sehingga menjadi menyerupai di bawah ini.


Kemudian silahkan catat ID FORM yang tertera di address kafe browser Anda yang biasanya tampak menyerupai berikut.

 https://docs.google.com/forms/d/17kFT1nbiRTD2Mj46u-xjIo1lEMkaI92izm4rbAuSSxA/edit

arahan yang aku block ialah ID FORM untuk form yang sedang Anda buat.


Kemudian klik Responses dan klik ikon Create Spreadsheet. Pilih Create a new spreadsheet kemudian click Create. Kemudian biarkan halaman gres untuk spreadsheet responses terbuka, Anda sanggup merubah title spreadsheet-nya. Pada Responses inilah pesan yang dikirim melalui form akan masuk.

Kemudian klik ikon gear (setting) di pojok kanan atas kemudian hilangkan centang pada Limit to 1 response lalu Save.

Kemudian klik ikon 3 titik vertical (more) di pojok kanan atas kemudian pilih Get pre-filled link. Setelah terbuka halamannya, silahkan klik kanan dan View Page Source.

Silahkan cari dan catat kode-kode berikut:

1. Silahkan cari kode aria-label="Name" kemudian catat arahan yang menyerupai berikut name="entry.2005620xxx".
2. Silahkan cari kode aria-label="Email" kemudian catat arahan yang menyerupai berikut name="entry.1045781xxx".
3. Silahkan cari kode aria-label="Comments" kemudian catat arahan yang menyerupai berikut name="entry.839337xxx".
4. Silahkan cari kode name="draftResponse" kemudian catat arahan yang menyerupai berikut value="[,,"201097215032485xxx"]".
5. Silahkan cari kode name="fbzx" kemudian catat arahan yang menyerupai berikut value="2010972150324853xxx".

Langkah Kedua

Silahkan simpan arahan HTML di bawah ini untuk menampilkan Contact Form di blog Anda. Anda sanggup memakai halaman static untuk menyimpan Contact Form ini (pada postingan HTML).

 <iframe name="iframe_uexxnchh" id="iframe_uexxnchh" onload="if(typeof sent_uexxnchh!='undefined'){window.location='URL-HALAMAN-THANKS';}"></iframe>
 <form action="https://docs.google.com/forms/d/ID-FORM/formResponse" method="POST" id="ss-form" target="iframe_uexxnchh" onsubmit="sent_uexxnchh=true">
 <div class="styled-input">
                         <div class="styled-input-in">
 <input type="text" aria-label="Name" name="entry.2005620xxx" value="" id="entry.2005620xxx" dir="auto" title="Modifikasi Google Forms Contact Information Untuk Contact Form Blog" required="required">
                                 <label>Name</label>
                                 <span class="span1"></span><span class="span2"></span>
 </div>
 </div>
 <div class="styled-input">
                         <div class="styled-input-in">
 <input type="email" aria-label="Email" name="entry.1045781xxx" value="" id="entry.1045781xxx" dir="auto" title="Modifikasi Google Forms Contact Information Untuk Contact Form Blog" required="required">
                                 <label>Email</label>
                                 <span class="span1"></span><span class="span2"></span>
 </div>
 </div>
 <div class="styled-input wide">
                         <div class="styled-input-in">
 <textarea aria-label="Comments" name="entry.839337xxx" rows="8" cols="0" id="entry.839337xxx" dir="auto" aria-required="true" required="required"></textarea>
                                 <label>Message</label>
                                 <span class="span1"></span><span class="span2"></span>
 </div>
 </div>
 <input name="draftResponse" type="hidden" value="[,,&quot;201097215032485xxx&quot;]">
                     <input name="pageHistory" type="hidden" value="0">
                     <input name="fbzx" type="hidden" value="201097215032485xxx">
 <button type="submit" name="submit" class="btn btn-default">Send</button>
 </form>

Kustomisasi:

1. Silahkan ganti URL-HALAMAN-THANKS dengan URL halaman thanks blog Anda sendiri. Untuk menciptakan halaman thanks, silahkan simak postingan ini.
2. Silahkan ganti ID-FORM dengan ID FORM yang Anda dapatkan tadi di Langkah Pertama.
3. Silahkan ganti arahan yang menyerupai entry.2005620xxx dan yang lainnya sesuai dengan aria-label dengan kode-kode yang Anda cari dan catat tadi pada Langkah Pertama. Begitu pun untuk value untuk arahan name="draftResponse" dan name="fbzx" silahkan diganti juga dengan kode-kode yang Anda cari dan catat tadi pada Langkah Pertama.

Langkah Ketiga

Silahkan simpan arahan CSS di bawah ini di edit HTML di atas arahan </head>

 <style>
 #ss-form input:focus   label,
 #ss-form textarea:focus   label,
 #ss-form input:valid   label,
 #ss-form textarea:valid   label {
   font-size: 0.75em;
   color: #8e44ad;
   top: -2.25rem;
   -webkit-transition: all 0.125s ease;
   transition: all 0.125s ease;
 }
 #ss-form .styled-input {
   width: 33.3333%;
   margin: 2rem 0 1rem;
   padding: 0;
   position: relative;
 }
 #ss-form .styled-input-in {
   position: relative;
 }
 #ss-form .styled-input label {
   color: #999;
   padding: 1rem;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transition: all 0.25s ease;
   transition: all 0.25s ease;
   pointer-events: none;
   line-height: 1;
   font-family: "Helvetica", "Arial", sans-serif;
 }
 #ss-form .styled-input.wide {
   width: 100%;
 }
 #ss-form input,
 #ss-form textarea {
   padding: 1rem 1rem;
   border: 1px solid #ddd;
   width: 100%;
   font-size: 1rem;
   background: #fafafa;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   font-family: "Helvetica", "Arial", sans-serif;
 }
 #ss-form input   .span1,
 #ss-form textarea   .span1 {
   display: block;
   width: 0;
   height: 3px;
   background: #8e44ad;
   position: absolute;
   left: 50%;
   -webkit-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out;
 }
 #ss-form input   .span2,
 #ss-form textarea   .span2 {
   display: block;
   width: 0;
   height: 3px;
   background: #8e44ad;
   position: absolute;
   right: 50%;
   -webkit-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out;
 }
 #ss-form input   span {
   bottom: 0;
 }
 #ss-form input:focus,
 #ss-form textarea:focus {
   outline: 0;
 }
 #ss-form input:focus   .span1,
 #ss-form textarea:focus   .span1,
 #ss-form input:focus   .span2,
 #ss-form textarea:focus   .span2 {
   width: 50%;
 }
 #ss-form textarea {
   width: 100%;
   min-height: 15em;
 }
 #ss-form .btn {
   font-family: "Helvetica", "Arial", sans-serif;
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 800;
   letter-spacing: 1px;
   border-radius: 0;
   padding: 0 25px;
   height: 51px;
   line-height: 51px;
   color: #333;
   background-color: #fafafa;
   border: 1px solid #ddd;
   cursor: pointer;
   margin: 10px 0 0;
   background-image: none;
 }
 #ss-form .btn-default:hover,
 #ss-form .btn-default:focus {
   background-color: #8e44ad;
   border: 1px solid #0400bf;
   color: white;
   outline: 0;
 }
 #iframe_uexxnchh {
 display:none;
 }
 @media (max-width:600px){#ss-form .styled-input {
   width: 100%;
 }
 }
 </style>

Demo on Blog

Di bawah ini responses untuk pesan yang masuk dari contact form demo on blog.


Jika Anda kreatif, trik ini sanggup dipakai juga pada jenis form-form lainnya.


Sumber https://www.kompiajaib.com/

Share this post