Modifikasi Desain Pesan Formulir Bawaan Google Doc

Mendesain Formulir Google Doc, Cara mendesain ulang formulir google doc. bagaimana cara menghubungkan dan mendesain formulir google doc?

Modifikasi Desain Pesan Formulir Bawaan Google Doc

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



Hasil Akhir Mendesain Ulang Formulir Bawaan Google Doc

Jika Anda menyukai Artikel di blog ini, Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami, Tuliskan kritik dan saran anda pada form komentar yang telah kami sediakan. Selain itu silahkan untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-moe].

Facebook Comment[s]

20 Bloggers Comment[s]

o/ wih mantep gan artikel nya.. tapi saya bingung google doc itu apa? hihi
maklum newbe.. hihi

Silahkan coba lihat http://www.dte.web.id/2013/09/membuat-formulir-kontak-google-doc-agar.html

Sama saya ge kang newbie .. izin praktek ah sugan tiasa
hatur nuhun kang

kang ruli mah newbie timana kang... sakitu atos senior g... pami abi mah muhun newbie...

saya sempat bingung bagaimana cara menempatkan google doc ini dengan stylenya sendiri.

semenjak saya berkunjung di artikel ini ilmu saya semakin bertambah.
Terima Kasih Mas :D

#TongFang -_-

manatp.. o/
lanjutkan sob :)

keren... :D

mantap sob... mau coba bikin

sampai dibuat postingannya, makasih mas sudah saya terapkan tinggal desain sesuai selera :-d

Komentar ini telah dihapus oleh penulis.

mas mau tanya nih, saya kan buat tampilan homepage saya jadi 2 kolom, tapi page static nya jadi berantakan, mau tanya solusi buat page static saya yang berantakan gimana ya??
contoh page static saya --> mbah-siyam.blogspot.com/p/link-exchange-mbah-siyam.html

Ya nanti saya coba lihat

yahh, udah telat udah saya kembaliin jadi 1 kolom lgi. Saya dpet tutorial buat 2 kolom nya dari sini www.tutorialbelajarblogger.blogspot.com/2013/08/cara-membuat-posting-dua-kolom-di.html
Bisa, jelasin gak kenapa page statis nya bisa bernatakan setelah nerapin tutor di situ?

kalo dilihat dari tutornya ga da yang salah, v supaya yakin coba lagi z.. nanti kalo tetap seperti itu saya coba bantu..

Wah tampilannya jadi lebih keren ya Kang :)

yah lumayan lah gan..

tutorial yang bermanfaat untuk mendesain formulir..

Terima kasih mba

ini kan tutorialnya ada di dte, mas kenapa punya saya gk langsung terkirim ke e-mail

Iya sob kalo membuat formulir dan menghubungkannya ada di DTE.. v saya cuma posting memodifikasi tampilannnya saja..

Kalo tidak masuk ke email.. kebanyakan biasanya salah menuliskan nama sheet pada JSnya...

Poskan Komentar

Komentar yang menyisipkan Tautan (link) aktif akan terhapus otomatis oleh sistem, Maka sisipkan link berupa teks url biasa.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait agar komunikasi lebih terstruktur. Apabila ingin melayangkan kritik dan saran atau komentar bersipat pribadi silahkan kirim pesan melalui page About Me pada menu navigasi di atas

Klik untuk melihat kode: :) =( :s :D :-D ^:D @@, T_T :\ :p :Q 7:( \o/ ^o^ :-a *fck* :W x@

Cancel
JavaScript Tidak Aktif
Aktifkan JavaScript!
Jangan lupa untuk menambahkan setidaknya satu karakter spasi sebelum kode emotikon. Jika tidak begitu, emotikon tidak akan bisa terbaca karena kesalahan penulisan sehingga kode tidak berubah menjadi emotikon · Close
Close

Nama Saya Wahyu. Saya bukan seseorang yang ahli dalam dunia blogging seperti CSS, Javascript,atau segala sesuatu tentang Blog, namun saya senang mempelajarinya. Awalnya saya memulai ngblog itu hanya iseng saja, tapi semakin lama justru makin tertarik dengan dunia blogging dan bikin ketagihan...


Artikel yang saya muat kebanyakan berisi informasi tentang Pendidikan terutama pendidikan khusus, karena disitulah bidang saya. Saya ingin memberikan informasi tentang Anak Berkebutuhan Khusus kepada masyarakat luas supaya tidak ada pandangan masyarakat yang mendeskripsikan bahwa mereka itu tidak mampu apa-apa, tidak bisa apa-apa, bahkan yang lebih parah ada diantara kita yang takut, jijik dll.. Selain itu juga berusaha untuk menghilangkan pandangan yang mendeskriminasikan mereka (Anak Berkebutuhan Khusus) karena dimata Tuhan YME, dimata Hukum dan HAM mereka juga berhak mendapatkan yang menjadi hak mereka seperti pendidikan, pekerjaan, dan kehidupan yang layak.

Selain artikel tentang pendidikan khusus, diblog ini juga terdapat artikel tentang Info Tenaga Honorer, CPNS, dan juga tips trick ngblog bagi pemula seperti saya.


Daftar Tautan & Komunitas


Kontak Saya