Cara membuat Form Contact di blogger [Tanpa Js]

Cara membuat Form Contact di blogger - Hari ini Saya akan berbagi Tutorial baru yang menakjubkan untuk template blogger. Bagaimana menambahkan kontak desain material dari template blogger yang ada. Sobat semua pasti mengetahui tentang desain material dan efek cantik seperti ripple animation effect. Dalam Tutorial Membuat Form kontak ini Saya telah menggunakan desain material murni dan bagian terbaiknya adalah tanpa java script. Saat ini banyak perancang web sedang sibuk dalam mempelajari desain material dan Saya telah bekerja keras dan mengembangkan widget ini untuk Visitor Setia AkhtarvisArts.

DEMO

Cara Membuat contact form di blogger

1. Masuk ke akun Blogger Sobat. 


2. Buatlah halaman Statis Baru - lalu copy dan terapkan kode di bawah ini (ingat jangan copy di Compose tapi copy di HTML).

 <div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="scoped">
.BsdCntct{float:none;position:relative;margin-bottom:44px;margin-right:9px}.BsdCntct input,.BsdCntct textarea{font-size:14px;padding:14px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.BsdCntct input:focus,.BsdCntct textarea:focus{outline:none}.BsdCntct label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:9px;transition:.2s ease all}.BsdCntct input:focus ~ label,.BsdCntct input:valid ~ label,.BsdCntct textarea:focus ~ label,.BsdCntct textarea:valid ~ label{top:-19px;font-size:13px;color:#e74c3c}.barbsd{position:relative;display:block;width:100%}.barbsd:before,.barbsd:after{content:'';height:1px;width:0;bottom:1px;position:absolute;background:#e74c3c;transition:.2s ease all}.barbsd:before{left:50%}.barbsd:after{right:50%}.BsdCntct input:focus ~ .barbsd:before,.BsdCntct input:focus ~ .barbsd:after,.BsdCntct textarea:focus ~ .barbsd:before,.BsdCntct textarea:focus ~ .barbsd:after{width:50%}.lightbsd{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.BsdCntct input:focus ~ .lightbsd,.BsdCntct textarea:focus ~ .lightbsd{animation:inputHighlighter .3s ease}.BsdCntct input:focus ~ label,.BsdCntct input:valid ~ label,.BsdCntct textarea:focus ~ label,.BsdCntct textarea:valid ~ label{top:-19px;font-size:12px;color:#e74c3c}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#e74c3c;padding:14px 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:14px}
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:#008E00;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#357A37;color:#fff;font-size:12px;font-weight:700;border-radius:3px}
</style>

<br />
<form name="contact-form">
<div class="BsdCntct">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="lightbsd"></span>
<span class="barbsd"></span>
<label>Name</label>
</div>
<div class="BsdCntct">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="lightbsd"></span>
<span class="barbsd"></span>
<label>Email</label>
</div>
<div class="BsdCntct">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="lightbsd"></span>
<span class="barbsd"></span>
<label>Message</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />

<br />
<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'] = '8866800899420715293';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4593180265950566504','//https://akhtarvis.blogspot.co.id//','4593180265950566504');
_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 successfully.</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></div>
 

Kostumisasi :
1. Gantilah ID Blog yang sudah saya tandai di atas dengan id Blog sobat,(bisa di lihat di       url blog sobat, ketika sobat sedang berada pada halaman Dashboard sobat).
2. Gantilah url yang sudah saya tandai di atas.
3. Sobat Juga bisa mengganti #e74c3c warna yang sobat inginkan.

Baca Artikel Menarik lainnya

Loading...