Tạo Biểu Mẫu Liên Hệ Cực Đẹp Cho Blogspot

Xin chào các bạn, hôm nay mình xin hướng dẫn các bạn tạo biểu mẫu liên hệ cực đẹp cho blogspot. Không dài dòng nữa, chúng ta cùng bắt đầu thôi! 😉


CÁC BƯỚC THỰC HIỆN

Bước 1: Các bạn đăng nhập Blogger Trang Trang mới.
Bước 2: Đặt tên cho trang đó theo ý thích của bạn. (Ví dụ: Biểu mẫu liên hệ, Contact Form, liên hệ Admin,...)
Bước 3: Các bạn dán đoạn code này vào trang các bạn vừa mới tạo.
<form name="contact-form">
Name<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
Email Address <span class="wajib">*</span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
Nội dung <span class="wajib">*</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="GỬI NGAY CHO ADMIN!" /><br />
<div class="formb">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<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'] = '1577355985338976579';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1577355985338976579','//thaitinh-it.tk/','1577355985338976579');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '1577355985338976579', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<style type="text/css">
#ContactForm1{display:none}a.showcontent{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color: rgba(81,203,238,1);box-shadow: 0 0 5px rgba(81,203,238,0.7)!important;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {font-family:Open Sans Condensed, sans-serif;float:left;border-radius:3px;
background:#07ACEC;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;
padding:5px 10px!important;font-weight:700;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover {background:#444;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}.formb{max-width:22px;text-align:center;width:100%}.wajib{color:red;font-weight:bold}
</style>
Bước 4: Lưu lại và hưởng thụ thành quả thôi :))

LỜI KẾT

Bên trên là các bước để tạo biểu mẫu liên hệ cực đẹp cho blogspot rồi. Nếu thấy bài viết bổ ích đừng quên cho mình 1 share & 1 comment nhé. Nếu bạn nào không làm được thì đừng ngần ngại comment xuống phía dưới để mình hỗ trợ nha. Chúc các bạn thành công và đừng quên truy cập Blog để xem thêm nhiều bài viết hay hơn nữa nhé! 😊😋😆
Tác giả bài viết: Tính Getter
Thời gian đăng bài: Chủ Nhật, 19 tháng 11, 2017
Tổng số bình luận: 49

49 nhận xét:

  1. Trả lời
    1. Vừa xuất bản đã có người vào rồi, ghê nhỉ :v

      Xóa
  2. vch sao nhé lk NgLDuy xuống dưới v đang ở trên cơ mà .@

    Trả lờiXóa
    Trả lời
    1. Có thể sắp xếp lại liên kết nên em đã để nhầm, để em đặt lại cho.

      Xóa
    2. Đã đặt lại cho anh nhé :D Thật sự xin lỗi anh vì sự bất tiện này.

      Xóa
  3. Trả lời
    1. Ẹc, máy em vẫn bình thường :v Chắc do máy tính không có Roboto Condensed, đó là font em cài cho thanh sticky menu, với lại đó là font đặc biệt nên máy của anh không có nên bị lỗi font thôi :3

      Xóa
    2. templ chưa cài font Roboto Condensed mà chỉ chèn style='font-family:Roboto Condensed' thì nó k hiện đâu :v

      Xóa
    3. máy thì liên quan gì đến web đâu trời :v

      Xóa
    4. Tahoma, Arial và Roboto là 3 font cấu tạo nên một chiếc máy tính mặc định hoàn hảo nhất. Nếu bạn xóa 1 trong 3 font thì nó sẽ ảnh hưởng đến text chữ, và nó sẽ hiện ra font Times New Roman nhé. Còn chuyện cài font Roboto Condensed thì cho mình hỏi nên chèn vào thẻ nào vậy bạn ? Chứ mình dùng dạng Specify in CSS nên ko rõ lắm. :3

      Xóa
    5. Mình đã sửa lại rồi nhé! Thành thật xin lỗi vì sự bất tiện này.

      Xóa
    6. mà dù có xóa font ở máy tính thì trên trang web cũng k ảnh hưởng gì hết
      nó là hai cái riêng biệt
      bạn hiểu chứ ???

      Xóa
    7. Chậc, mình nói là font mặc định mà :v Còn font khác xóa thỳ vẫn bình thường mà :3

      Xóa
    8. Máy của bác Huy có bị lỗi font trên Blog tui ko ?

      Xóa
    9. Tui sợ lỗi font nên đổi thành Roboto rồi :3 Mà chúc mừng bạn vì đã là người cmt thư 1100 trên Blog của tui nhé :v

      Xóa
  4. - Dù Bày Này Đã Có Nhiều Blog Share Rồi Nhưng Vẫn Thả Tim Ủng Hộ =)

    Trả lờiXóa
  5. Viết thủ thuật ko dám làm cái Demo xem thử nữa :)

    Trả lờiXóa
  6. . haha a k chơi blog nửa . xóa blog rr :v

    Trả lờiXóa
  7. Định cmt bảo cho a cái demo thì có r :v

    Trả lờiXóa
    Trả lời
    1. Do bác Niệm nhắc nên em mới thêm demo cho mọi người dễ hình dung hơn :v

      Xóa
  8. Trả lời
    1. Có phần Top Bình Luận bên sidebar trái đó anh :3

      Xóa
  9. Phần chào mừng mới vào blog nghe gì quá đấy e :3 Quen nhau trc k sao, ng lạ họ lại k ghé thăm lần tới giờ :3

    Trả lờiXóa
    Trả lời
    1. Thôi để em lấy chụy Google khác =)) Kẻo mất hết visitors nữa, good idea :3

      Xóa