Code Tạo Form Liên Hệ đẹp Cho Blogspot - NTLRUBY

<div class="khung" style="font-family:Arial, sans-serif;">

<!--phần thông tin liên hệ-->

<div class="trai">

<div><h3><span style="font-size: medium;"><i aria-hidden="true" class="fa fa-address-card" style="color: #0084ff; margin: 0px 5px;"></i> Thông tin liên hệ:</span></h3></div>

<hr size="1" style="margin:0 auto;" width="90%"/>

<div style="text-align: center; line-height: 130%;">

<span style="font-size: 30px;"><i class="fa fa-phone" aria-hidden="true" style="color: #ca0000; margin:7px 0;"></i></span><br /><span style="font-size: 16px"><b>Hotline:</b><br /></span><span style="font-size: 16px;">0123.456.789</span><br /><br />

<span style="font-size: 30px"><i class="fa fa-location-arrow" aria-hidden="true" style="color: #ca0000;"></i></span><br /><span style="font-size: 16px"><b>Địa chỉ:</b><br /></span><span style="font-size: 16px;">72/84 Huỳnh Văn Nghệ<br />

Phường 15, Quận Tân Bình, Tp.HCM</span><br /><br />

<span style="font-size: 30px"><i class="fa fa-envelope-o" aria-hidden="true" style="color: #ca0000;"></i></span><br /><span style="font-size: 16px"><b>Email:</b><br /></span><span style="font-size: 16px;">[email protected]</span><br /><br />

<hr size="1" style="margin:0 auto;" width="90%"/>

<a href="https://twitter.com/NTLRUBY" target="_blank" title="Twitter"><i aria-hidden="true" class="fa fa-twitter" style="color: #0084ff;margin: 7px 10px;"></i></a>

<a href="https://www.facebook.com/NTLRUBYfanpage/" target="_blank" title="Facebook"><i aria-hidden="true" class="fa fa-facebook" style="color: #0084ff;margin: 7px 10px;"></i></a>

<a href="https://www.youtube.com/channel/UCvcqxn_1UdkU0cHHvaQJZ3w" target="_blank" title="Youtube"><i aria-hidden="true" class="fa fa-youtube" style="color: #0084ff;margin: 7px 10px;"></i></a>

</div>

</div>

<!--Form biểu mẫu liên hệ-->

<div class="phai">

<div class="contact-form-box">

<form name="contact-form">

<input class="effect-6" id="ContactForm1_contact-form-name" name="name" placeholder="&#xf007; Tên đầy đủ của bạn (*)" required="" size="30" type="text" value="" style="font-family:'Helvetica', FontAwesome, sans-serif, Arial, FontAwesome"/><br />

<input class="effect-6" id="ContactForm1_contact-form-email" name="email" placeholder="&#9993; Email (*)" required="" size="30" type="text" value="" style="font-family:FontAwesome"/><br />

<textarea class="effect-6" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="&#9998; Nội dung liên hệ" required="" rows="5"></textarea><br />

<input class="submit" id="ContactForm1_contact-form-submit" required="" type="submit" value="Gửi" />

<input class="reset" type="reset" id="ContactForm1_contact-form-reset" value="Hủy" />

<div style="max-width: 222px; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

<script type="text/javascript">

//<![CDATA[

if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');

//]]>

</script>

<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'] = '7352238635556498134';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7352238635556498134','www.ntlruby.com/','7352238635556498134'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Đang gửi...', 'contactFormMessageSentMsg': 'Tin nhắn của bạn đã được gửi.', 'contactFormMessageNotSentMsg': 'Không thể gửi tin nhắn. Vui lòng thử lại sau.', 'contactFormInvalidEmailMsg': 'Cần nhập địa chỉ email hợp lệ.', 'contactFormEmptyMessageMsg': 'Trường tin nhắn không được để trống.', 'title': 'Contact Form', 'blogId': '7352238635556498134', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>

</div>

</div>

<style>

.khung {

margin:0 auto;

max-width: 900px;

border: #e5e5e5 2px SOLID;

box-shadow: 0px 7px 15px 0px rgb(0 0 0 / 40%);

}

.phai {

margin: 2% 0;

}

.trai {

height: 407px;

border: #e5e5e5 2px SOLID;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNhrsG3ni-jgjd045rhfUUvxErXI3PpXNJRL04OMKB8kkjuo-LCrn0kQVrbs620GCjjh6vWDwT00Q0yNbt2xzDhyphenhyphenKATIeFhM0OuYWDUzTmZkoDg6nH7Yyl7SAY5_Yb8TLDpJBgbIs0Pco/s1200/hinh-nen-mau-xanh-dep-nhat-25.jpg)no-repeat center;}

@media only screen and (max-width: 480px){

.khung{height: 810px;}

.phai{width:100%;}

.trai{width:100%;}

}

@media only screen and (min-width: 481px){

.khung {height:410px;}

.trai{float: left;width:35%;}

.phai{float: right;width:55%;}

}

.contact-form-box{float: left; width:92%;margin:20px auto;padding:0;}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 100%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none}

#ContactForm1_contact-form-email-message{width: 100%;height: 100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}

#ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 0px 5px;cursor: pointer;background-color:#4d90fe;box-shadow: 0px 4px 0px 0px #0f53c0;border:1px solid #357ae8;border-radius:3px;text-shadow:0px 1px 0px #00317f;position: relative;left: 37%;} #ContactForm1_contact-form-submit:hover {background-color:#357ae8;}

#ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #0f53c0;}

#ContactForm1_contact-form-submit:focus{outline:none}

#ContactForm1_contact-form-reset {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 0px 5px;cursor: pointer;background-color:#fe4d4d;box-shadow: 0px 4px 0px 0px #c00f0f;border:1px solid #e83535;border-radius:3px;text-shadow:0px 1px 0px #7f0000;position: relative;left: 37%;} #ContactForm1_contact-form-reset:hover {background-color:#d12020;}

#ContactForm1_contact-form-reset:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #0f53c0;}

.submit {float: left;position: relative;left: 39%;}

.reset {float: left;position: relative;left: 41%;}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;text-align:left}

@media screen and (max-width: 768px){ .contact-form-box{width:100%;}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;}

}

@media screen and (max-width: 480px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;}

}

</style>