Hướng dẫn tạo trang liên hệ chuyên nghiệp cho Blog

Mẫu conatct form page mới được thiêt kế đẹp, chuẩn HTML5 thay thế cho widget Conatct Form mặc định, mang lại phong cách chuyên nghiệp cho Blog thay vì hiển thị widget. Tuy nhiên để contact form hoạt động vẫn phải sử dụng đến tiện ích Conatct Form và chúng ta có thể thiết lập widget chỉ hoạt động tại trang liên hệ.

Cách tạo trang liên hệ

Bước 1: Thêm widget Conatct Form từ bố cục tiện ích
Bước 2: Tạo trang mới lấy tên ngắn gọn ví dụ Liên hệ hay Contact xong chuyển qua khung soạn thảo HTML của trang chèn đoạn code sau:

Copy

<div style="text-align: center;">Liên hệ hợp tác quảng cáo, trao đổi liên kết hoặc yêu cầu trợ giúp với Việt Blogger</div><br />

<br />

<form name="contact-form">

  <label>Tên của bạn</label>

  <input id="ContactForm1_contact-form-name" aria-label="Nhập tên của bạn" autocomplete="off" dir="ltr" spellcheck="false" type="text" name="name" placeholder="Nhập tên của bạn..." required="" value="">

  <label>Địa chỉ email</label>

  <input type="email" id="ContactForm1_contact-form-email" aria-label="Nhập địa chỉ email" autocomplete="off" dir="ltr" spellcheck="false" name="email" placeholder="Nhập địa chỉ email..." required="" value="">

  <label>Nội dung</label>

  <textarea id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Nhập nội dung..." required=""></textarea>

  <input id="ContactForm1_contact-form-submit" aria-label="Gửi email" type="button" value="Gửi email">

  <div id="ContactForm1_contact-form-error-message"></div>

  <div id="ContactForm1_contact-form-success-message"></div>

</form>

<br />

(1) Ghi rõ họ tên và số điện thoại liên lạc (nếu có)<br />

(2) Địa chỉ email cần ghi chính xác để có thể nhận phản hồi lại<br />

(3) Nội dung liên hệ ngắn gọn, nếu cần hỗ trợ cần thêm liên kết ảnh đính kèm<br />

<style type="text/css">

.ContactForm {

    display:none!important

}

form[name=contact-form] label:after {

    padding-left: 3px;

    font-size: 12px;

    vertical-align: text-bottom;

}

form[name=contact-form] label:nth-of-type(1):after {

    content: "(1)";

}

form[name=contact-form] label:nth-of-type(2):after {

    content: "(2)";

}

form[name=contact-form] label:nth-of-type(3):after {

    content: "(3)";

}

form[name=contact-form] input[type=text], form[name=contact-form] input[type=email], form[name=contact-form] textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid rgba(0,0,0,0.12);

    transition: border-color .3s;

    border-radius: 4px;

    box-sizing: border-box;

    margin-top: 6px;

    margin-bottom: 16px;

    resize: vertical;

    outline: none;

    font-size: 15px;

}

form[name=contact-form] input[type=button] {

    background: transparent;

    border: 1px solid rgba(0,170,255,.2);

    border-radius: 4px;

    color: #00aaff;

    padding: 8px 10px 8px 5px;

    letter-spacing: .007px;

    white-space: nowrap;

    transition: border-color .3s;

    font-size: 15px;

    outline: none;

    cursor: pointer;

}

form[name=contact-form] input[type=text]:hover, form[name=contact-form] input[type=email]:hover, form[name=contact-form] textarea:hover, form[name=contact-form] input[type=button]:hover {

    border-color: #0af;

    transition: border-color .3s;

}

</style>

Để ý trên địa chỉ trình duyệt khi soạn thảo có đoạn pageID= theo sau là một dãy số ví dụ 5383490038187241731, sao chép dãy số này lại. Chọn Xuất bản trang xong lại vào Chỉnh sửa trang sửa lại tiêu đề tùy thích ví dụ sửa Liên hệ thành Liên hệ với Việt Blogger xong chọn Cập nhật.

Bước 3: Vào chỉnh sửa template chọn Chuyển đến tiện ích ContactForm1, thêm đoạn sau trong <b:widget..., để widget chỉ hoạt động tại trang liên hệ.

Copy

<b:widget cond='data:blog.pageId == &quot;5383490038187241731&quot;' id='ContactForm1' locked='false' title='Biểu mẫu liên hệ' type='ContactForm' version='1'>

Tiếp tục sửa đoạn <b:includable id='content'>...</b:includable> thành <b:includable id='content'/> xong lưu mẫu lại.

Bước 4: Đặt nút Liên hệ vào vào vị trí cần hiển thị để dẫn đến trang liên hệ

Copy

<a expr:href='data:blog.canonicalHomepageUrl + &quot;p/lien-he.html&quot;' title='Liên hệ' target='_blank'>Liên hệ</a>

Xem demo: Liên hệ

Nội dung chính