Modifikasi Desain Pesan Formulir Bawaan Google Doc

Desain Pesan Formulir Bawaan Google Doc

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 mengambil url 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

2. Kemudian coba anda lihat nilai name dari masing input dalam formulir google doc, seperti :perihal, nama, email, website, pesan. Dari kelima elemen tersebut mempunyai nilai 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==&#39;&#39;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;" />
                </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==&#39;&#39;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;" />
                </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==&#39;&#39;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;" />
                </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==&#39;&#39;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;" />
                </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

Share this post