Membuat Contact Form di Blog

JejakSeru.com - Kali ini saya akan membahas cara membuat contact form di blog. Contact form yang akan saya buat adalah contact form material design. Tampaknya google cukup berhasil dalam mengembangkan Material Design, karena saat ini para designer web sudah mulai mempelajari desain bawaan Google terbaru, seperti yang akan saya terapkan pada tutorial contact form berikut ini.

Tutorial Cara Membuat Material Design Contact Form

Langkah 1 : Masuk ke Blogger > Laman > Laman Baru > Pada menu pilih mode HTML.

Langkah 2 : Masukan kode di bawah ini pada kolom halaman contact form (mode HTML).

<style scoped="scoped">
.jejakseruinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.jejakseruinput input,.jejakseruinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.jejakseruinput input:focus,.jejakseruinput textarea:focus{outline:none}.jejakseruinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.jejakseruinput input:focus ~ label,.jejakseruinput input:valid ~ label,.jejakseruinput textarea:focus ~ label,.jejakseruinput 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%}.jejakseruinput input:focus ~ .bar:before,.jejakseruinput input:focus ~ .bar:after,.jejakseruinput textarea:focus ~ .bar:before,.jejakseruinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.jejakseruinput input:focus ~ .highlight,.jejakseruinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.jejakseruinput input:focus ~ label,.jejakseruinput input:valid ~ label,.jejakseruinput textarea:focus ~ label,.jejakseruinput 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="jejakseruinput">
<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="jejakseruinput">
<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="jejakseruinput">
<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'] = '4054783109958841445';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4054783109958841445','//jejakseru.com/','4054783109958841445');
_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': '4054783109958841445', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

- Ganti kode //jejakseru.com/ dengan URL blog kamu.
- Ganti kode 4054783109958841445 dengan ID blog kamu.
- Untuk merubah warna dasar silahkan ubah #07ACEC dengan kode warna yang kamu suka.

Langkah 3 : Simpan dan lihat hasilnya.

Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.

Berlangganan update artikel terbaru via email: