Cara Memindahkan Contact Form Dari Widget ke Menu Pages diBlogspot

Contact From atau formulir pengiriman pesan di Blogspot seperti diketahui dibuat dengan menggunakan pihak ketiga atau bisa juga dibuat dengan Google Drive, namun saat ini Blogspot yang merupakan situs blog milik Google ini menambahkan widget baru yaitu contact form untuk menjawab kebutuhan para pengguna Blogger. 

Biasanya menu Contact Form dibuat atau dipasang di menu statik atau menu Pages, namun untuk fitur Contact Form yang disediakan oleh Blospot ini hanya dapat dipasang di menu widget artinya tampilan dari widget Concat Form ini sedikit kurang tepat. Untuk Anda pengguna Widget Concat Form yang ingin memindahkan posisi dari Widget ke menu pages atau halaman simak penjelasan lengkapnya dalam tutorial kali ini.

Buka menu Blog pilih Tata letak atau Widget kemudian pilih menu Tambahkan Gadget (Add New Gadget). Cari Widget Formulir Kontak atau Contact Form, untuk lebih jelasnya lihat pada gambar dibawah ini.

Setelah ditambahkan pindah gadet tepat pada posisi dibawah postingan blog caranya drug atau tarik posisi dari sidebar ke tepat dibawah postingan blog.

Masih pada menu Blog cari gadget yang sudah dibuat tadi dengan melihat di menu Template, caranya klik menu Template kemudian pilih edit HTML, tekan pada keyboard menu Ctrl+F setelah muncul menu Search masukkan kode tulisan Contact atau ContactFrom1.

Pada sisi kiri HTML atau yang bertulisakn angka klik tombol yang berwarna hitam sehingga muncul kode HTML Contact From, Hapus beberapa kode HTML dibawah ini.

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' 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/>
        <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>
        <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>
        <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>

Sehingga hanya tersisa kode HTML seperti ini

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
                        <b:includable id='main'>
    <b:include name='quickedit'/>
</b:includable>

Tahap pertama selesai, langkah selanjutnya masuk ke menu Laman atau Pages, selanjutnya Tambah laman, beri judul laman sesuai dengan serela Anda, untuk blog ini saya gunakan judul Contact Me. Selanjutnya tambahkan kode dibawah ini pada menu HTML

</div>
<form name="contact-form">
<div>
Your Name : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<div>
Your Email: <em>(required)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<div>
Your Message: <em>(required)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 450px; 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>

lakukan setting sebelum dipublish pada beberapa menu; Komentar pembaca setting pada dengan pilihan Jangan bolehkan, sembunykan yang ada. Sementara untuk mode tulisan atur dengan memilih Tafsirkan HTML yang diketik baris baru.

Jika sudah selesai klik pratinjau, lihat hasilnya jika sudah sesuai klik publish atau terbitkan. Lihat hasilnya. Untuk menu Contact form di blogspot ini memang tidak disertai Capta seperti pada umunya Contact from dari pihak ketiga, namun jangan kawatir karena Google sudah mengantisispasi spam yang masuk dengan di kategorikan pesan masuk dari Contact form masuk ke kategori Sosial.

Selamat mencoba jika ada pertanyaan silahkan tinggalkan komentar.