Modifikasi Desain Pesan Formulir Bawaan Google Doc

Modifikasi Desain Pesan Formulir Bawaan Google Doc

Translate
Formulir Google Doc Bawaan Google
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
Mendesain Formulir Google Doc
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

Lihat Juga

Mendesain Formulir Google Doc, Cara mendesain ulang formulir google doc. bagaimana cara menghubungkan dan mendesain formulir google doc?
Reaksi :
Share :
Print/Save
Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Halaman relevan lainnya
Beri Komentar