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)
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>
Chúc các bạn thành công.
Bài viết sưu tầm từ nhiều nguồn trên mạng, hy vọng nó sang mang đến thông tin hữu ích cho bạn. Chúc các bạn vui vẽ ngày mới!
ConversionConversion EmoticonEmoticon