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 Jumt to widget kemudian pilih ContactForm1, maka Anda akan menemukan ada sebuah script:

<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 Anda akan menemukan script lengkap dari contact form tersebut.

<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 WERDINGEBLOG.COM */
.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…

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *