Tutorial : Cara Membuat Form Contact Material Design di Blog

Admin
Admin
Juni 03, 2020
Candilkuya.com - Hai Sobat Candil, Pada Kesempatan Kali Ini Admin Mau Bikin Tutorial Singkat Mengenai Cara Membuat Form Contact Material Design di Blog.

Google pun sudah banyak mengembangkan Material design, dikarenakan banyak para web designer sudah mulai mempelajari desain bawaan Google terbaru ini, alhasil yang dibuat pun menjadi lebih elegant pastinya.

Form Contact Material Design
Form Contact Material Design

Nah Pada tutorial ini kita tidak Akan menggunakan Javascript khusus. Dan Tutorial ini terinspirasi dari Seorang blogger legendaris yaitu mas Rio pemilik dari Idblanter. Okelah Sobat CandilKuya.com, Langsung Saja Saya Sajikan Tutorialnya, Silahkan Di Simak Dan Perhatikan :

Cara Mudah Membuat Formulir Contact Material Design di Blogger



  • Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
  • Masuk ke menu HALAMAN > selanjutnya klik Buat Halaman Baru.
  • Masukkan judul sesuai keinginan kalian "Contact" atau sesuai selera Kalian masing-masing.
  • Silahkan kamu copy kode HTML dibawah ini tepat di menu HTML bukan Compose Ingat!!


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

1. Silahkan kamu ganti URL //candilkuya.com dengan URL blog kamu
2. Selanjutnya silahkan kamu ganti 7436841584683332580 dengan ID BLOG kamu masing-masing.
×

Kalau sudah silahkan klik PUBLIKASIKAN atau PERBAHARUI.

Nah Sobat Candilkuya.com Sebenarnya Tutorial Cara Membuat Form Contact Material Design di Blog Ini Sebelumnya Sudah Di Post Di Blog Showdzgn, Sengaja Saya Buat Kembali Tutorial Ini Hanya Untuk Kebutuhan Pribadi Jika Suatu Saat Nanti Saya Membutuhkan Tutorial Ini, Saya Bisa Mencarinya Di Blog Saya Sendiri.

Mohon Maaf Jika Ada Salah Kata, Karena Saya Pun Masih Pemula Dalam Membangun Sebuah Blog, Jika Ada Kritik Dan Juga Saran, Jangan Sungkan Untuk Memberi Komentar. Semoga Bermanfaat
Tutorial : Cara Membuat Form Contact Material Design di Blog 5 out of 5
Admin