 |
| Gambar ini akan diperbaharui |
Contact form (formulir kontak) merupakan widget yang telah disediakan oleh pihak Blogger. Widget ini berfungsi untuk membantu para pengunjung dalam melakukan kontak atau interaksi dengan pemilik blog yang sedang dikunjunginya. Dan ketika widget ini ditambahkan pada blog kita, tentunya widget ini akan tampil pada bagian sidebar maupun bagian footer (tergantung dimana kita menempatkannya). Namun pada kesempatan kali ini kita akan mencoba untuk menempatkannya pada bagian laman atau bisa juga disebut dengan halaman statis.
Berikut adalah langkah-langkah untuk menempatkan contact form pada bagian laman.
1. Unduh terlebih dahulu template blog Anda (opsional).
2. Pilih menu Tata Letak > Tambahkan Gadget > Gadget Lainnya > lalu tambahkan widget Formulir Kontak dengan mengklik tanda plus > Simpan > Simpan setelan.
3. Setelah widget contact form terpasang, selanjutnya Anda pilih menu Template > Edit HTML > Lompat ke widget > ContactForm1.
4. Uraikan kode widget contact form dengan mengklik panah berwarna hitam sampai terlihat kode seperti berikut.
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
5. Hapus kode yang diberi warna merah lalu klik Simpan template.
6. Setelah itu Anda pilih menu Laman > Laman baru > pilih HTML di samping Compose dan masukkan kode di bawah ini.
<form name="contact-form">
<div>
<span style="font-family: inherit;">Nama</span></div>
<span style="font-family: inherit;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> </span><br />
<div>
<span style="font-family: inherit;">Email</span></div>
<span style="font-family: inherit;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> </span><br />
<div>
<span style="font-family: inherit;">Pesan</span></div>
<span style="font-family: inherit;"><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> </span><br /><br />
<span style="font-family: inherit;"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" /></span> <br />
<div style="max-width: 500px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
7. Beri judul pada laman lalu Publikasikan.
Catatan:
Widget contact form tidak akan berfungsi jika Anda memakai script yang mencegah pengalihan ke domain khusus negara (misalnya dari [namablog].blogspot.com dicegah untuk beralih ke [namablog].blogspot.co.id).
Tidak ada komentar:
Posting Komentar