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

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 cho 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 DEMO: In ấn  chất lượng giá rẻ

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

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

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

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!

Thiết kế in ấn chất lượng tại Cam Ranh

Cam Ranh Media in ấn chất lượng, giá rẻ và uy tín nhất tại Cam Ranh. Giải pháp tiết kiệm chi phí và thời gian đi lại cho quý khách cần in ấn.

Thuê xe tự lái giá rẻ Cam Ranh

Ngoài các dịch vụ trên, tôi còn cung cấp dịch vụ Thuê Xe tự lái khi du lịch Cam Ranh. Dịch vụ cho thuê xe máy và ôtô tự lái Cam Ranh giá rẻ và uy tín

Xem chi tiết