Cara Membuat Contact Form di Statis Blogger

Judul yang paling tepat, mungkin..., cara membuat dan memasang formulir kontak di halaman statis blogspot.com.

Halaman statis yang dimaksud adalah Static Page yang terdiri Tentang Saya (About), Kontak Saya (Contact), Privacy Policy, daftar artikel blog (Sitemap), dan Disclaimer.

Nah! Yang dibahas kali ini adalah laman Contact Form.

Kilas Balik

Sebenarnya saya sudah lama mencari tutorial ini, akan tetapi, karena kebanyakan tutorial yang saya temui di Google beresiko membuat kode-kode di template blogger menjadi rusak (error), akhirnya saya tinggalkan begitu saja dan melupakannya.

Betul, ada opsi untuk menggunakan penyedia pihak ketiga seperti 123 Contact Form. Namun saya tidak tertarik. Alasannya karena memberatkan kecepatan loading blog.

Ketika sedang asyik-asyiknya berjalan-jalan di blog orang, akhirnya saya menemukan tutorial yang pas dan tidak ribet caranya!

Cara Membuat Contact Form di Statis Blogger

1. Yang pertama adalah buka tata letak (layout), lalu tambahkan widget Contact Form atau Formulir Kontak. Terserah mau diletakkan di mana saja.

2. Selanjutnya masuk ke template blogger dan loncat widget ke: ContactForm1. Kurang lebih kodenya seperti ini:

<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. Sampai di sini, hapus kode <b:if cond='data:title != &quot;&quot;'> sampai kode <b:include name='quickedit'/> sehingga yang tersisa:

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

4. Selanjutnya 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. Silakan tekan tombol simpan untuk perubahan template blogger.

6. Pada langkah terakhir yang mesti dilakukan adalah memanggil formulir kontak tersebut di halaman statis kontak yang sudah dibuat. Kodenya:

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

7. Silakan dipublikasikan dan lihat hasilnya 😃

DEMO

Kesulitan? Mungkin iya, ya. Tapi ini versi terbaik yang bisa saya rekomendasikan.

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

Labels: Blogger,

Kalian baru saja membaca artikel Cara Membuat Contact Form di Statis Blogger. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.