Biểu mẫu liên hệ đẹp cho Blogspot (Blogger)

Hôm nay mình sẽ chia sẻ cho các bạn tạo biểu mẫu liên hệ đẹp cho Blogspot để cho bạn tạo trang liên hệ cho Blog bạn.

Biểu mẫu liên hệ đẹp cho Blogspot (Blogger)

<form name="contact-form"><span style="color: white; font-size: 1.2em;"><i class="fa fa-check-square-o"></i> Name </span><br>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="">  <br>
<br>
<span style="color: white; font-size: 1.2em;"><i class="fa fa-envelope-o"></i> Email Address <span style="color: #ffff99; font-size: x-small; font-weight: bold;">important</span></span> <br>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">  <br>
<br>
<span style="color: white; font-size: 1.2em;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #ffff99; font-size: x-small; font-weight: bold;">important</span></span><br>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message">  <br>
<div style="max-width: 100%; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br>
<style scoped="" type="text/css">
.breadcrumbs, .post_meta {display: none;}
form {background: #B32F60;padding: 9px;}
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:100%;height:auto;margin:10px auto;padding:12px;background:#fff;color:#444;border:1px solid transparent;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all .5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:140px;margin:10px 0;padding:12px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid transparent;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;}
#ContactForm1_contact-form-submit{width:100%;font-family:'Open Sans';float:left;background:#494158;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:15px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border:1px solid transparent;transition:all .6s ease}
#ContactForm1_contact-form-submit:hover {color:#fff;background:#584f69;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:rgba(255,255,255,0.2);border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:rgba(255,255,255,0.2);border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
@media screen and (max-width:640px){
#outer-wrapper {margin:0 20px;}}
</style>  <script type="text/javascript">
//<![CDATA[
var submit = document.getElementById('ContactForm1_contact-form-submit');
submit.addEventListener("click", function () {
    var email = document.getElementById('ContactForm1_contact-form-email').value,
        filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email)) {
        alert('Please enter a valid email!');
    }
}, !1)
//]]>
</script>

Nguồn code: thucle.net/2016/08/chia-se-mau-trang-lien-he-ep-mat-cho.html
Chúc các bạn thành công.

Có lẽ bạn thích?