Đặt vấn đề
Mình muốn có một nút Đăng ký tư vấn chạy dọc bên phải website. Khi bấm vào đó nó sẽ nhảy ra form điền thông tin tư vấn.
Giải pháp
Bạn có thể sử dụng CSS + Popup Maker để tạo. Tuy nhiên nếu bạn đang sử dụng Beaver Builder, bạn hoàn toàn có thể sử dụng Module Button (nút) + CSS để tạo điều này.
B1. Tạo Form tư vấn
Đầu tiên bạn cần tạo một form tư vấn trước đã. Mình gợi ý sử dụng Caldera Forms để tạo.
Cách tạo bạn có thể Google, có một số hướng dẫn Tiếng Việt cho Caldera Forms, ở đây mình không hướng dẫn thêm, vì nó rất rất dài.
B2. Tạo Module Form tư vấn
Tiếp theo bạn truy cập vào Beaver Builder > Hàng đã lưu (Saved Rows) > Tạo mới (Add New)
Chèn widget Caldera Forms > Chọn Form vừa tạo > Tùy chỉnh màu sắc, thêm bớt chữ các kiểu.
Sau đó bấm Xong > Đăng để lưu.
B3. Lấy Shortcode form tư vấn
Truy cập vào Beaver Builder > Hàng đã lưu (Saved Rows) > Sửa form vừa tạo ở B2
Nhìn lên địa chỉ của trình duyệt, bạn sẽ thấy 1 dòng như thế này. Bạn lưu ý số đằng sau post=, ở đây là 3593
https://themevi.com/bds01/wp-admin/post.php?post=3593&action=edit
Và shortcode của form vừa tạo sẽ là
[fl_builder_insert_layout id="3593"]
Lưu shortcode này để sử dụng cho bước sau.
B4. Tạo nút Đăng ký tư vấn
Bạn sửa giao diện Footer (Beaver Builder > Themer Layout > và chọn sửa cái Footer mà bạn đã tạo cho web).
Và chèn module Button (nút) vào Footer, vị trí nào cũng được.
Tại Click Action chọn Lightbox. Tại Content Type chọn HTML, sau đó dán shortcode đã lấy ở B3 vào.
Tùy chỉnh màu sắc, icon,….các kiểu, sau đó vào tab Advanced (Nâng cao) > Điền kl-tuvan như hình
Và lưu lại. Giờ bấm vào nút Đăng ký tư vấn nó sẽ bật ra Form tư vấn
B5. Đính đăng ký tư vấn chạy dọc web
Tiếp theo bạn sẽ cần sử dụng một số CSS để đính nút Đăng ký tư vấn chạy dọc web.
Bạn có thể sử dụng CSS mẫu này.
.kl-tuvan {
position: fixed;
right: 0;
bottom: 30%;
z-index: 999;
}
trong đó
- right: là khoảng cách nút với bên phải của web. Nếu bạn muốn đính web về bên trái web thì sửa right thành left
- bottom: là khoảng cách nút với bên dưới của web, nếu bạn muốn tính khoảng cách so với bên trên web, thì đổi bottom thành top
Lưu mã CSS này vào Giao diện > Tùy biến > CSS bổ sung nhá.
Bình luận bên dưới nếu bạn có câu hỏi nhá!