Cara Membuat Contact Form di Halaman Statis Blogspot

Cara Membuat Contact Form di halaman statis blogspot 

 Pada dasarnya contact form adalah widget yang bisa di pasang pada blog dan memang sudah tersedia di blogspot. Untuk membuat contact form di halaman statis memerlukan sedikit modifikasi.
Untuk membuat contact us di halaman statis seperti contoh ini silahkan sobat ikuti petunjuk di bawah ini.

Menambahkan widget contact form

widget ini sudah tersedia di blogspot

1. login ke blogger
2. klik layout
3. add widget
4. more gadget
5. contact form

 untuk lebih jelasnya lihat gambar :

Contact form

Modifikasi Kode Widget

Langkah-langkah

1. masuk ke template
2. edit HTML
3. klik jump to widget 
4. pilih contactform
5. expand

Perhatikan gambar :

contact form

Setelah itu cari kode

<b:widget id=’ContactForm

bisa juga dengan memanfaatkan ctrl F di kotak edit HTML

=====================================================

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

=====================================================

Hilangkan tulisan yang berwarna merah, yang selanjutnya akan menjadi seperti ini

=====================================================

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

</b:includable>
</b:widget>

=====================================================

Membuat Halaman Kontak

buat new page, kemudian pilih HTML dan isikan kode dibawah ini

=====================================================

<div class="widget ContactForm" id="ContactForm1">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

Name

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

E-mail *

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

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="Submit" />

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

</form>

</div>

</div>

</div>

=====================================================

klik publish dan lihat hasilnya

Hasil Contact Form

Jika sobat berhasil akan keluar tampilan seperti gambar di bawah ini

contact form

Pengujian Contact Form yang telah dibuat

Untuk memastikan semuanya berjalan dengan benar maka perlu dilakukan pengujian, isi contact form yang telah dibuat kemudian klik submit

cek di email milik sobat apakah sudah masuk email yang sudah sobat kirim ke email sobat sendiri tadi

email

Bagaimana sobat, sekarang blog sobat sudah sedikit profesional dengan adanya contact form static yang elah ditambahkan dengan metode di atas

demikian ulasan singkat bagaimana cara membuat contact form di page satic kali ini, semoga bermanfaat :)

Sumber : bsierad.com

Baca juga Situs-situs penyedia template gratis

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6963010720956254"
     crossorigin="anonymous"></script>