Cara Terbaru Membuat Contact Us (Contact Form) di Halaman Statis Blog Tanpa Widget

Cara Membuat Halaman Contact Di Blog Terbaru

Tutorial.web.id – Cara Terbaru Membuat Contact Us (Contact Form) di Halaman Statis Blog Tanpa Widget. Pentingnya halaman kontak atau contact us pada suatu situs atau blog adalah sebagai sarana antara pengunjung dan pemilik blog dalam menjalin sebuah komunikasi. Ini juga merupakan syarat mutlak dan penunjang kelayakan menu navigasi sebuah situs atau blog.

Dengan adanya menu dan halaman contact form, sebuah blog akan dinilai sebagai blog yang dikelola secara profesional baik dimata Google maupun pengunjung blog. Di samping itu keberadaan halaman contact us juga bisa dijadikan alat untuk membangun list building untuk blog anda selain tentunya dengan menempatkan widget subscribe box.

Sebenarnya sudah banyak bertebaran tutorial serupa di internet mengenai cara memasang contact form (contact us) ini, Anda juga bisa membuat contact form melalui widget yang disediakan Blogspot atau menggunakan jasa layanan pihak ketiga, tapi saya sendiri lebih suka dan puas dengan membuatnya sendiri.

Cara Memasang Contact Us di Blog Dengan Mudah

Postingan kali ini, saya akan memberikan panduan cara membuat halaman contact us yang lebih simpel. Anda tinggal memasukkan kode yang akan saya berikan di bawah ke dalam halaman yang anda buat.

Silahkan simak dan terapkan langkah-langkahnya berikut ini :

1. Buka dashboard akun Blogger Anda
2. Pilih Page/Laman > New Page
3. Isilah Judul terlebih dahulu pada kolom judul yang tersedia, misalnya "Contact Us" atau Kontak dsb.
4. Pada menu di sebelah kiri ada pilihan Compose dan HTML, silahkan pilih HTML
5. Kemudian copy dan pastekan kode di bawah ini ke dalam kolom halaman kosong yang tersedia

Silahkan isi form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan.
<form name="contact-form">
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

Email Address <span class="wajib">*</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

Pesan <span class="wajib">*</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 class="formb">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'GANTI DENGAN ID BLOG KAMU';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dGANTI DENGAN ID BLOG KAMU','//GANTI DENGAN NAMA BLOG KAMU/','GANTI DENGAN ID BLOG KAMU');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'GANTI DENGAN ID BLOG KAMU', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<style type="text/css">
#ContactForm1{display:none}a.showcontent{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color: rgba(81,203,238,1);box-shadow: 0 0 5px rgba(81,203,238,0.7)!important;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {font-family:Open Sans Condensed, sans-serif;float:left;border-radius:3px;
background:#07ACEC;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;
padding:5px 10px!important;font-weight:700;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover {background:#444;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}.formb{max-width:22px;text-align:center;width:100%}.wajib{color:red;font-weight:bold}
</style> 

1. Edit kode diatas, cari semua tulisan GANTI DENGAN ID BLOG KAMU, silakan rubah sesuai dengan blog ID sobat ya. Jika ada yang belum paham apa itu blogID, lihat pada address bar browser (Lihat gambar dibawah)
2. Sedangkan untuk GANTI DENGAN NAMA BLOG KAMU, silakan dirubah sesuai dengan url blog masing², tanpa www ya, contoh tutorial.web.id

6. Kemudian klik Publish.

Demikian panduan singkat cara membuat contact us/contact form di halaman statis blog, semoga bermanfaat dan Happy Blogging. Jangan lupa di share ya…hehehe

Berlangganan update artikel terbaru via email:

Share this post