Free - Cara Menciptakan Contact Form Responsive Di Blog

Untuk menciptakan Contact form atau form contact responsive di blog tidak terlalu sulit jikalau kau mengikuti apa ya mimin katakan. Contact form ini berfungsi untuk mempermudah para pengunjung untuk berkomunikasi dengan admin dengan cara mengirim pesan melalui form contact.

Pesan yang akan diterima dari form yang akan mimin buat ini terbilang sangat bagus, mengapa ? sebab dikala kau menggunakannya, dijamin pesan akan masuk dalam waktu beberapa detik melalui email blog, Nah jikalau kau ingin tau dan ingin membuatnya gampang saja kok, ikuti ya tutorialnya:)



1. Login ke blogger kamu
2. Lihat tab kiri > Halaman > buat halaman baru > Mode HTML
3. Masukkan instruksi dibawah ini :

  <div class="enterblogger-logo"> <i class="material-icons md-48">verified_user</i> </div> <style scoped="scoped">   .enterblogger-logo{text-align:center;}   @font-face {   font-family: 'Material Icons';   font-style: normal;   font-weight: 400;   src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype'); } .material-icons {   font-family: 'Material Icons';   font-weight: normal;   font-style: normal;   font-size: inherit;   display: inline-block;   line-height: 1;   text-transform: none;   letter-spacing: normal;   word-wrap: normal;   white-space: nowrap;   direction: ltr;   vertical-align:middle;   /* Support for all WebKit browsers. */   -webkit-font-smoothing: antialiased;   /* Support for Safari and Chrome. */   text-rendering: optimizeLegibility;   /* Support for Firefox. */   -moz-osx-font-smoothing: grayscale;   /* Support for IE. */   font-feature-settings: 'liga'; }   .md-48{font-size: 100px;     color: #546de5;     padding: 10px;     background: #dde3ff;     border-radius: 100px;} .enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus   label,.enterblogger-input input:valid   label,.enterblogger-input textarea:focus   label,.enterblogger-input textarea:valid   label{top:-20px;font-size:14px;color:#546de5}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#546de5;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus   .bar:before,.enterblogger-input input:focus   .bar:after,.enterblogger-input textarea:focus   .bar:before,.enterblogger-input textarea:focus   .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus   .highlight,.enterblogger-input textarea:focus   .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus   label,.enterblogger-input input:valid   label,.enterblogger-input textarea:focus   label,.enterblogger-input textarea:valid   label{top:-20px;font-size:13px;color:#546de5} input#ContactForm1_contact-form-email-message{height:150px} input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#546de5;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="enterblogger-input"> <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> account_circle </i> Name</label> </div> <div class="enterblogger-input"> <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> contact_mail </i> Email</label> </div> <div class="enterblogger-input"> <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><i class="material-icons"> message </i> Message</label> </div> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <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'] = '5705102215223474422';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d5705102215223474422','//enterblogger.com/','5705102215223474422'); _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': '5705102215223474422', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script> 

Ganti 5705102215223474422 dengan ID Blog kau dan Ganti Enterblogger.com dengan blog kamu

Dimanakah Letak Blog ID ??

1. Login ke blogger kamu
2. Lihat URL pada blog kamu, untuk lebih jelasnya lihat gambar berikut :

Menurut kau gimana ? Praktis kan untuk menciptakan form contact responsive dari enterblogger:p biar dapat bermanfaaat ya untuk sahabat sahabat semua. mimin pergi dulu, dahhh :*