Hướng dẫn chèn Contact Form vào bài viết và trang

Sau đây mình sẽ Hướng dẫn chèn Contact Form vào bài viết và trang trên blogspot của các bạn đang dùng, rất tiện trong việc tạo trang liên hệ mà không cần dùng tiện ích khác như biểu mẫu Google.

Hướng dẫn chèn Contact Form vào bài viết và trang

Các bước thực hiện để chèn Contact Form vào bài viết và trang cho blogspot như sau:

1. Thêm CSS nếu blogspot chưa có


<style>
input[type="text"]{border:solid 1px #77777724;width:100%;background:none;display:inline-block}
#hidden-widgets-wrap,.hidden-widgets{display:none;visibility:hidden}
.contact-form-widget form{font-family:inherit;font-weight:400}
.contact-form .contact-form-name{width:calc(50% - 5px)}
.contact-form-name{float:left;width:100%;height:36px;background-color:rgba(155,155,155,.05);font-family:inherit;font-size:14px;color:#65656a;line-height:36px;padding:5px 10px;margin:0 0 10px;border:1px solid rgb(155 155 155 / 12%);border-radius:5px}
.contact-form-email{float:left;width:100%;height:36px;background-color:rgba(155,155,155,.05);font-family:inherit;font-size:14px;color:#65656a;line-height:36px;padding:5px 10px;margin:0 0 10px;border:1px solid rgb(155 155 155 / .1);border-radius:5px}
.contact-form-email-message{float:left;width:100%;background-color:rgba(155,155,155,.05);font-family:inherit;font-size:14px;color:#65656a;padding:10px;margin:0 0 10px;border:1px solid rgb(155 155 155 / .1);border-radius:5px}
.contact-form-button-submit{float:left;width:100%;height:36px;background-color:#1087ff;font-family:inherit;font-size:14px;color:#fff;font-weight:400;cursor:pointer;padding:0 15px;margin:0;border:0}
.btn{position:relative;border:0;border-radius:5px}
.contact-form-widget p{margin:0;float:left}
</style>

2. Thêm HTML này trong chỉnh sửa HTML của giao diện

Bạn có thể thêm vào chỗ nào cũng được nếu cảm thấy vị trí đó phù hợp, vì đoạn HTML này sẽ ẩn. Đây chính là tiện ích liên hệ trong blog của bạn, bắt buộc phải có một tiện ích liên hệ trên trang blog của bạn thì phần liên hệ các bạn thêm vô nó mới hoạt động.


<b:if cond='data:view.isSingleItem'>
  <div id='hidden-widgets-wrap' style='display:none'>
    <b:section class='hidden-widgets' deleted='true' id='hidden-widgets' maxwidgets='2' showaddelement='no'>
      <b:widget id='ContactForm1' locked='true' title='Contact Form' type='ContactForm' version='2' visible='true'>
        <b:includable id='main' var='this'>
          <b:include name='widget-title' />
          <b:include name='content' />
        </b:includable>
        <b:includable id='content'>
          <b:include name='contact-form-content' />
        </b:includable>
      </b:widget>
    </b:section>
  </div>
</b:if>

3. Các bạn thêm HTML này vô trang hoặc bài viết làm phần liên hệ.


<div class="contact-form">
  <div class="widget ContactForm" data-version="2" id="ContactForm1">
    <div class="widget-title">
      <h3 class="title">Contact Form</h3>
    </div>
    <div class="widget-content contact-form-widget">
      <div class="form">
        <form name="contact-form">
          <input ariby="Name" class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="">
          <input ariby="Email *" class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="">
          <textarea ariby="Message *" class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
          <input class="contact-form-button btn contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send">
          <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>
</div>

Như vậy là bạn đã có một trang liên hệ Contact Form cho blog của bạn. Xem thêm nhiều thủ thuật blogspot hay nhất

Nhận xét

×