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

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

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.

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

Bài viết: Hướng dẫn chèn Contact Form vào bài viết và trang được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog Contact-Form