Cara Membuat Contact Form di Blogger

Contact form, atau tempat kontak untuk mengirim pesan sangat lah penting digunakan bagi para blogger, selain untuk kelengkapan blog, Contact form berfungsi juga agar pengunjung bisa mengirimkan pesan melalui contact form tersebut.

Dengan adanya contact form ini, Pesan otomatis akan terkirim ke Gmail sobat, untuk itu, mari simak apa saja yang harus dilakukan..

Cara Membuat Contact Form di Blogger

Tahap Pertama : 
1. Login ke Blogger
2. Lihat Tab Halaman > Buat halaman baru > dan pilih HTML

<style scoped="scoped">
.chayaeducationinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.chayaeducationinput input,.chayaeducationinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.chayaeducationinput input:focus,.chayaeducationinput textarea:focus{outline:none}.chayaeducationinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.chayaeducationinput input:focus ~ label,.chayaeducationinput input:valid ~ label,.chayaeducationinput textarea:focus ~ label,.chayaeducationinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.chayaeducationinput input:focus ~ .bar:before,.chayaeducationinput input:focus ~ .bar:after,.chayaeducationinput textarea:focus ~ .bar:before,.chayaeducationinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.chayaeducationinput input:focus ~ .highlight,.chayaeducationinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.chayaeducationinput input:focus ~ label,.chayaeducationinput input:valid ~ label,.chayaeducationinput textarea:focus ~ label,.chayaeducationinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<form name="contact-form">
<div class="chayaeducationinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="chayaeducationinput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
<div class="chayaeducationinput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>Message</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</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'] = '4450140464348692308';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d4450140464348692308','//chayaeducation.com/','4450140464348692308');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '4450140464348692308', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Keterangan : 
4450140464348692308 > Ganti dengan ID blog sobat
//chayaeducation.com/   > ganti dengan URL Blog sobat

Demo

Oke sobat, mungkin itu saja tutorial kali ini, semoga bisa diterapkan dan bisa bermanfaat baut sobat semua+_+ Jangan lupa tinggalkan komentar dibawah ini ya...