Mẫu form liên hệ cho Blogger



Blogger vừa bổ sung mẫu form liên hệ chính thức của riêng mình cho người dùng thông qua một tiện ích mới có tên gọi Biểu mẫu liên hệ (Contact form). Trước đây chúng ta đều phải sử dụng dịch vụ của một bên thứ ba. Nay thì mọi thứ đơn giản hơn, bạn có thể nhận tin nhắn từ người đọc ngay trong email mà không cần cung cấp địa chỉ email ra bên ngoài.

Để sử dụng form này bạn chỉ cần đăng nhập Blogger > Bố cục > Thêm tiện ích > Tiện ích khác > Biểu mẫu liên hệ (Xem lần lượt các hình 1, 2, 3)


Hình 1


Hình 2

Sau khi lưu lại, nhớ kéo và thả vào vị trí bạn muốn rồi chọn Lưu sắp xếp.

Hạn chế của mẫu form chỉ xuất hiện trên sidebar hoặc footer ở nơi mà bạn vừa lưu lúc nãy. Thông thường mẫu form liên hệ người ta đặt trong một trang riêng ở đó ghi các thông tin liên hệ và kèm mẫu form bên dưới.

Nếu muốn đặt nó vào phần trang của Blogger thì bạn làm theo gợi ý tiếp theo.

Bước 1. Giữ nguyên mẫu form liên hệ mà bạn vừa tạo lúc nãy.

Bước 2. Nhấn Mẫu > Chỉnh sửa HTML


Bước 3. Nhấp Chuyển đến tiện ích > ContactForm1 
Hình 4
Bước 4. Nhấp chuột vào mũi tên phía đầu dòng tiện ích có id='ContactForm1' như hình

Hình 5
Bước 5. Xóa hết đoạn code bên trong nó, như bạn nhìn thấy dưới đây, còn lại như hình 5 và sau đó Lưu mẫu.

<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'/>

Hình 7

Bước 6. Thêm trang mới. Nhấn Trang > Trang mới > Trang trống để tạo. Nếu bạn đã có trang liên hệ rồi thì không cần tạo nữa.


Bước 7. Chọn chế độ soạn HTML rồi dán đoạn code này vào chỗ viết bài, sửa lại một số tùy chọn và đặt tên bài viết rồi nhấn Xuất bản.

<form name="contact-form">
<p></p>
Name
<br>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text">
<p></p>
Email
<span style="font-weight: bolder;">*</span>
<br>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text">
<p></p>
Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<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>
</div>
</form>

Nếu cần thiết bạn có thể Việt hóa những chữ màu nổi bật: Name -> Tên; Message -> Lời nhắn (Thông điệp)


Bước 8: Điều chỉnh kích thước form
Để điều chỉnh kích thước bạn cần chèn thêm đoạn CSS sau đây vào cuối code ở trên

<style>.contact-form-name,.contact-form-email {
  max-width: 200px;
  width: 100%;
}

.contact-form-email-message {
  max-width: 500px;
  width: 100%;
  height: 200px;
}
</style> 

Có thể điều chỉnh kích thước trên cho cân đối với kích thước phần bài viết của blog.


Responses

23 Respones to " Mẫu form liên hệ cho Blogger "

Việt Sơn said...

sáng tạo thật, copy code trong template mẫu thành 1 form tùy biến được


July 17, 2013 at 10:49 PM
HOA TULIP said...

Mình chả hỉu rì, hix hix.....nhưng vữn cảm ơn!


July 31, 2013 at 12:28 PM
Karl Carsten said...

Hì hì, dù sao vẫn cảm ơn bạn đã quan tâm đến blog mình :)


July 31, 2013 at 9:59 PM
Ana Nhi said...

:D...chị cũng chả hiểu...
hi mà em học lớp mấy vậy?..:D
blog tòan những thứ cao siêu nhỉ?.:D
hâm mộ nhé..:D


August 1, 2013 at 12:53 PM
Karl Carsten said...

Hì hì, sang năm lên 12, ko biết đời sẽ đi về đâu... :cảm xúc:


August 2, 2013 at 1:55 PM
Lienketaz.com said...

Cảm ơn em vì bài viết rất hữu ích.


August 6, 2013 at 9:30 PM
truong linh said...

chào bạn, bạn add liên kết với blog mình nhé!
Địa chỉ Blog:http://tienganhgioi123.blogspot.com
Tên hiển thị : tienganhgioi123
Favico : http://img547.imageshack.us/img547/7521/xvys.jpg
Nội dung blog:
tienganhgioi123 - Blog Học Anh Văn| Nơi Chia Sẽ Những Bí Quyết Và Kinh Nghiệm Để Học Tốt Tiếng Anh|Phương Pháp Luyện Listening-Speaking-Reading-Writing Mới Nhất|Bài Test: Mini Test-Skill Test-Full Test|


August 7, 2013 at 4:35 PM
Karl Carsten said...

Hiện tại blog ngừng trao đổi liên kết nha bạn. Mong bạn thông cảm


August 7, 2013 at 8:45 PM
Yen sao said...

mình toàn làm qua google drive thui. Cảm ơn chia sẻ nhé


November 11, 2013 at 8:37 PM
Nguyen Luat said...

Đổi dùm mình liên kết Luatpro thành
http://luatit.blogspot.com
LuatIT Blog
nhé


October 3, 2014 at 6:16 PM
Đông Y Gia Truyền Phạm Ngọc said...

vậy thông tin liên hệ chuyển về đâu mình không tìm thấy


January 1, 2015 at 11:36 AM
Đàm Kiên said...

cho mình xin cái code xem ảnh không như của bạn được không, mình tìm hoài mà không thấy code này


March 30, 2015 at 7:04 PM
Thái Tâm said...

Xin phép bạn được chia sẻ bài viết tuyệt vời này qua blog mình để tiện tham khảo sau này và chia sẻ cho các bạn chưa biết. Mình sẽ ghi rõ thông tin của bạn trên bài chia sẽ nhé !!!
Cám ơn bạn vì bài viết bổ ít rất nhiều !!!


July 28, 2015 at 1:56 PM
BADMINTON VIETNAM said...

http://chiasetochanh.blogspot.com/


September 16, 2016 at 10:00 PM
Cường Con said...

Cảm ơn bài viết của bác, đang xài cho site Ma giam gia


August 2, 2017 at 7:03 PM

Post a Comment

FRIENDS

VanLinhEx Blog Duy Pham Blog BKAV giá rẻ Namkna Blog Đinh Công Thành ChinhTruc Blog VnZap! VnBlogExpress LaoDongBlog Thienhieu Vận chuyển nhà LuatIT Blog Kiếm tiền trên mạng Thế giới APKKiếm Tiền Trên Mạng GiangLe - Chia set phần mềm
Return to top of page Copyright © 2011 | Platinum Theme