Cara Membuat Contact Form Material Desain Di Blogger

Membuat laman contact us atau hubungi kami di blogger menjadi sebuah keharusan bagi para blogger. Selain mempermudah menghubungi admin via email, kontak form  juga memudahkan para pembaca untuk merequest tutorial atau lainnya.

Pada kesempatan kali ini saya akan mencoba berbagi kontak form itu supaya tampilan blogger kamu lebih minimalis dan kekinian. Kelihatannya pihak google sangat sukses mengembangkan Material Design, karena sampai sekarang para web designer sudah mulai mempelajari tampilan tersebut. Seperti yang kalian lihat, ini adalah hasil dari pengembangan material design tersebut.

Berikut ini adalah langkah-langkah untuk membuat contact form material design tersebut:

1. Masuk atau login ke Blogger
2. Lalu buatlah halaman  baru dengan mode HTML (Jangan Compose)
3. Lalu pastekan kode berikut di Laman tersebut.

<style scoped="scoped">
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput 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%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#f7f7f7!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:#f7f7f7;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#f7f7f7;font-size:13px;font-weight:700;border-radius:3px}

</style>
<form name="contact-form">
<div class="blanterinput">
<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="blanterinput">
<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="blanterinput">
<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'] = '5251087733941850896';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5251087733941850896','//gilangramadhan11.blogspot.com/','5251087733941850896');
_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': '5251087733941850896', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

4. Lalu simpan laman tersebut dan lihat hasilnya.

Ganti kode 5251087733941850896 dengan kode blogger kamu.
ganti juga gilangramadhan11.blogspot.com dengan domain kamu.
Ganti juga kode warna #07ACEC sesuai keinginan kamu

Mungkin ada beberapa template yang membuat garis nya melebihi garis awal, silahkan edit .bar:before, .bar:after ubah buttomnya menjadi 15px, atau sesuaikan dengan yang kamu inginkan supaya pas.

Demo

Selesai. Jika kamu mempunyai pertanyaan seputar kontak form ini silahkan berkomentar.