Lên đầu trang
Xuống cuối trang

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é!

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)

<!-- //[thu thuat blog] Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger
https://choiblogs.blogspot.com/2018/11/tao-bieu-mau-lien-he-contact-form-cho.html
-->
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

<b:if cond='data:blog.pageType == "archive"'>
Đoạn code chung
</b:if>

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!

<style>
<!--/*[thu thuat blog] Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger
https://choiblogs.blogspot.com/2018/11/tao-bieu-mau-lien-he-contact-form-cho.html
*/-->
#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/AVvXsEjznv0d8WQVHToR6mGqgBMdCKEnYvim4QeBUtlVlp52A_1WBFUS-APVauRcCeFQopSoBVEdQN_7_mSJELjIWI6jD-kYGaj6r4dYPOVyelZfsJpY7NhS3c1RDoaem4P7S6Pw9uWy3BZ0I6M/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/AVvXsEjOspEO7fJgb2wtCfKPrcXrdscbK2WECy9Q_RvgntqOHYGqE2YLV7pWIstS8pocSeIhJ669ZbuhIOtdiP0EzvO5a2SujuKpR3BXnfUIRl_alwDF-O0B-gIE71j4idXdY2IkOo_JreGiunQ/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/AVvXsEinekLrTpssTSqr1KG2sic9V2zXq42c4Sxn_M9_16jZpc-aGltoUZrHjdZSwUqg8oJ3bx9obymovi_2rcanvzzm6_Mg0gT5pZqKKLGAvKrYuu1DskPk4FfYMgi_3CVkBHzmebN-6xk2fqc/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;
}
</style>

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!

<!--/*[thu thuat blog] Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger
https://choiblogs.blogspot.com/2018/11/tao-bieu-mau-lien-he-contact-form-cho.html
*/-->
<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 ]]> và chèn đoạn mã CSS sau đây ở trên ]]>. Sau đó Lưu lại là xong!



<style>
<!--/*[thu thuat blog] Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger
https://choiblogs.blogspot.com/2018/11/tao-bieu-mau-lien-he-contact-form-cho.html
*/-->
/* 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 */
<style>

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!



<!--/*[thu thuat blog] Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger
https://choiblogs.blogspot.com/2018/11/tao-bieu-mau-lien-he-contact-form-cho.html
*/-->
<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).

DOWNLOAD:

Phòng khi link của tài khoản tạo ra hướng dẫn die ! hoặc bị hack!
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOg5Vm7cbT38QIZoSnEPnB2ro4bmMpIOiBQth3rPlPf0YD_-koYNiVJrmvwSPHoS7ngLa2iWmJ7XdrRYRSsXt12bu5PBDMmvZ5TClpU3QErZ6nKiSf6J2Kuo9-XTOMnMTOEyNtEGmbBNI/s1600/msg2.png
,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY6LxTj_eoTovyyXJ5Lp03aGONJVEzWjGsuY-x4IUDz4HhiOyeZPFu7rpW2CXJqG_wjVMkNkSa6PLHLPBPI7Bwb6r9wmf5vzwebBIFNgyUOwNDYEoNRQpqTc9uu7DiMrAWAWwiMaLYNzU/s1600/pen.png
,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy96m41oz9rL39_tJkWYrneyus-Ed4jdALnXpr5cDKQOuV1OhqXSktqgZLH_-NnpL898R_ZZEb1soAz7cX1wsXLxbG5wxNeDDTt5K89MVgS-qbauaaLv5j8s-62GAX3GRfNzNJch8KLpk/s1600/user.png

NGUỒN:
https://www.windows2it.com/2015/07/tao-bieu-mau-lien-he-contact-form-cho-blogspot-blogger.html

Posted by Dung-Tran-Design Thứ Ba, 6 tháng 11, 2018

0 comments

Đăng nhận xét

_ Khi nhận xét không phải xác minh từ.
_ Bạn nhận xét xong sẽ được quản lý duyệt.
_ Spam link vào nhận xét xem như bạn đã chưa nhận xét !
_ Ghé thăm tôi vào những lúc bạn vui hoặc buồn và khi cần hổ trợ gì đó !
_ Khi bài viết nào có lỗi: xin vui lòng góp ý chân thành! cảm ơn!!!

Nhãn Đám Mây

Software (755) Video (582) Video-Fun (227) Thủ Thuật Blog (211) System tools (184) Hài Kịch (182) Video-Pro (179) Pictures-Fun (161) Tin gì (156) Tin gì ? (154) THỦ THUẬT INTETNET (136) Wallpaper (123) Pictures-Girl Xinh (117) Gift of life (110) Internet Tools (105) Games (75) Template PTS (67) Skin-Gaw2 (66) Giải Trí (65) Others (60) Video-Shock (58) Thủ Thuật Máy Tính (48) Design Tools (46) Download Tools (43) Music (43) CSS ChoiBlogs (41) Anti-Virus (39) Sức Khoẻ (32) Kỹ Năng Sống (30) MultiMedia (28) Video-Tools (28) Cosplay (25) USB Tools (24) Browsers (22) Desktop (22) PDF Tools (22) Phim (22) Rar-Zip-Tool (22) Video-Animals (21) Burning- Convert (19) Thơ và Nhạc (19) Drivers (18) Hoài Linh (18) Media Player (18) Pictures-Pro (18) Rao Bán (18) Registry Tool (18) Thủ Thuật Yahoo (18) Khóa Thư Mục-WebĐen-EXE (15) Virus (15) Add or Remove Programs (14) Thơ (14) Video-SHOW (14) Phong Lee (13) Game-Web (12) Video-Tài Liệu (12) Hide-IP Tools (11) List Xem Nhanh ChoiBlogs (11) Photos -pictures tools (11) Video-Thể Thao (11) Free Licence (10) Office Tools (10) Task Manager Tool (10) Thủ Thuật Facebook (10) Thủ Thuật Photoshop (10) Thủ Thuật Youtube (10) Vietnam's Got Talent (10) WiFi Tools (10) -Cổ tích Việt Nam- (9) DVD-Tools (9) HDD Tool (9) Thủ Thuật Android (Thiết Bị Di Động) (9) Video- Sao Nối Ngôi (9) Video-Bình Tinh (9) Video-Music (9) Video-VÕ HẠ TRÂM (9) Video-Thời Sự (8) Video-Thủ Thuật Đời Sống (8) Defrag tools (7) Flash Tools (7) HTML Tool (7) Hacker Tool (7) MP3 Tools (7) Thuý Nga (7) Từ Khóa Google (7) Icon Tools (6) Kiếm Tiền Online (6) Music-Girl Xinh (6) Tình Yêu (6) Video-Gương Mặt Thân Quen 2016 (6) Chí Tài (5) Game Flash (5) Game Tools (5) Góc nhìn (5) Mobile Tools (5) Nguyen Thi Anh Vien (5) Translate Tools (5) Webcam Tool (5) skin-blog (5) Firewalls (4) Game-mini (4) Screensaver Tools (4) Video-Cờ Cá Ngựa (4) Video-Kim Tử Long (4) Video-Thể Hình (4) Font View (3) Templates (3) Windows 7 (3) Windows Tools (3) Actions PTS (2) Audio tools (2) Editing tools (2) Event-Online (2) Font (2) Game-DOWNLOAD (2) Game-MU Đại Thiên Sứ (2) Ghost WINDOWN (2) Host Free (2) Infographic (2) Keylogger Tools (2) Nghệ Sĩ Minh Béo (2) Nhật Cường (2) PTS Brush (2) PTS Style (2) Sống Đẹp (2) Video-Game (2) Video-Quân Sự (2) Đạo Đời (2) CPU-Tools (1) Camera (1) Camera giao thông (1) Chính Sách Mới - Pháp Luật (1) Coppy Tools (1) Công Nghệ (1) Cảnh Giác (1) Dương Thúy Vi-Wuhsu (1) File Hệ Thống (1) Files Manager (1) Game-Gaw2 (1) Ghost XP (1) Hack Blog (1) Hệ Điều Hành (1) Icon Cảm Xúc (1) Iphone-Tools (1) Khám Phá (1) Music- Pic-Pro (1) PDS PhoToShop (1) Phần Cứng (1) Portable (1) Soft-Test (1) Soft-Việt Hóa (1) Sách Nói (1) TIVI Online (1) Thủ Thuật - Proshow Producer (1) Thủ Thuật Mobile (1) Thủ Thuật-Cốc Cốc (1) Thủ Thuật Di Động (1) Thủ Thuật FireFox (1) Thủ Thuật Phần Cứng (1) Thủ Thuật office (1) Thủ Thuật Điện (1) Thủ Thuật Đời Sống (1) Tin-Bảo Mật (1) Tình Yêu và Cuộc Sống (1) Tiện Ích FireFox (1) Tiện Ích Mouse (1) Tuyển THành Viên (1) Tài Liệu - Biểu Mẫu (1) Tình Yêu Giới Tính (1) Tự Kỷ (1) Video Tools (1) Video-Công Nghệ (1) Video-Cảnh Giác (1) Video-Giao Thông (1) Video-Hướng Dẫn Làm (1) Video-Movie (1) Video-NSƯT Bạch Long (1) Video-Sáng Tạo (1) Video-Thủ Thuật - Proshow Producer (1) Video-Vietnam's Got Talent 2014 (1) Video-Đời Sống (1) Video-Ơn Trời Cậu Đây Rồi (1) Yahoo Chat (1) [Danh Sách] Karaoke MrChoiBlog (Karaoke-Beat-Chuẩn) (1)

Đăng ký nhận bài viết mới

Bài đăng phổ biến

New Commets