Tạo popup báo giá, tư vấn sử dụng lightbox flatsome

Tạo popup báo giá, tư vấn sử dụng lightbox flatsome. Flatsome theme là theme bán hàng WordPress bán chạy nhất thế giới và số lượng người dùng khá lớn, theme flatsome có nhiều tính năng tuy nhiên người dùng chưa biết cách sử dụng nó một cách hiệu quả. Ở đây mình muốn nói đó là chức năng popup Lightbox của theme. Thông thường một số bạn sẽ cài plugin Popup từ bên ngoài như Popup marker, Ninja Popup, OptinMonster …. sẽ khiến website của bạn chậm. Hôm nay mình sẽ hướng dẫn bạn tạo Lightbox mà không cần sử dụng plugin.

Lightbox Flatsome là gì ?

Lightbox popup (hoặc lightbox pop-up) là một dạng của hiệu ứng click nhảy lên cửa sổ, được sử dụng để hiển thị nội dung trên một trang web mà không cần bật tab mới. Cửa sổ popup thường xuất hiện trên trang web khi người dùng thực hiện một click nào đó ví dụ như click vào một liên kết, nút hay hình ảnh.

Lightbox popups thường chứa nội dung như hình ảnh, video, mô tả sản phẩm chi tiết, biểu đồ, mẫu đăng ký, thông báo quảng cáo, thông báo cookie, hoặc bất kỳ loại nội dung nào mà bạn muốn tập trung vào mà không cần tạo ra một trang web mới hoặc chuyển hướng người dùng. Điều quan trọng là cửa sổ popup này thường có kích thước nhỏ hơn so với toàn bộ trang web, giúp làm nổi bật nội dung quan trọng và tạo ra trải nghiệm tương tác cho người dùng.

Cách 1: Sử dụng click để mở Lightbox flatsome

Bạn có thể click vào code để xem mẫu

Click để hiện Popup

[button size="medium" class="custom-btn lowcase" style="alert" text="Click để hiện Popup" link="#tuvan" target=""]

Khi bạn click sẽ thấy của sổ hiện lên form tư vấn ơ đây mình sẽ dùng kết hợp với Contact Form 7

Vào contact form 7 tạo form liên hệ, ở đây mình share luôn mẫu code đẹp như web đang dùng copy code này dán vào form bạn đã tạo

<div class="appointment">
  <div class="title">
  Đăng ký tư vấn
  </div>
<div style="margin-bottom:30px;">Khách hàng vui lòng để lại thông tin và lời nhắn, bộ phận CSKH sẽ liên hệ lại ngay sau khi nhận được thông tin của quý khách </div>

  <div class="item">
<label>Họ và tên</label>
[text* hoten]
  </div>

<div class="item">
<label>Số điện thoại</label>
[tel* sdt]
  </div>

<div class="item">
<label>Email</label>
[email email]
  </div>

<div class="item">
<label>Nội dung</label>
[textarea mess]
  </div>

<button type="submit" class="wpcf7-form-control primary dark has-spinner wpcf7-submit">Gửi yêu cầu
<span><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512"><path d="m502.628 278.627-113.378 113.378c-6.249 6.249-14.438 9.373-22.628 9.373s-16.379-3.124-22.628-9.373c-12.496-12.497-12.496-32.758 0-45.255l58.751-58.75h-370.745c-17.673 0-32-14.327-32-32s14.327-32 32-32h370.745l-58.751-58.75c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l113.378 113.378c12.496 12.496 12.496 32.758 0 45.254z" fill="#0160e7"/></svg></span></button>
</div>

Mã CSS

/* css forrm */

.appointment {
    background: #fff;
    position: relative;
    z-index: 1;
}
.appointment .item {
    position: relative;
}
.appointment .item label {
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    z-index: 1;
    background: #fff;
    left: 10px;
    top: -8px;
    padding: 0 10px;
    display: inline-block;
    width: auto;
    border-radius: 5px;
    color: #333;
}
.appointment .item .wpcf7-form-control-wrap * {
    height: 50px;
    border-radius: 5px;
    box-shadow: none;
    font-size: 14px;
    padding-left: 20px;
}
.appointment .item .wpcf7-form-control-wrap *:focus, input:-internal-autofill-selected  {
    background-color: transparent;
}
.appointment .item .wpcf7-form-control-wrap select {
    height: 60px;
}
#regtour .appointment .item .wpcf7-form-control-wrap * {
    background-color: #fff;
}
.appointment .title  {
    margin-bottom: 30px;
}
.custom-form:before {
    content: '';
    border-radius: 15px;
    width: 95%;
    height: 80%;
    background: var(--primary-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    margin: 0 auto;
    z-index: 0;
    left: 0;
}
.form-lienhe.appointment .wpcf7-submit {
    margin: unset;
}
.appointment .wpcf7-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    gap: 10px;
    border-radius: 999px;
    position: relative;
    z-index: 1;
    transition: color .1s ease-in-out,background-color 1s ease-in-out;
    padding: 0 10px 0 30px;
    height: 54px;
    line-height: 0;
    background-color: var(--primary-color);
    border:none;
    border:2px solid var(--primary-color);
    font-weight: 800;
    color: #fff;
}
.appointment .wpcf7-submit::before {
    background: #fff;
    content: '';
    position: absolute;
    z-index: 0;
    width: 40px;
    height: 40px;
    top: 5px;
    right: 10px;
    display: block;
    border-radius: 999px;
    background-color: #fff;
    transition: .2s all ease-in-out;
}
.appointment .wpcf7-submit span {
    width: 40px;
    height: 40px;
    display: inline-flex;
    background: #fff;
    border-radius: 99px;
    justify-content: center;
    z-index: 1;
    padding: 10px;
}
.appointment .wpcf7-submit svg {
    width: 20px;
    height: 20px;
}
.appointment .wpcf7-submit:hover {
    color: var(--primary-color);
    z-index: 2;
}
.appointment .wpcf7-submit:hover::before {
    width: calc(100% - -2px);
    height: calc(100% + 2px);
    padding-right: 19px;
    right: -1px;
    top: -1px;
    line-height: 50px;
    z-index: -1;
}
.lightbox-content {
    border-radius: 15px;
    padding: 40px;
}

Sau khi tạo xong lấy shortcode từ contact form copy nó và dán vào đây

[lightbox id="tuvan" width="600px" padding="20px"]Mã ngắn cf7[/lightbox]

Sử dụng đồng thời 2 code này chung 1 trang cần hiện thị popup

[button size="medium" class="custom-btn lowcase" style="alert" text="Click để hiện Popup" link="#tuvan" target=""]
[lightbox id="tuvan" width="600px" đệm="20px"]Mã ngắn cf7[/lightbox]

Cách 2: Tự động hiện thị Popup

[lightbox auto_open="true" auto_timer="3000" auto_show="always/once" id="tuvan" width="600px" padding="20px"]Mã ngắn cf7[/lightbox]

Giải thích các tham số trên:

• auto_open=”true” : tự mở popup
• auto_timer=”3000″ : mở sau 3 giây
• auto_show=”always/once” mở 1 lần

Nếu như bạn thực hiện đúng như các bước trên mình hướng dẫn, bạn có thể xem lại đã thành công hay chưa. Bài viết này mình đã hướng dẫn cụ thể chỉ cần copy theo các bước là được không cần phải code gì cả, quá đơn giản đúng không 😀

Ngoài ra bên mình còn bán giao diện mẫu được build trên flatsome với nhiều lĩnh vực cho bạn lựa chọn tại đây.

Các dịch vụ khác như

• Thiết kế website chuyên nghiệp trọn gói, chuẩn SEO
• Dịch vụ Cloud Hosting
• Dịch vụ VPS NVMe Tốc độ cao