Menambahkan Form Kontak di Blogger

Menambahkan Form Kontak di Blogger - Pada kesempatan ini saya akan mencoba untuk menguraikan soal form kontak (contat form). Di wordpress biasanya sudah sangat gampang mengisi form kontak (contact form) dengan menggunakan plugin-plugin yang sudah banyak ada, tinggal di pilih.

Nah untuk di blogger sebenarnya juga sudah tersedia satu plugin yang bernama Contact Form, namun hanya bisa didapatkan dari menu widget.

Terus bagaimana misalnya jika kita ingin mengisi form kontak di post atau halaman tertentu? Kalau begitu langsung saja ke tutorialnya.

Langkah 1. Masuk ke menu Layout > Add a Gadget > More Gadgets > Contact Form.

Isi nama form sesuai dengan keinginan Anda (bebas rapi) selanjutnya klik Save untuk menyimpan-nya.

Langkah 2. Masuk ke menu Templates > Edit HTML.

Klik Jump to widget kemudian pilih ContactForm1, maka Anda akan menemukan sebuah script seperti berikut:

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' version='1' visible='true'>

Klik tanda panah yang ada di sebelah kiri dari script tersebut maka kemudian hapus semua script yang ada (lihat script di bawah ini, yang di hapus kecuali script yang warna merah).

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

Langkah 3. Cari script yang berisi ]]></b:skin> dengan cara menekan CTRL+F dan ketik ]]></b:skin>. Setelah Anda menemukannya sekarang copy dan paste script berikut tepat di atas ]]></b:skin>.

/*FORM KONTAK by werdibali.id */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}

Setelah itu jangan lupa klik Save template untuk menyimpan perubahan yang sudah dilakukan.

Langkah 4. Sekarang silahkan Anda membuat pos atau halaman yang ingin diisi form kontak, kemudian copy script di bawah ini.

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear:both">
</div>
<div class="fm_message">
Message *:
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" />
<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>
</div>
</div>
</div>

Bagian yang berwarna merah bisa Anda rubah sesuai dengan keinginan Anda.

Jadi semuanya sudah beres, semoga tutorial ini bisa bermanfaat dan jangan lupa masukan positif di bagian bawah yaaaa...