Cara Membuat Halaman Contact Us (Contact Form) di Blogger - SeriesWans

Cara Membuat Halaman Contact Us (Contact Form) di Blogger - Pada kesempatan kali ini saya akan membuat sebuah tutorial bagaimana cara membuat halaman contact us di blog dengan mudah dan simple. Contact Us atau Contact Form adalah hal penting juga ketika anda membuat sebuah blog atau website. karena dengan kita membuat halaman contact form, maka pengunjung akan mudah untuk menghubungi anda baik itu lewat email atau nomor telepon. 

Cara Membuat Halaman Contact Us (Contact Form) di Blogger

Apa itu Contact Form ?

Contact form adalah sebuah halaman pada blog ataupun website yang biasanya digunakan untuk menghubungi si admin atau sang pemilik blog. layanan  ini sangat penting untuk anda yang punya blog ataupun website. karena dengan contact form, maka si pengunjung akan lebih mudah untuk menghubungi anda dan bertanya-tanya kepaada si pemilik blog.

Baca Juga : Cara Membuat Halaman Privacy Policy di Blog dengan mudah

Pada contact form ini memiliki nama yang sangat hits atau populer, yaitu ada yang bilang "Halaman Contact Me", "Halaman Contact Us", "Halaman Formulir Kontak", dan masih banyak lagi. oke kita langsung saja menuju tutorial cara pembuatanya halaman contact us.

Berikut adalah Cara Membuat Halaman Contact Us (contact form) di blog :

1.Pergi ke halaman situs pembuat layanan contact form, contohnya foxyform.com.

2.Setelah itu anda setting untuk penampilan contact formnya seperti apa dan sesuai keinginan anda terntunya. atau anda memilih seperti bawaan juga tidak apa-apa.

Cara Membuat Halaman Contact Us (Contact Form) di Blogger

• Settings : untuk title, name, E-mail dan Subject (silahkan adan ceklis yang anda perlukan saja).
• Advanced Settings : untuk Background color, font color, font dan font size ini silahkan anda atur sesuka hati anda.

3.Pada "Target E-mail Address" ini isi dengan alamat email anda dengan benar.

4.Kemudian masukan Re-Captchanya.

5.Apabila muncul eror "Wromg Anti-Spam Code", silahkan anda atasi dengan langkah-langkah berikut.

Cara Membuat Halaman Contact Us (Contact Form) di Blogger

6.Silahkan anda scrol ke bawah, dan akan muncul Re-Captcha yang kedua, silahkan anda masukan Re-Captchanya.

Baca Juga : Cara Membuat Halaman Disclaimer di Blog dengan mudah dan simple

7.Setelah itu anda coba klik tombol "Create formular".

Cara Membuat Halaman Contact Us (Contact Form) di Blogger

8.Kemudian anda copy html code contact formnya dan selanjutnya adalah cara pemasanganya pada blog.

Cara Membuat Halaman Contact Us (Contact Form) di Blogger

Cara pemasangan Contact Us (Contact Form) pada blog :

1.Pertama buka terlebih dulu buka halaman blogger.

2.Pilih "Halaman" kemudian buat halaman baru.

3.Setelah itu pilih "HTML" dan paste kan code script tadi.

Cara Membuat Halaman Contact Us (Contact Form) di Blogger 

4.Kemudian simpan dan lihat hasilnya.

Cara Membuat Halaman Contact Us (Contact Form) di Blogger

Baca Juga : Cara Membuat Halaman Terms of Service di Blog dengan mudah

Untuk pembuatan Contact Us atau Contact Form ini emailnya harus benar-benar yang aktif atau masih anda gunakan. jangan sampai pakai email yang ngasal. karena nanti pesan dari si pengunjung akan masuk ke email yang sudah anda masukan saat membuat halaman contact us.

Update 28/05/2020
Jika menggunakan cara di atas tidak bisa, dari blogger sendiri sudah menyediakan contact form bawaannya, nah untuk caranya bisa anda ikuti di bawah ini

Cara Membuat Contact Form di Sidebar Blog

1. Masuk ke Tata Letak => Add Gadget/Tambahkan Gadget => lalu cari Contact Form atau Formulir kontak
2. Setelah itu simpan
3. jika anda ingin tampilan contact formnya menarik silahkan tambahkan kode CSS di bawah ini tepat di atas kode </head>

<style type='text/css'>.contact-form-widget{}
.contact-form-success-message,.contact-form-error-message{background:#f9edbe;border:0 solid #f0c36d;font-size:14px;text-align:center;max-width:500px;border-radius:3px}
.contact-form-success-message-with-border,.contact-form-error-message-with-border{background:#f9edbe;border:1px solid #f0c36d;font-size:14px;text-align:center;max-width:600px;border-radius:3px;box-sizing:border-box;padding:5px 10px}
.contact-form-cross{height:11px;margin:0 5px;vertical-align:-8.5%;width:11px}
.contact-form-email,.contact-form-name{color:nherit;height:40px;margin-top:5px;max-width:300px;width:100%;padding:0 15px;border-radius:3px;border:1px solid #cacaca;box-sizing:border-box}
.contact-form-email-message{color:inherit;margin-top:5px;vertical-align:top;max-width:600px;width:100%;border-radius:3px;border:1px solid #cacaca;padding:15px}
.contact-form-email:hover,.contact-form-name:hover,.contact-form-email-message:hover{outline:none;border:1px solid $(body.link.color)}
.contact-form-email:focus,.contact-form-name:focus,.contact-form-email-message:focus{outline:none;border:1px solid $(body.link.color)}
.contact-form-name,.contact-form-email,.contact-form-email-message{background:#f8f8f8}
.contact-form-button{display:block;font-size:14px;line-height:24px;padding:5px 20px;margin:30px 0;text-align:center;border:none;background:$(body.link.color);color:#fff;border-radius:3px;font-weight:bold}
.contact-form-button:hover,.contact-form-button.hover{cursor:pointer;outline:none;opacity:.85}
.contact-form-button.focus,.contact-form-button.right.focus,.contact-form-button.mid.focus,.contact-form-button.left.focus{outline:none}
.contact-form-button-submit:focus,.contact-form-button-submit.focus{outline:none;opacity:.85}
</style>

Cara Membuat Contact Form di Halaman Statis

sebelumnya pada tutorial di atas kita sudah membuat contact form di bagian sidebar blog, sekarang kita membuat di versi halaman statisnya. dari sekian banyak blog yang pernah saya kunjungi, rata-rata semua memakai contact form versi halaman statis. karena kita menempatkannya di halaman khusus. nah untuk caranya bisa anda ikuti di bawah ini.

1. Pergi ke menu Halaman Blogger
2. Lalu buat halaman baru => alihkan dari menu Compose ke HTML
3. Lalu letakan kode di bawah ini

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="Form">
<form name="contact-form">
Name
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" style="max-width: 400px; width: 100%;" type="text" value="" />
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" style="max-width: 400px; width: 100%;" type="text" value="" />
Message
<span style="font-weight: bolder;">*</span>
<br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="max-width: 400px; width: 100%;"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" />
<br />
<div style="max-width: 400px; 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>
</div>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script> if (typeof(BLOG_attachCsiOnload) != &#39;undefined&#39; &amp;&amp; BLOG_attachCsiOnload != null) { window[&#39;blogger_templates_experiment_id&#39;] = &quot;templatesV1&quot;;window[&#39;blogger_blog_id&#39;] = &#39;<data:blog.blogId/>&#39;;BLOG_attachCsiOnload(&#39;&#39;); }_WidgetManager._Init(&#39;//www.blogger.com/rearrange?blogIDx3d<data:blog.blogId/>&#39;,&#39;<data:blog.homepageUrl/>&#39;,&#39;<data:blog.blogId/>&#39;); _WidgetManager._RegisterWidget(&#39;_ContactFormView&#39;, new _WidgetInfo(&#39;ContactForm1&#39;, &#39;footer1&#39;, null, document.getElementById(&#39;ContactForm1&#39;), {&#39;contactFormMessageSendingMsg&#39;: &#39;Sending...&#39;, &#39;contactFormMessageSentMsg&#39;: &#39;Your message has been sent.&#39;, &#39;contactFormMessageNotSentMsg&#39;: &#39;Message could not be sent. Please try again later.&#39;, &#39;contactFormInvalidEmailMsg&#39;: &#39;A valid email address is required.&#39;, &#39;contactFormEmptyMessageMsg&#39;: &#39;Message field cannot be empty.&#39;, &#39;title&#39;: &#39;Contact Form&#39;, &#39;blogId&#39;: &#39;<data:blog.blogId/>&#39;, &#39;contactFormNameMsg&#39;: &#39;Name&#39;, &#39;contactFormEmailMsg&#39;: &#39;Email&#39;, &#39;contactFormMessageMsg&#39;: &#39;Message&#39;, &#39;contactFormSendMsg&#39;: &#39;Send&#39;, &#39;submitUrl&#39;: &#39;https://www.blogger.com/contact-form.do&#39;}, &#39;displayModeFull&#39;)); </script></div>

4. setelah itu simpan dan hasilnya akan seperti gambar di bawah ini

Mungkin cukup sekian mengenai tutorial bagaimana Cara Membuat Halaman Contact Us (Contact Form) di Blogger dengan mudah dan cukup simple untuk pemula. apabila anda memiliki sebuah pertanyaan mengenai tutorial di atas, silahkan anda tanyakan di kolom komentar. semoga artikel ini bisa bermanfaat dan sekian terima kasih.

Related Posts