Tạo popup từ Contact Form 7 WordPress đơn giản

1159 Lượt xem

Helllo ….Xin chào các anh em đã quay trở lại với website Cam Ranh Media của mình. Hôm trước, mình đã chia sẽ cách tạo hiệu ứng popup từ contact form 7 bằng plugin Easy FancyBox.

Xem lại bài viết: Tạo hiệu ứng popup từ Contact Form 7 WordPress

Được nhiều bạn đọc giả cho hay. Plugin Easy FancyBox bị xung đột quá nhiều với các plugin khác. Do đó, bài viết này mình xin chia sẽ các tạo popup từ contact form 7 wordpress nhanh gọn lẹn mà không cần dùng plugin.

I. Tạo popup từ Contact Form 7 WordPress gọn lẹ

+ Giới thiệu vài dòng về cách tạo này nhé!

Tạo Popup hiện ra khi click với hiệu ứng đẹp bằng CSS. Sử dụng thẻ HTML :target, popup được thiết kế chỉ hoàn toàn bằng CSS với hiệu ứng và transform tuyệt đẹp cho website. Bạn hãy tâm vì nó rất đơn gian siêu mượt như gái 18+ hehe :)). Bạn có thể dùng nó để tạo popup thông báo, liên hệ, lưu ý,…

+ Hướng dẫn tạo popup contact form 7

Bước 1:  Copy hết đóng CSS dưới đây quăng vào tập tin CSS của website các bạn nhé!

#popupcr{top:0;left:0;right:0;bottom:0;position:fixed;opacity:0;visibility:hidden;transition:.5s;transform:scale(1.2)}
#popupcr:target{transform:scale(1);background:rgba(0,0,0,.2);opacity:1;visibility:visible;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999999999999;transition:.5s}
.popup{background:#fff;border-radius:4px;z-index:999;width:600px;max-width:100%;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:20px;box-sizing:border-box;box-shadow:0 0 100px rgba(0,0,0,.1)}
.popup-close{background-color: rgb(119, 119, 119);opacity: 0.7;cursor: pointer;height: 984px;display: block;z-index: 111100;}

Bước 2: Soạn thảo nội dung Popup Contact Form 7

Các bạn copy hết đóng này quăng vào nơi bạn muốn click popup hiển thị. Nhưng trước khi copy bạn hãy xem cách hướng dẫn nội dung soạn thảo ở dưới nhé!

<div id="popupcr">
    <div class="popup">[.contact-form-7 id="3179" title="Nhận báo giá in ấn"]
    <p style="text-align: right;"><a class="close" href="#close" title="Close" style="background: black;color: white;padding: 10px;border-radius: 30px;">ĐÓNG</a></p>
    </div>
    <a class='popup-close' href='#close' title="Close"></a>
</div>
<p style="text-align: center;">
<a class="elementor-button-link elementor-button elementor-size-md elementor-animation-pulse" style="background-color: #ff0303;border-radius: 50px;color: white;" href="#popupcr">Nhận Báo Giá</a></p>

II. Hướng dẫn sử dụng soạn thảo nội Popup Contact Form 7

Trên khung trên các bạn chú ý cho mình các phần sau đây:

<div class=”popup”>[.contact-form-7 id=”3179″ title=”Nhận báo giá in ấn”]
<p style=”text-align: right;”><a class=”close” href=”#close” title=”Close” style=”background: black;color: white;padding: 10px;border-radius: 30px;”>ĐÓNG</a></p>
</div>

Chú ý thay đổi: Các bạn chú ý phần màu đỏ nhé! Phần này các bạn tạo Form tùy ý của bạn rồi copy shortcode dán vào chỗ đó.

<p style=”text-align: center;”>
<a class=”elementor-button-link elementor-button elementor-size-md elementor-animation-pulse” style=”background-color: #ff0303;border-radius: 50px;color: white;” href=”#popupcr”>Nhận Báo Giá</a></p>

Chú ý thay đổi: Phần này là nút bấm nhé!. Dòng màu đỏ trên là hiệu ứng nút bấm trên website mình. Do đó, các bạn hãy xóa đi chỉ còn lại như sau:

<p><a href=”#popupcr”>Nhận Báo Giá</p>

Xem thêm: Thiết kế web Nha Trang

Lời kết

Với thiết kế đẹp và cách thực hiện đơn giản. Không làm ảnh hưởng đến những thành phần khác trên blog cũng như tốc độ tải trang. Hy vong sẽ giúp ích cho các trong việc tạo popup cho contact form 7. Cho một bình luận/chia sẻ nếu thấy hữu ích nhé.

Bạn cần các dịch vụ tại Cam Ranh Media

✅Thiết kế website uy tín chất lượng

Trả lời: Thiết Kế Website chuẩn Seo uy tín chuyên nghiệp. Tạo Web Ngay! Tạo Website Miễn Phí. Giao Diện Đẹp Mắt. Hỗ Trợ 24/24. Gọi ngay 0935.961.044 gặp Mr.Toàn.

✅Dịch vụ quảng cáo Google Ads

Trả lời: Cam Ranh Media – Dịch Vụ Quảng Cáo Website Trên Trang Nhất Google Hàng Đầu Tại Việt Nam. Quảng Cáo Google Là Cách Nhanh Nhất Để Đẩy Doanh Số Bán Hàng, Tăng Sức Mạnh Website.

✅Dịch vụ quản trị website chuyên nghiệp

Trả lời: Chuyên cung cấp dịch vụ quản trị website Uy Tín – Giá Rẻ – Đúng Cam Kết. Liên hệ ngay hotline 0935 961 044 gặp Mr.Toàn để được tư vẫn miễn phí về dịch vụ quản trị web!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0935961044