<style> /*<![CDATA[*/ .contact-form-box { width: 100%; margin: 20px auto; padding: 0 } #contactForm .floating-label-form-group { font-size: 16px; position: relative; margin-bottom: 0; padding-bottom: 20px; border-bottom: 1px solid #ddd } #contactForm .floating-label-form-group.floating-label-form-group-with-focus { position: relative } #contactForm .floating-label-form-group:after, #contactForm .floating-label-form-group:before { position: absolute; bottom: -1px; width: 0; height: 2px; background-color: #C51162; content: ""; transition: width .4s ease-in-out; display: block } #contactForm .floating-label-form-group:before { right: 50% } #contactForm .floating-label-form-group:after { left: 50% } #contactForm .floating-label-form-group.floating-label-form-group-with-focus:after, #contactForm .floating-label-form-group.floating-label-form-group-with-focus:before { width: 50% } #contactForm .floating-label-form-group input, #contactForm .floating-label-form-group textarea { z-index: 1; position: relative; padding-right: 0; padding-left: 0; border: none; border-radius: 0; font-size: 16px; font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif; font-weight: 400; background: 0 0; box-shadow: none!important; resize: none } #contactForm .floating-label-form-group label { display: block; z-index: 0; position: relative; top: 2em; margin: 0; font-size: 12px; font-weight: 300; line-height: 1.764705882em; vertical-align: middle; vertical-align: baseline; opacity: 0; -webkit-transition: top .3s ease, opacity .3s ease; -moz-transition: top .3s ease, opacity .3s ease; -ms-transition: top .3s ease, opacity .3s ease; transition: top .3s ease, opacity .3s ease } #contactForm .floating-label-form-group::not(:first-child) { padding-left: 14px; border-left: 1px solid #eee } #contactForm .floating-label-form-group-with-value label { top: 0; opacity: 1 } #contactForm .floating-label-form-group-with-focus label { color: #C51162 } #contactForm { border-top: 1px solid #ddd } #contactForm textarea.form-control { height: auto } #contactForm .form-control { display: block; width: 100%; color: #555 } #contactForm input:active, #contactForm input:focus, #contactForm textarea:active, #contactForm textarea:focus { outline: 0 } #contactForm .btn, #contactForm .contact-form-button-submit { font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif; font-weight: 700; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; border-radius: 0; padding: 0 25px; height: 51px; line-height: 51px; color: #333; background-color: #fff; border: 1px solid #ccc; cursor: pointer; margin: 20px 0 0; background-image: none } #contactForm .contact-form-button { height: 51px; line-height: 51px } #contactForm .btn-default:focus, #contactForm .btn-default:hover, #contactForm .contact-form-button-submit:focus, #contactForm .contact-form-button-submit:hover { background-color: #C51162; border: 1px solid #be403a; color: #fff } .contact-form-error-message-with-border, .contact-form-success-message-with-border { background: #fff; border: 1px solid #ddd; bottom: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); color: #666; font-size: 16px; font-weight: 400; line-height: 30px; opacity: 1; position: static; text-align: center; margin: 20px 0 0 } .contact-form-cross { height: 11px; margin: 0 5px; vertical-align: 0!important; width: 11px; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -goog-ms-box-shadow: none!important; box-shadow: none!important } .contact_layout { text-align: center; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .8); z-index: 99999 } .contact_message { width: 50%; background: #fff; border-radius: 5px; padding: 20px; border: 1px solid transparent; text-align: center; color: #333; position: absolute; top: 10%; left: 50%; margin-left: -25%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .fa.fa-pull-left,.fa.pull-left{margin-right:.3em}.fa,.fa-stack{display:inline-block}.fa-fw,.fa-li{text-align:center}@font-face{font-family:FontAwesome;src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.eot?v=4.6.0);src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.eot?#iefix&v=4.6.0) format('embedded-opentype'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff2?v=4.6.0) format('woff2'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff?v=4.6.0) format('woff'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.ttf?v=4.6.0) format('truetype'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.svg?v=4.6.0#fontawesomeregular) format('svg');font-weight:400;font-style:normal}.fa{font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa.fa-pull-right,.fa.pull-right{margin-left:.3em}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right,.pull-right{float:right}.pull-left{float:left}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{filter:none}.fa-stack{position:relative;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff} .contact_message:before { content: "\f164"; font-family: FontAwesome; font-weight: 500; font-size: 30px; display: block; margin-bottom: 10px; } @media screen and (max-width:768px) { .contact_message { width: 90%!important; margin-left: -45%!important; } .contact-form-box { width: 100%; } } /*]]>*/ </style> <div class="contact-form-box"> <div>Veuillez remplir le formulaire ci-dessous pour contacter l'administrateur du blog. </div> <br/> <form name="contact-form" id="contactForm"> <div class="floating-label-form-group"> <label>Name</label> <input type="text" class="form-control" placeholder="Name" id="ContactForm1_contact-form-name" name="name" value="" /> </div> <div class="floating-label-form-group"> <label>Email Address</label> <input type="text" class="form-control" placeholder="Email Address" id="ContactForm1_contact-form-email" name="email" value="" /> </div> <div class="floating-label-form-group"> <label>Message</label> <textarea rows="5" class="form-control" name="email-message" placeholder="Message" id="ContactForm1_contact-form-email-message"></textarea> </div> <input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" value="Send" /> <div class="clear"></div> <div style="max-width: 100%; text-align: left; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> <script src='https://code.jquery.com/jquery-1.12.4.min.js' type='text/javascript'></script> <script> $(function() { $("body").on("input propertychange", ".floating-label-form-group", function(e) { $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val()); }).on("focus", ".floating-label-form-group", function() { $(this).addClass("floating-label-form-group-with-focus"); }).on("blur", ".floating-label-form-group", function() { $(this).removeClass("floating-label-form-group-with-focus"); }); }); </script> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '3772129406538546599';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3772129406538546599','//kompitext.blogspot.com/','3772129406538546599'); _WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'><div class='contact_message'><b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div></div><br/>", "contactFormMessageNotSentMsg": "Message could not be sent. Please try again later.", "contactFormInvalidEmailMsg": "A valid email address is required.", "contactFormEmptyMessageMsg": "Message field cannot be empty.", "title": "Contact Form", "blogId": "3772129406538546599", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull")); </script>