Cara Membuat Formulir Kontak di Blogger (Blogspot.com)

Contact us (kontak kami) -- formulir kontak -- merupakan salah satu cara bagaimana pembaca blog menghubungi penulis/pemilik (admin) blog.

Contact form dibuat di halaman statis (static page); sama seperti about, sitemap, disclaimer, privacy policy, dan lainnya.

Dari gambar di atas, terlihat tampilannya mirip sekali dengan tutorial sebelumnya: Cara Membuat Contact Us 100% Responsive di Blogger. Jika tutorial sebelumnya gagal, barangkali berhasil dengan tutorial di bawah ini.

Cara Membuat Formulir Kontak di Blogger

1. Blogger.com > Layout > Add a Gadget > Formulir Kontak (Contact Form)

2. Template Blogger > Edit HTML > loncat ke widget ContactForm1

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
     <b:includable id='main'>
   <b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
     <div class='contact-form-widget'>
   <div class='form'>
<form name='contact-form'><p/>
<data:contactFormNameMsg/><br/>
     <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/><p/>
     <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span><br/>
     <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/><p/>
     <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span><br/>
  <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/><p/>
     <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/><p/>
  <div style='text-align: center; max-width: 222px; width: 100%'>
     <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
     <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div></form></div></div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

3. Selanjutnya, hapus kode (sudah ditandai di atas) yang dimulai dari:

<b:if cond='data:title != &quot;&quot;'>

...sampai dengan kode:

<b:include name='quickedit'/>

Sehingga yang tersisa hanyalah kode:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
   <b:includable id='main'>
     </b:includable>
</b:widget>

4. Masih di dalam template blogger, tambahkan kode CSS di bawah ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <style type='text/css'>
/* Halaman Kontak Style */
.inputpesan {float: none; position: relative; margin-bottom: 45px; margin-right: 10px;}
     #ContactForm1_contact-form-email, #ContactForm1_contact-form-name, #ContactForm1_contact-form-email-message {width: 100%;padding: 15px 0; border: none; color: #777; border-bottom: 1px solid #ddd; display: block;font-size: 15px;}
     #ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{border-bottom: 2px solid #2b43f5; transition:all .3s ease-out}
     #ContactForm1_contact-form-submit{color: #fff !important; background: #2196F3; padding: 15px 25px; border-radius: 4px; border: none; outline: none; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); cursor: pointer; transition: all .4s ease-in-out; text-transform: uppercase; float: left; margin-top: 15px;}
     #ContactForm1_contact-form-submit:hover{background-color:#f5785f}
     #ContactForm1_contact-form-submit:focus{outline:0}
     #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:10px;}
</style>
</b:if>

5. Simpan template blogger.

6. Yang terakhir, kita harus memanggil atau mengaktifkan formulir kontak yang sudah dikostum di halaman statis (static page).

7. Pages > New Page > Copas kode di bawah ini:

<div class="inputpesan"><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" /><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>

Jika sebuah email dikirim oleh pembaca atau pengunjung blog, maka email akan masuk ke inbox admin blog.

Referensi:
https://www.root93.co.id/2017/04/membuat-halaman-kontak-blog-yang-bagus.html

Labels: Blogger,
Terima kasih sudah membaca Cara Membuat Formulir Kontak di Blogger (Blogspot.com)! Bagikan artikelnya, ya!

Main Blog SEO Blogger sejak 2014. Teknik Komputer dan Jaringan (TKJ) Tahun 2012.

Berbagi :