Halaman contac us adalah salah satu syarat wajib yang harus dimiliki oleh situs web selain halaman
Privacy Policy dan
Disclaimer.Halaman Contact Us berfungsi sebagai sarana untuk berkomunikasi antara pengunjung dengan pemilik situs melalui pesan singkat yang dikirimkan via email. Dengan demikian interaksi antara keduanya bisa terjalin ketika ada beberapa hal yang mungkin ingin ditanyakan oleh pengunjung blog tersebut terkait dengan isi artikel atau konten yang terdapat pada situs yang dikunjunginya.
Ada banyak cara untuk membuat halaman Contact Us di blog,bisa secara online atau bisa juga dengan cara manual yaitu dengan memanfaatkan gadget formulir kontak yang memang sudah disediakan oleh pihak
Blogger.
Cara membuat form Contact Us dengan gadget formulir kontak.
Langkah pertama silahkan masuk ke akun blogger kemudian pilih menu tata letak.
Pilih tambahkan gadget (untuk posisi bisa ditempatkan pada sidebar atau footer). Selanjutnya pilih gadget formulir kontak.
Setelah selesai silahkan simpan.
Selanjutnya copy kode script di bawah ini
<style type='text/css'>
#ContactForm1{display:none}
</style>
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
/* Contact form */
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:50px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;}
#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fff;outline:0}
#ContactForm1_contact-form-email-message{width:95%;height:170px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;}
#ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:10px;margin:0;cursor:pointer;background-color:#6e9ee6;border:1px solid #6e9ee6;border-radius:3px;}
#ContactForm1_contact-form-submit:hover{background-color:#3c3c3c}
#ContactForm1_contact-form-submit:active{position:relative;top:2px;}
#ContactForm1_contact-form-submit:focus{outline:0}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}
@media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}}
@media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{marg
</b:if>
Setelah itu masuk ke menu tema dan pilih edit html. Cari kode </head> dan tempatkan script tersebut di atasnya kemudian klik simpan.
Jika sudah selesai,langkah berikutnya buka menu halaman lalu pilih buat halaman baru. Buka menu tampilan html (<>) lalu tempatkan script di bawah ini pada halaman tampilan html (<>).
<div dir="ltr" style="text-align: justify;" > Silahkan isi pesan melalui form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan. Terima kasih <br /> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br /> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /><br /> <div class="clear"> </div> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div>
Jangan lupa isi penelusuran deskripsinya lalu klik publikasikan dan lihat hasilnya. Lakukan uji coba dengan memasukan nama,alamat email dan teks pada kolom pesan kemudian kirimkan. Jika berhasil maka akan ada notifikasi yang dikirimkan oleh situs atau blog ke alamat email anda.
Jika kontak form tidak berfungsi,maka langkah selanjutnya copy script di bawah ni
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2759014865-widgets.js"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "<data:blog.blogId/>";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogIDx3d<data:blog.blogId/>","<data:blog.url/>","<data:blog.blogId/>");
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "Your message has been sent.", "contactFormMessageNotSentMsg": "Message could not be sent. Please try again later.", "contactFormInvalidEmailMsg": "A valid email address is required.", "contactFormEmptyMessageMsg": "Message field cannot be empty.", "title": "Contact Form", "blogId": "<data:blog.blogId/>", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>
Pilih lagi menu tema lalu klik edit html. Cari kode </bodi> dan tempatkan script tersebut di atasnya kemudian klik simpan.
Demikian tutorial cara membuat form Contact Us dengan gadget formulir kontak telah selesai dibahas dan semoga artikel ini bermanfaat untuk semuanya.
Tidak ada komentar:
Posting Komentar