Cara Memasang Contact Form Pada Halaman Statis

Deny Listianto    20 Januari 2018

Untuk memudahkan pengunjung blog kita menghubungi kita. Mulai dari mengirimkan saran dan kritikan terhadap blog, bertanya kepada admin blog.

Bahkan bisa juga sebagai sarana pembuka obrolan sampai curhat-curhatan masalah pacar, rumah tangga, keuangan dan kejombloan.

Cara ini bisa di terapkan untuk blog sobat semua terutama blog jual beli, marketing, dll.

Contact form pada dasarnya sudah di sediakan di blogger yang berbentuk widget. Jadi, kita bisa menempatkanya pada sidebar blog kita namun kali ini kita mencoba menempatkanya di halaman statis blog, ini kedengaranya sedikit sulit jika belum mempraktekanya.

Ok langsung saja disini saya tidak akan membahas mengenai fungsi dan kenapa widget formulir kontak mempunyai peran yang penting pada sebuah blog tapi disini saya akan berbagi tips tentang cara memasang formulir kontak pada halaman statis blogger, silahkan disimak.

Cara Memasang Formulir Kontak Pada Halaman Statis 

1. Login ke Blogger
2. Buka menu Tata Letak lalu Tambahkan Gadget.
3. Buka Gadget Lainnya plih Formulir Kontak. Perhatikan gambar berikut ini.

Sebelumnya Anda sudah memasang font awesome pada template, jika belum silahkan tambahkan link dibawah ini sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

4. Selanjutnya silahkan buka menu Template lalu Edit HTML
5. Letakan kode di bawah ini sebelum  </style> atau ]]></b:skin>

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

5. Simpan template.
4. Perhatikan kembali menu di dasbor blog, klik Halaman.
6. Lalu Buat Halaman Baru pindah ke HTML.
7. Kemudian isi dengan kode berikut ini.

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

8. Publikasikan dan lihat hasilnya.

Untuk font yang digunakan dan lainnya silahkan sesuaikan kembali dengan template Anda.

Referensi :
http://blog.kangismet.net/2013/05/memasang-widget-contact-form-blogger-pada-halaman-statis.html
http://www.arlinadzgn.com/2014/11/memasang-formulir-kontak-pada-halaman-statis.html