Hướng dẫn cài Contact form của Blogger

BloggerGuide

Tuesday, May 21, 2013

0 comments

Lợi ích từ mẫu Contact form của Blogger

Mẫu liên hệ (Contact form) Blogger giúp người đọc có thể gữi tin nhắn đễ dàng và giúp người chủ Blog check Email phẩn hồi đơn giản từ đọc giả

Để 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ệ

Hướng dẫn cài Contact form của Blogger

Sau khi lưu lại,  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. Nếu muốn đặt nó vào Page của Blogger thì làm như thế nào?

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

Step 2. Nhấn Mẫu > Chỉnh sửa HTML

Step 3. Nhấp Chuyển đến tiện ích > ContactForm1 

Step 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

Step 5. Xóa hết đoạn code bên trong nó, như bạn nhìn thấy dưới đây 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'/>

Step 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.

Step 7. Chọn chế độ soạn HTML rồi dán đoạn code này vào 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)

Step 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 phía trên thẻ ]]>&lt/b:skin>

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

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

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.

Tag : Blog Comments, Blog Contact, Blog Emoticons, Blog Posts, Blog Templates