Cara Membuat Laman Contact Us Responsive di Blog

Laman Contact Us, Pada sebuah situs blog ataupun situs website laman contact us ini sangat di perlukan atau memang wajib ada dalam sebuah situs ini di karenakan jika ada dari para pembaca situs anda yang ingin menanyakan sesuatu mereka bisa menhubungi anda melalui laman contact us ini ataupun jika mereka punya saran atau kritikan terhadapat situs anda ataupun artikel anda mereka juga bisa menghubungi anda melalui laman contact us ini maka dari itu dalam sebuah situs laman contact us ini sangat di perlukan. Contact us ini jika di artikan ke dalam bahasa indonesia yang berarti "Hubungi Kami" dari arti kata contact us ini aja anda pasti sudah mengerti bukan apa maksudnya dengan begitu jika dari para pembaca ingin berkonsultasi atau menanyakan sesuatu akan lebih mudah untuk menghubungi si pemilik situs. Nah buat anda yang sudah memiliki sebuah situs blog ataupun website pribadi dan ingin membuat sebuah laman contact us bisa mengikuti tutorial cara membuat laman contact us responsive dan super keren yang ada di bawah ini langsung saja ke tkp tanpa berbasa basi lagi ya sobat

Langkah-langkahnya :


1. Pastikan anda sudah masuk atau login ke akun blogger anda masing-masing
2. Jika sudah anda pilih menu "Laman" setelah itu "Buat Laman Baru" jangan lupa anda pilih menu "HTML" jangan memilih menu "COMPOSE"


3. Kemudia anda "COPY" kode HTML yang ada di bawah ini dan pastekan ke dalam "Laman Baru" yang anda buat tadi

Kode HTML


<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:#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="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'] = '4219542592166053787';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d4219542592166053787','//deferon.com/','4219542592166053787');
_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': '8866800899420715293', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

NOTE : 



  1. Ganti kode yang di tandai //deferon.com/ dengan URL blog anda

  2. Ganti kode yang di tandai 4219542592166053787 dengan ID blog anda

  3. Jika anda ingin merubah warna dari widget contact us ini bisa menganti kode #07ACEC dengan kode warna yang anda inginkan


4. Jika sudah simpan laman baru yang kita buat tadi dan sekarang sobat sudah bisa melihat hasilnya
5. Selesai bagaimana sobat mudah bukan membuat laman contact us responsive ini sekian dari saya semoga bermanfaat

Source : http://www.idblanter.com/2016/06/cara-membuat-material-design-contact-form.html
Cara Membuat Laman Contact Us Responsive di Blog