Biểu
mẫu liên hệ/ Contact Form được tạo ra mặc định thường nằm ở cột Sitebar hoặc là
Footer, đó là đều bất tiện trong việc bố trí giao diện đặc biệt hơn nó không thể
hiện tính chuyên nghiệp của một blogger.
Hôm
nay windows2it sẽ giới thiệu cho bạn một vài biểu mẫu đẹp để cho bạn lựa chọn. Đây
là một tiện ích thủ thuật blog cực kỳ hay, tạo sự chuyên nghiệp cho blog của bạn
ngay từ cái nhìn đầu tiên. Bắt đầu thực hiện đi nhé!
Đọc thêm:
● Thêm nút Share trượt dọc cho Blogspot Pro Vesrion 2
● Thêm Pop Out Chat Box (Cbox) cho Blogspot (Blogger)
● Tạo Sitemap (sơ đồ) cho Blogspot theo phong cách chuyên nghiệp
Đọc thêm:
● Thêm nút Share trượt dọc cho Blogspot Pro Vesrion 2
● Thêm Pop Out Chat Box (Cbox) cho Blogspot (Blogger)
● Tạo Sitemap (sơ đồ) cho Blogspot theo phong cách chuyên nghiệp
Tạo
ra một biểu mẫu liên hệ/ Contact Form điều trải qua một bước chung:
Bước
1: Blog => Bố cục => Thêm tiện ích
=> Tiện ích khác => Biểu mẫu liên hệ => Lưu lại
Bước
2: Tới Mẫu => Chỉnh sửa HTML => Tìn
tới id=‘ContactForm1’, bấm vào dấu … mở rộng hết ra và xóa các phần mình đã
bôi đỏ đi. (Bước này thực hiện nhằm xóa bỏ Biểu
mẫu liên hệ mặc định của blogger tạo ra)
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Bước
riêng cho từng biểu mẫu
Biểu
mẫu 1:
Bước 3.1: Đầu tiên bạn cần vào Blog => Mẫu = > Chỉnh sữa HTML.
Nhấn tổ hợp Ctrl + F và tìm kiếm ]]></b:skin> và chèn đoạn mã
CSS sau đây ở trên ]]></b:skin>.
Sau đó Lưu lại là xong!
#ContactForm1{ display:none; } #contact_wrap { margin: auto; width: 321px; height: 380px; padding: 25px; border-radius: 1em; border-top:1px solid #dbdbdb; border-right:1px solid #b2b2b2; border-left:1px solid #dbdbdb; border-bottom:1px solid #9d9d9d; background-color:#cccccc; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc'); background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); box-shadow: 1px 1px 5px #ccc; } #contact_wrap h3{ color: #e8f3f9; font-family:Georgia; font-size: 20px; font-style:italic; font-weight:bold; margin: 0 -36px 20px -36px; padding: 12px; text-align: center; text-shadow: 2px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #3689b9; position: relative; } #contact_wrap h3:before { content: ' '; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #333 transparent transparent transparent; } #contact_wrap h3:after { content: ' '; position: absolute; bottom: -10px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #333; } #ContactForm1_contact-form-name{ width: 270px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_BpUcCeXnyKx1aXxrp_nWG1oUaMSuFwVymglLj3hoWlMu28LnW5RCWVxSx9cERlNE0aEnnefETvPNjj7AviGymjuPosJTDersCpuC1SMpwWiapuUQceKR4lsd6uFq5T-_L9wZAXX8Zc/s1600/user.png)no-repeat 10px center; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-email{ width: 270px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg6Hft3outtqUYvPoUHtsLPfRpNf5XyZHhyphenhyphensj1C_EE7zzw4NziLkHJ9mVoA85stFFTpFp0LB9er6k7issbZ-CfPXt-EaThm9UcFcIzcJdpvwJ9-1Eihu-4ba0_ww_qU90vuf8rdEXNV2k/s1600/pen.png)no-repeat 10px center; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-email-message{ width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; font-family:Arial, sans-serif; background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG1kSSdvWsDjQ5xV8Ev172maS7WYwlMAlLPpp9U1XtR0zfTiQYEGlw09_PQ9h0zbYUV3aeqAToNIscoCKAhKTYiOKuS14SWPstxvB6fqlLbfYWPPcahUoUGEDVuYWCnh-JdQlfbgOyzh8/s1600/msg2.png)no-repeat 10px 10px; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #FFF; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#005a8a; border-radius:4px; text-shadow: 1px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #3689b9; border:1px solid #194f6d; } #ContactForm1_contact-form-submit:hover { background:#4c9bc9; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 320px; margin-top:35px; }
Bước
3.2: Bạn muốn tạo Biểu mẫu liên hệ/ Contact Form tại một trang cố định.
Blog => Trang =>
Trang mới => HTML => Và copy đoạn mã code dưới đây vào trong HTML =>
Xuất bản!
<div id="contact_wrap"> <h3>Contact Us</h3> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <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> <style type="text/css"> #comments, #blog-pager, .breadcrumbs, .post-footer{display:none} </style>
Biểu
mẫu 2:
Bước
4.1: Bạn cũng vào Blog => Mẫu = >
Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F
và tìm kiếm ]]></b:skin> và
chèn đoạn mã CSS sau đây ở trên ]]></b:skin>.
Sau đó Lưu lại là xong!
/* CUSTOM CONTACT FORM BY XOMISSE */ .contact-form-widget { width: 500px; /* CHANGE WIDTH OF CONTAINER */ max-width: 100%; padding: 10px; background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */ color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */ border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */ margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */ } .contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ } .contact-form-button-submit { border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */ background: #EEEEEE; /* CHANGE BACKGROUND COLOR OF SEND BUTTON */ color: #333333; /* CHANGE TEXT COLOR OF SEND BUTTON */ width: 30%; /* CHANGE WIDTH OF SEND BUTTON */ margin: 10px 0px; } .contact-form-button-submit:hover{ border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */ background: #666666; /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */ color: #FFFFFF; /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */ } .contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */} .contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */} .contact-form-cross {margin-left: 5px !important;} .contact-form-error-message-with-border { background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */ border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */ bottom: 0; box-shadow: none; color: #666; /* CHANGE TEXT COLOR OF ERROR MSG */ font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */ padding: 5px; font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */ text-align: center; } /* END CUSTOM CONTACT FORM BY XOMISSE */
Bước
4.2: Cũng làm tượng tự Blog => Trang
=> Trang mới => HTML => Và copy đoạn mã code dưới đây vào trong HTML =>
Xuất bản!
<div id='ContactForm1' class='widget ContactForm'> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p>Name:</p> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <p>E-mail: <span id="required">*</span></p> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <p>Message: <span id="required">*</span></p> <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </form> </div> </div> </div>
Kết
luận:
-
Biểu mẫu trong Blog chỉ chứa 3 mục Tên,
Địa chỉ email liên hệ và Nội dung, có một số bạn lại thêm Tiêu đề hay Số điện thoại
liên các mục này sẽ không gửi đi được đâu thêm vô cũng bằng thừa trừ khi bạn
có Hosting riêng.
-
Các Biểu mẫu liên hệ trên đều có đoạn
CSS riêng nên bạn có thể sửa đổi theo ý muốn của bạn (sẽ không ảnh hưởng CSS
trong template của bạn).
-
Nếu bạn không hiểu vấn đề gì hãy để lại comment bên dưới để windows2it kịp thời
giải đáp cho bạn.
VD gmail mình là : [email protected] là Quản trị viên BLog này khi bạn gửi biểu mẫu cho mình thì tin nhắn đó sẽ gửi về Gmail [email protected] nằm ở mục Xã Hội nha bạn ,,,
Nếu muốn nhiều thông tin hơn thì có thể sử dụng Google Form tự tạo ra rồi nhúng vào blog của bạn. hoặc bạn phải dùng Hosting riêng nha bạn @!
Dt: 0938 084 339. Email:[email protected]. wedsite: vualand.com
http://daomongtan.blogspot.com/p/contact.html
Cám ơn bạn nhiều!!
Mình cũng đã thực hiện biểu mẫu này trên trang 123tailieufree.com có hoạt động rất tốt mà có sao đâu
hjx
Như vậy là sao ạ?
Mà em muốn nó xuất hiện ở trang chủ luôn ấy http://vochihieubl.blogspot.com/
-- Bạn có thể thực hiện thủ thuật này có cột sitebar or Footer thì nó sẽ xuất hiện ngoài ra chủ như ý bạn.
>>> Mà thường mục liên hệ người ta thường để ở 1 trang độc lập ít ai để ra ngoài trang chủ hết.
Chúc anh sức khỏe, đạt được tất cả những gì mình muốn trong năm nay.
- Cái template BMAG này có đã thiết kế luôn biểu mẫu liên hệ rất đẹp sao bạn ko dùng mà phải làm cái khác vậy ?? http://www.upsieutoc.com/image/5J5X
http://vuonsukhanhhoa.blogspot.com
Xin cảm ơn trước ạ.
Mình làm lại và được rồi. Cám ơn bạn nhiều nhé.
Cho mình xin code của đồng hồ và lịch âm dương, nếu có, bạn nhé.
Xin cám ơn trước.
Blog của mình: http://www.nhuygialai.com
Trước đây xài contact form bằng google driver chạy tốt, gần đây phát hiện không nhận được mail
Chuyển sang dùng mặc định ( Blog => Bố cục => Thêm tiện ích => Tiện ích khác => Biểu mẫu liên hệ => Lưu ) nó cứ ì ra, không gởi được mail ( có tùy biến hay không cũng vây)
Chẳng biết bị lỗi gì. Nhờ bạn xem giúp tý
Rất cám ơn
Em thấy trang liên hệ có đuôi như sau "p/blog-page.html"
Vậy em muốn chuyển đuôi "p/blog-page.html" sang "lien-he.html" được không ạ?
Và làm như thế nào ạ?
Em xin cảm ơn!
trang của em sau khi trỏ tên miền đến link trang chủ không được rút gọn mà thêm đuôi như sau
http://www.thanhthaihadimed.com.vn/?zx=8f732ee4d9908ba2
Vậy có cách nào bỏ được cái đuôi /?zx=8f732ee4d9908ba2 không ạ?
Em xin cám ơn ạ.
Mình làm thấy form OK rồi. Gửi thử thì thông báo thư đã được gửi đi nhưng không thấy có thư báo về trong hộp thư của mình. Bạn có thể xem giúp mình xem tại sao được không? Mình đã mời bạn tham gia quản trị rồi đó [email protected]
Xin cảm ơn trước
http://demotest1999.blogspot.com/p/lien-he-voi-chung-toi.html
http://chungcudoji.blogspot.com/2017/09/contact-us-comments-blog-pager.html
Xem demo bảng báo giá của mình nè: bảng báo giá mẫu
Với nhiều năm kinh nghiệm trong lĩnh vực in ấn, là địa chỉ có uy tín tại Hà Nội. Công ty In Long Gia luôn đẩy mạnh phát triển dịch vụ in ấn nhất là mảng sản xuất in hộp cứng cao cấp.
Đến với chúng tôi khách hàng sẽ được hỗ trợ tư vấn và thiết kế hoàn toàn miễn phí. Với mục tiêu thỏa mãn mọi nhu cầu của khách hàng. In Long Gia luôn mang đến cho khách hàng những sản phẩm vỏ hộp bìa cứng sang trọng và đẹp mắt nhất.
Là xưởng sản xuất trực tiếp không qua trung gian , sử dụng công nghệ máy móc in ấn hiện đại. Giúp bạn tiết kiệm đến 30% chi phí nhưng vẫn đảm bảo chất lượng.
Với nhiều năm kinh nghiệm trong lĩnh vực in ấn, là địa chỉ có uy tín tại Hà Nội. Công ty In Long Gia luôn đẩy mạnh phát triển dịch vụ in ấn nhất là mảng sản xuất in hộp cứng cao cấp.
Đến với chúng tôi khách hàng sẽ được hỗ trợ tư vấn và thiết kế hoàn toàn miễn phí. Với mục tiêu thỏa mãn mọi nhu cầu của khách hàng. In Long Gia luôn mang đến cho khách hàng những sản phẩm vỏ hộp bìa cứng sang trọng và đẹp mắt nhất.
Là xưởng sản xuất trực tiếp không qua trung gian , sử dụng công nghệ máy móc in ấn hiện đại. Giúp bạn tiết kiệm đến 30% chi phí nhưng vẫn đảm bảo chất lượng.
Đăng nhận xét