Tạo trang liên hệ bằng zotabox tuyệt đẹp giống Bác Sĩ Windows cho Blogspot

Chào các bạn, dạo gần đây nhiều bạn cứ inbox và gửi mail cho mình yêu cầu mình chia sẻ đoạn code để tạo trang liên hệ đẹp giống trên blog của mình. Code này không phải mình viết, mà mình sử dụng tiện ích của zotabox để tạo nên. Nếu các bạn thích thì hôm nay mình sẽ hướng dẫn các bạn cách tạo một form liên hệ tuyệt đẹp như thế.

Xem demo

Các bước thực hiện

Bước 1: Truy cập vào trang zotabox.com
Bước 2: Bấm vào nút Sign Up phía trên bên phải chọn đăng nhập bằng tài khoản Google.

Bước 3: Khi được chuyển đến trang Yêu cầu giấy phép, bấm Cho phép để tiếp tục.
Sau khi đăng nhập xong, bạn sẽ được chuyển về trang quản lý của zotabox.
Bước 4: Ở mục Contact Form, bạn bấm Edit.

Bước 5: Sau khi được chuyển đến trang chỉnh sửa, bạn có thể tùy ý tùy biến form liên hệ theo ý bạn. Sau khi chỉnh sửa xong, bạn bấm SAVE để lưu lại.

Bước 6: Sau khi chỉnh sửa hoàn tất, bạn bấm qua tab Embed Form (optional) để lấy code chèn vào blog. Copy và chèn đoạn code sau vào nơi bạn muốn hiển thị form liên hệ.

<div style="margin:0 auto;" id="zbwid-ffbda6f1"></div>

Bước 7: Vào trang này rồi copy đoạn script trong khung màu vàng dán vào trước thẻ </head> trong template.

<script type="text/javascript">
(function(d,s,id){var z=d.createElement(s);z.type="text/javascript";z.id=id;z.async=true;z.src="//static.zotabox.com/1/b/1b126fa3b095c08a114f25968d6a05ca/widgets.js";var sz=d.getElementsByTagName(s)[0];sz.parentNode.insertBefore(z,sz)}(document,"script","zb-embed-code"));
</script>

Như vậy là xong, nếu bạn có một số kiến thức về CSS thì bạn hoàn toàn có thể tùy biến form liên hệ này đẹp hơn nữa! Nếu đã thực hiện được thì hãy chia sẻ cho bạn bè nhé, còn nếu có lỗi trong quá trình thực hiện thì hãy bình luận bên dưới để mình giúp đỡ nhé!