Modifikasi Desain Pesan Formulir Bawaan Google Doc
Januari 10, 2014

Beberapa waktu lalu ada teman yang bertanya bagaimana cara menghubungkan dan mendesain formulir google doc?.. karena cukup panjang apabila dijelaskan di dalam komentar maka saya pikir lebih baik dibikin posting saja..
Bagi sobat yang belum tahu apa itu formulir google doc silahkan lihat demonya dengan mengklik menu about me pada navigasi di atas kemudian plih
kirim pesan
.Cara menghubungkan dan Mendesain formulir google doc
Pertama kali yang harus dilakukan adalah mengambilurl
formulir dan juga masing-masing nilai name="entry.748310329"
dari setiap input formulir.Caranya:
1. Buka formulir google doc kemudian klik kanan dan pilih view page source / lihat sumber laman

name="entry.xxxxx"
yang berbeda-beda.3. Setelah mendapatkan nilai
name="entry.xxxxx"
coba anda copy code ini kemudian ubah code yang ditandai dengan nilai name formulir google doc milik anda yang sudah anda ambil tadi.
<div class="you_form-content">
<div class="you_form-inner">
<h3 class="pull-left">Kontak Saya</h3><span class="close pull-right" title="Tutup" style="display:block">Close</span>
/*Isi dengan url formulir google doc sobat.*/
<form class="you_form-contact cl cf" action="https://docs.google.com/forms/d/1Kx5NY6AaonVZqzngf4KL_vKYcSDFfwNQpB4Tf9MmpgI/formResponse" method="POST" id="you_form-contact">
<div class="pull-left cl cf">
<div style="position:relative">
/*Isi (xxxxxxxx) dengan name dan id pada input/elemen perihal.*/
<input type="text" name="entry.xxxxxxxx" value="Perihal (Wajib)" class="ss-q-short" id="entry_xxxxxxxx" aria-required="true" title="Perihal" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" />
</div>
<div style="position:relative">
/*Isi (xxxxxxxx) dengan name dan id pada input/elemen nama.*/
<input type="text" name="entry.xxxxxxxx" value="Nama (Wajib)" class="ss-q-short" id="entry_xxxxxxxx" aria-required="true" title="Nama" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" />
</div>
<div style="position:relative">
/*Isi (xxxxxxxx) dengan name dan id pada input/elemen email.*/
<input type="text" name="entry.xxxxxxxx" value="Email (Wajib)" class="ss-q-short" id="entry_xxxxxxxx" aria-required="true" title="Email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" />
</div>
<div style="position:relative">
/*Isi (xxxxxxxx) dengan name dan id pada input/elemen website.*/
<input type="text" name="entry.xxxxxxxx" value="Website" class="ss-q-short" id="entry_xxxxxxxx" title="Alamat Situs" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" />
</div>
</div>
<div class="pull-left">
<div style="position:relative">
/*Isi (xxxxxxxx) dengan name dan id pada input/elemen pesan.*/
<textarea name="entry.xxxxxxxx" class="ss-q-long required" id="entry_xxxxxxxx" dir="auto" aria-label="Pesan " aria-required="true" required=""></textarea>
</div>
</div>
<input type="hidden" name="draftResponse" value="[]" />
<input type="hidden" name="pageHistory" value="0" />
<input type="submit" name="submit" value="Kirim" id="ss-submit" />
</form>
</div>
</div>
4. Kemudian Copy CSS ini..you_form-content {
top: 5px;
position: absolute;
background-color: #633594;
width: 100%;
max-width: 540px;
}
.you_form-inner {
padding: 12px 15px;
overflow: auto;
}
.you_form-inner h3 {
font-size:15px;
margin:0;
color:#fff
}
.you_form-contact .pull-left {
width: 190px;
}
.you_form-contact .pull-left input[type="text"] {
width: 190px;
margin: 0 0 4px;
}
.you_form-contact input[type="text"], .you_form-contact textarea {
padding: 4px;
line-height: inherit;
border-color: #47126B #53138F #7C3DC0;
background-color: #A083D3;
color: white;
width: 100%;
}
.you_form-contact textarea {
width: 300px;
height: 90px;
margin-left: 5px;
}
.you_form-contact .pull-left+.pull-left {
width: 300px;
margin-left: 16px;
}
.pull-left {
display: block;
float: left;
}
.cl, .cf:after {
clear: both;
}
#ss-submit, .pull-right {
float: right;
}
.close {
color:#fff;
cursor:pointer
}
Hasil Akhir Mendesain Ulang Formulir Bawaan Google Doc
