Tuesday, May 21, 2019

Cara Singkat Membuat Contact Form Di Blogger

Tuesday, May 21, 2019

Cara Singkat Membuat Contact Form Di Blogger


Contact Form itu apa kegunaanya buat situsblog ? "Yah kalau menurut saya sangatlah berguna karena bila ada pengguna atau pengunjung yang ingin menghubungi pemilik blog tersebut tentunya harus mempunyai contact form".

Admin di sebuah situs blog Seharusnya memasang fitur contact Untuk situs Blog Blogger nya, bagi yang masih baru melakukan kegiatan blogging nya usahakanlah saat pertama kali mendesign tampilan blognya tentunya berkunjung lah dulu ke situs blog lain agar bisa mengetahui apa saja yang harus di isi buat situs blognya,karena blog-blog orang lain itu sudah lama menekuni bidang di dunia blogging, agar bisa menemukan ide-ide yang ingin di terapkan di blog yang anda kelola, misalkan seperti membuat halaman contact yang akan saya bagikan ke sahabat semuanya.

Sebelumnya sahabat harus tahu, bahwa untuk menampilkan contact form ini di halaman pages blognya, harus membuka setelan menu pada tab menu tema atau template blognya, halaman Contact ini cukup penting fungsinya, apabila kita akan fokus dalam dunia blogging, karena akan di gunakan melalui fitur ini bila ada keperluan yang sangat penting dari pengguna dan pengunjung, atau dari situsblog lain, kemudian berguna juga untuk memasang URL di Privacy Police dan Disclaimer Cara yang akan di lakukan adalah sebagai berikut:

1. Masuk Ke Draft blogger
2. Pilih > Halaman / Pages
3. Pilih Halaman Baru
4. Buka Format HTML dan Copas Script Berikut :

<style scoped="" type="text/css"> #comments,#sidebar-wrapper {display:none;} #post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;} </style>
<br />
<div style="text-align: center;">
<h3 style="text-align: left;">
<b>Silakan Isi Form Di Dawah Ini Untuk Menghubungi Admin IYASEO.ID Jika Tidak Ada Halangan dan Kesibukan Lainnya, Admin Akan Langsung Merespon Pesan Yang Anda Kirimkan.
</b></h3>
</div>
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#ContactForm1{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Poppins';display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Poppins';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>


Cara Singkat Membuat Contact Form Di Blogger


• Selanjutnya Tuliskan Nama Halama/Pages di kolom Entri Dengan Contact dan publikasikan halaman baru tersebut
• Kemudian setelah selesai , kembali ke halaman/pages untuk melihatnya klik lihat di bawah laman contact, Seperti gambar berikut di bawah ini;


Cara Singkat Membuat Contact Form Di Blogger

Untuk melihat hasil contact from nya seperti ini

Baiklah, itulah pembahasan artikel nya kali ini, semoga artikel ini dapat memberikan manfaat dan informasi kepada anda. Pembahasan diatas merupakan Cara Singkat Membuat Contact Form Di Blogger Selamat mencoba, semoga anda sukses.


Bisa Anda Memberikan Komentarnya Dibawah Postingan Ini Dengan Menekan atau Klik Tombol Show Comments yang Berwarna Biru Di Bawah Postingan Ini...



Salam Blogger: https://www.iyaseo.id/

Show comments
Hide comments