Bayhaqy Blog

Home
Blogger

Bagaimana membuat Contact Form Page pada Blogspot

Tentunya kalian yang menggunakan blogger pernah menggunakan contact form di gadget pada blogger. Tetapi bagaimana caranya jika kita ingin membuatnya pada
Hallo Sobat semua,

 Pada kesempatan kali ini, kita akan membahas tentang Bagaimana membuat Contact Form Page pada Blogspot. Tentunya kalian yang menggunakan blogger pernah menggunakan contact form di gadget pada blogger. Tetapi bagaimana caranya jika kita ingin membuatnya pada Page / halaman sendiri?
Mari kita bahas lebih lanjut:
Bagaimana membuat Contact Form Page pada Blogspot


    Menyembunyikan Contact Form Gadget

    Tahapan pertama kali yaitu pastikan bahwa Contact Form Gadget telah aktif pada sidebar kalian. Setelah itu kita perlu menambahkan beberapa kode pada HTML blog kalian agar bisa menyembunyikan gadget tersebut. Caranya yaitu buka Dashbord kalian -> Pilih Template -> Lalu klik Edit HTML. Jangan sembarang taruh kode dibawah, tetapi harus diletakan diatas kode ]]></b:skin>. Masukkan kode dibawah ini:
    Mari kita bahas lebih lanjut:

    #ContactForm1{
display: none !important;
}
    Jangan lupa save jika sudah selesai menambahkan.

    Membuat Contact Form Page

    Pada tahapan ini, tentunya kita harus membuat page baru terlebih dahulu dengan cara buka Dashboard kalian -> Lalu pilih Pages -> setelah itu pilih New Pages. Untuk dapat membuat Contact Form Page, kita harus ubah dari tampilan Compose ke tampilan HTML dengan klik pada pilihan HTML. Jika sudah pada tampilan HTML, masukkan kode dibawah ini:

    <form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' />
<p></p>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
    Jika sudah menambahkan kode diatas, kalian bisa langsung publish.

    Dibawah ini merupakan contoh Contact Form Page yang telah berhasil dibuat:
    contoh Contact Form Page

    Sekian untuk pembahasan kali ini, Semoga hal tersebut bisa bermanfaat bagi kalian semua. Silahkan share jika pembahasan ini menurut kalian semua bermanfaat. Jangan lupa untuk follow dan comment juga ya. Terima Kasih. 😁