<style> /*<![CDATA[*/ .contact-form-box { width: 100%; margin: 20px auto; padding: 0 } #contactForm .floating-label-form-group { font-size: 14px; 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: #e8554e; 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: 14px; font-family: Roboto, Arial, 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-family: Roboto, Arial, sans-serif; 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: #e8554e } #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: Roboto, Arial, 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: #e8554e; 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:9999; } .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; } .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%; } } #comments,#PopularPosts1{display:none} /*]]>*/ </style> <div class="contact-form-box"> <div>Please fill out the form below to contact the admin. </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'] = '452853007175037660';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d452853007175037660','/','452853007175037660'); _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/>If there is no activity, the admin will immediately respond to the message you sent.</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": "8507819845288934135", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull")); </script>