Hướng dẫn tạo from liên hệ cho blogspot

Hướng dẫn tạo Form liên hệ cho Blogspot đơn giản và đẹp nhất được cung cấp từ blogspot: Bloggger 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.
Hướng dẫn tạo from liên hệ cho blogspot miễn phí
Đầu tiên để sử dụng form liên hệ 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 hình minh họa bên dưới)

​

Cài đặt form liên hệ trên blogspot

​

Tiện ích Form liên hệ trên Blogger

​

Lưu form liên hệ trên blogspot

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.

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.

Các bước thực hiện tạo form liên hệ cho blogspot
Bước 1. Giữ nguyên mẫu form liên hệ mà bạn vừa tạo lúc nãy và tiếp tục các bước đễ lôi form liên hệ cho blogspot ra trang page mà bạn muốn.

Bước 2. Nhấn Mẫu > Chỉnh sửa HTML để chỉnh sữa lại theme cho hợp lý

​

Hướng dẫn cài form liên hệ cho blogspot

Bước 3. Bạn Nhấp Chuyển đến tiện ích > ContactForm1 đế đến dòng cần chỉnh sữa

​

Chỉnh sữa form liên hệ cho blogger

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

​

Form liên hệ cho blogspot

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

​

Code liên hệ cho blogspot

Bước 6. Tạo trang chứa form liên hệ trên blogspot/blogger: 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..

​

Trang form liên hệ cho blogspot

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.

Mã:

<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 bạn cần chèn thêm đoạn CSS sau đây phía trên thẻ:

Mã:

]]></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.
Như vậy bạn đã có form riêng hệ của riêng mình. Email mà bạn nhận được như hình dưới đây:

​

Tạo form liên hệ cho blogspot thành công

Chiến Lược Mới chúc bạn thành công!

Nguồn:chienluocmoi