Tạo Popup đặt hàng từ Contact Form 7 Wordpress

seolagi · 13/4/22

hi admin cho em xin cái popug đặt hàng anh làm cho web salegiatot.com với ạ, em thấy nó hay quá, lúc lick vào nó hiện ra cái popug của Contact Form 7 ấy ạ, rồi ấn vào màn hình trống không chưa popug nó tắt cái popug đi. Ấn vào giỏ hàng hay vị trí nào đó nó sẽ hiện cái popug ra ấy ạ. Cho em template của nó lun với, nhìn đó đẹp quá.

admin · 29/4/22

Trước tiên em vào tạo 1 form mới của Contact Form 7 ở admin wodpress mới với HTML như sau:

HTML:

<div class="cs-infopro">
<div class="cs-infopro-1">
<h2 class="cs-tilte-dathang">ĐẶT HÀNG ONLINE</h2>
<p>- <strong>Giá bán:</strong> <strong style="color:#f26122">290.000đ/tuýp. </strong>(vận chuyển: 20.000đ)</p>
<p>- Mua 2 sp giảm còn <strong>250.000đ/ tuýp</strong>&nbsp;và được <strong>miễn phí vận chuyển</strong>.</p>
</div>
<div class="cs-infopro-2">
<img alt="sản phẩm" src="/wp-content/uploads/2021/04/3D-600x600.jpg"  width="300" height="300" />
</div>
</div>
<div id="csdathang" class="cs-dathang">
<div class="cs-item">
<div class="cs-w50">[text* your-name placeholder "Họ và tên (Bắt buộc)"]</div>
<div class="cs-w50">[tel* tel-269 placeholder "Số điện thoại (Bắt buộc)"]</div>
</div>
<div class="cs-item">[text* your-address placeholder "Địa chỉ (Bắt buộc)"]</div>
<div class="cs-item">[number* number-512 min:1 max:1000 placeholder "Số lượng (bắt buộc)"] </div>
<div class="cs-item">[textarea textarea-343 placeholder "Ghi chú: giờ giao hàng, hướng dẫn giao hàng"] </div>
[current_url phieudathang]
<div class="cs-item" style="text-align:center">
[submit "Đặt hàng"]
</div>
</div>

Tiếp theo vào footer của web add thêm code sau vào:

HTML:

<div id="cspopup">
    <div id="cspopupcontent">
        <?php echo do_shortcode('[contact-form-7 id="123" title="Đặt hàng"]') ?>
        <span class="cs-closepopup" aria-hidden="true">×</span>
    </div>
</div>
<div class="cs-bgblack"></div>
<style>
.cs-popugactivate
{
    overflow: hidden;
}
.cs-closepopup
{
    position: absolute;
    right: 0;
    top: 0;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c0001a;
    opacity: 1;
    color: #fff;
    font-weight: bold;
    font-size: 35px;
    cursor: pointer;
}
.cs-popugactivate .cs-bgblack
{
    opacity: .5;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    transition: opacity .15s linear;
}
#cspopup
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display:none;
    overflow: hidden;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
#cspopupcontent
{
    transform: translate(-50%,-50%);
    background-color: #fff;
    position: absolute;
    left: 50%;
    margin: 0;
    top: 50%;
    animation-name: dich_chuyen;
    animation-duration: 2s;
    animation-delay: -1s;
    max-width: 650px;
    padding: 20px;
}
@keyframes dich_chuyen {
    0%   {top:0px;}
    100%  {top:50%;}
}
/* dat hang online */
.cs-tilte-dathang
{
    padding-left: 5px;
    color: #f26122;
    margin-bottom: 20px;
    margin-top: 5px;
}
.cs-dathang .cs-item
{
    float:left;
    width:100%;
    position: relative;
}
.cs-dathang
{
    float: left;
    width: 100%;
    padding: 15px;
    box-shadow: 0px 0px 10px 3px #99999942;
    margin-bottom: 15px;
}
.wpcf7-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.cs-dathang input[type="submit"]{
    background-color: #f26122;
    border: 1px solid #f26122;
    color: #fff;
    padding: 7px 30px 8px 30px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 17px;
    font-weight: normal;
    margin-top: 20px;
}
.cs-dathang input[type="text"],
.cs-dathang input[type="tel"]
{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 16px !important;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    height: 37px;
    margin-bottom: 15px;
}

.cs-dathang textarea
{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 16px !important;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    height: 100px;
    min-height: 60px;
}
.cs-dathang input[type="number"]
{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 16px !important;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    height: 37px;
    margin-bottom: 15px;
}
.cs-infopro
{
    width: 100%;
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.cs-infopro p
{
    font-size: 17px;
    color: #212529;
    line-height: 28px;
    margin-bottom: 5px;
}
.cs-infopro img
{
    max-width: 155px;
}
.cs-infopro .cs-infopro-1
{
    max-width: 65%;
    -ms-flex-preferred-size: 60%;
    flex-basis: 63%;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 15px;
}
.cs-infopro .cs-infopro-2
{
    max-width: 35%;
    -ms-flex-preferred-size: 40%;
    flex-basis: 35%;
    text-align: center;
    padding-bottom: 10px;
}

@media(min-width:767px) {
    .cs-dathang input[type="tel"]
    {
        margin-left: 15px;
        width: calc(100% - 15px);
    }
}
@media(max-width:767px) {
    #cspopupcontent
    {
        width: calc(100% - 20px);
    }
    .cs-infopro .cs-infopro-1 {
      max-width: 100%;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
    }
    .cs-infopro .cs-infopro-2 {
      display:none;
    }
}
/* end dat hang online */
</style>
<script type="text/javascript">
    (function($){
        $(document).ready(function(){   
            try {
                $('.cs-closepopup').click(function(){
                     $("#cspopup").css("display", "none");
                     $('body').removeClass("cs-popugactivate");
                      return false;
                 });
                 $('.csbuynowpopup').click(function(){
                     $("#cspopup").css("display", "block");
                     $('body').addClass("cs-popugactivate");
                      return false;
                 });
        
                const targetindex = document.querySelector('#cspopupcontent');
                document.addEventListener('click', (event) => {
                    const withinBoundaries = event.composedPath().includes(targetindex);
                    var classindex = event.target.className;
                    //alert(classindex);
                    if (classindex.indexOf("csbuynowpopup") < 0  && $("#cspopupcontent").length && $('#cspopup').css('display') == 'block') {
                        if (!withinBoundaries) {
                            $("#cspopup").css("display", "none");
                            $('body').removeClass("cs-popugactivate");
                        }
                    }
            
                });
            }
            catch(err) {}
        })
    })(jQuery)
</script>

[contact-form-7 id="123" title="Đặt hàng" : là cái shortcode của contact form 7 em mới tạo nhé.

Muốn ấn vào đâu nó hiển thị popup này thì em chèn class có tên: csbuynowpopup vào là xong.

Mã:

<div class="csbuynowpopup">Đặt mua ngay</div>

Em tùy biến nút đặt mua này theo ý của mình nhé.

seolagi · 13/4/22

Tuyệt vời quá ạ, em copy code làm theo ngay ạ, cảm ơn ad rất nhiều

hungvpe · 20/5/22

admin nói: ↑

Trước tiên em vào tạo 1 form mới của Contact Form 7 ở admin wodpress mới với HTML như sau:

HTML:

<div class="cs-infopro">
<div class="cs-infopro-1">
<h2 class="cs-tilte-dathang">ĐẶT HÀNG ONLINE</h2>
<p>- <strong>Giá bán:</strong> <strong style="color:#f26122">290.000đ/tuýp. </strong>(vận chuyển: 20.000đ)</p>
<p>- Mua 2 sp giảm còn <strong>250.000đ/ tuýp</strong>&nbsp;và được <strong>miễn phí vận chuyển</strong>.</p>
</div>
<div class="cs-infopro-2">
<img alt="sản phẩm" src="/wp-content/uploads/2021/04/3D-600x600.jpg"  width="300" height="300" />
</div>
</div>
<div id="csdathang" class="cs-dathang">
<div class="cs-item">
<div class="cs-w50">[text* your-name placeholder "Họ và tên (Bắt buộc)"]</div>
<div class="cs-w50">[tel* tel-269 placeholder "Số điện thoại (Bắt buộc)"]</div>
</div>
<div class="cs-item">[text* your-address placeholder "Địa chỉ (Bắt buộc)"]</div>
<div class="cs-item">[number* number-512 min:1 max:1000 placeholder "Số lượng (bắt buộc)"] </div>
<div class="cs-item">[textarea textarea-343 placeholder "Ghi chú: giờ giao hàng, hướng dẫn giao hàng"] </div>
[current_url phieudathang]
<div class="cs-item" style="text-align:center">
[submit "Đặt hàng"]
</div>
</div>

View attachment 37451

Tiếp theo vào footer của web add thêm code sau vào:

HTML:

<div id="cspopup">
    <div id="cspopupcontent">
        <?php echo do_shortcode('[contact-form-7 id="123" title="Đặt hàng"]') ?>
        <span class="cs-closepopup" aria-hidden="true">×</span>
    </div>
</div>
<div class="cs-bgblack"></div>
<style>
.cs-popugactivate
{
    overflow: hidden;
}
.cs-closepopup
{
    position: absolute;
    right: 0;
    top: 0;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c0001a;
    opacity: 1;
    color: #fff;
    font-weight: bold;
    font-size: 35px;
    cursor: pointer;
}
.cs-popugactivate .cs-bgblack
{
    opacity: .5;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    transition: opacity .15s linear;
}
#cspopup
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display:none;
    overflow: hidden;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
#cspopupcontent
{
    transform: translate(-50%,-50%);
    background-color: #fff;
    position: absolute;
    left: 50%;
    margin: 0;
    top: 50%;
    animation-name: dich_chuyen;
    animation-duration: 2s;
    animation-delay: -1s;
    max-width: 650px;
    padding: 20px;
}
@keyframes dich_chuyen {
    0%   {top:0px;}
    100%  {top:50%;}
}
/* dat hang online */
.cs-tilte-dathang
{
    padding-left: 5px;
    color: #f26122;
    margin-bottom: 20px;
    margin-top: 5px;
}
.cs-dathang .cs-item
{
    float:left;
    width:100%;
    position: relative;
}
.cs-dathang
{
    float: left;
    width: 100%;
    padding: 15px;
    box-shadow: 0px 0px 10px 3px #99999942;
    margin-bottom: 15px;
}
.wpcf7-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.cs-dathang input[type="submit"]{
    background-color: #f26122;
    border: 1px solid #f26122;
    color: #fff;
    padding: 7px 30px 8px 30px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 17px;
    font-weight: normal;
    margin-top: 20px;
}
.cs-dathang input[type="text"],
.cs-dathang input[type="tel"]
{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 16px !important;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    height: 37px;
    margin-bottom: 15px;
}

.cs-dathang textarea
{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 16px !important;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    height: 100px;
    min-height: 60px;
}
.cs-dathang input[type="number"]
{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 16px !important;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    height: 37px;
    margin-bottom: 15px;
}
.cs-infopro
{
    width: 100%;
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.cs-infopro p
{
    font-size: 17px;
    color: #212529;
    line-height: 28px;
    margin-bottom: 5px;
}
.cs-infopro img
{
    max-width: 155px;
}
.cs-infopro .cs-infopro-1
{
    max-width: 65%;
    -ms-flex-preferred-size: 60%;
    flex-basis: 63%;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 15px;
}
.cs-infopro .cs-infopro-2
{
    max-width: 35%;
    -ms-flex-preferred-size: 40%;
    flex-basis: 35%;
    text-align: center;
    padding-bottom: 10px;
}

@media(min-width:767px) {
    .cs-dathang input[type="tel"]
    {
        margin-left: 15px;
        width: calc(100% - 15px);
    }
}
@media(max-width:767px) {
    #cspopupcontent
    {
        width: calc(100% - 20px);
    }
    .cs-infopro .cs-infopro-1 {
      max-width: 100%;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
    }
    .cs-infopro .cs-infopro-2 {
      display:none;
    }
}
/* end dat hang online */
</style>
<script type="text/javascript">
    (function($){
        $(document).ready(function(){  
            try {
                $('.cs-closepopup').click(function(){
                     $("#cspopup").css("display", "none");
                     $('body').removeClass("cs-popugactivate");
                      return false;
                 });
                 $('.csbuynowpopup').click(function(){
                     $("#cspopup").css("display", "block");
                     $('body').addClass("cs-popugactivate");
                      return false;
                 });
       
                const targetindex = document.querySelector('#cspopupcontent');
                document.addEventListener('click', (event) => {
                    const withinBoundaries = event.composedPath().includes(targetindex);
                    var classindex = event.target.className;
                    //alert(classindex);
                    if (classindex.indexOf("csbuynowpopup") < 0  && $("#cspopupcontent").length && $('#cspopup').css('display') == 'block') {
                        if (!withinBoundaries) {
                            $("#cspopup").css("display", "none");
                            $('body').removeClass("cs-popugactivate");
                        }
                    }
           
                });
            }
            catch(err) {}
        })
    })(jQuery)
</script>

[contact-form-7 id="123" title="Đặt hàng" : là cái shortcode của contact form 7 em mới tạo nhé.

Muốn ấn vào đâu nó hiển thị popup này thì em chèn class có tên: csbuynowpopup vào là xong.

Mã:

<div class="csbuynowpopup">Đặt mua ngay</div>

Em tùy biến nút đặt mua này theo ý của mình nhé.

Click to expand...

Em xin phép lưu trữ về, cảm ơn Admin

kazz2607 · 27/6/22

Mình xin phép lưu về bookmark sử dụng, cảm ơn Admin

Loại	Vùng 1	Vùng 2
Xăng RON 95-V	30.350	30.950
Xăng RON 95-III	29.670	30.260
Xăng E5 RON 92-II	27.780	28.330
DO 0,001S-V	27.590	28.140
DO 0,05S-II	26.590	27.120
Dầu hỏa 2-K	26.340	26.860

STT / Bậc số điện	Giá (Đ/kWh)
1: Cho kWh từ 0 - 50	1.678
2. Cho kWh từ 51 - 100	1.734
3. Cho kWh từ 101 - 200	2.014
4. Cho kWh từ 201 - 300	2.536
5. Cho kWh từ 301 - 400	2.834
6. Cho kWh từ 401 trở lên	2.927
7. Dùng công tơ thẻ trả trước	2.461

Tạo Popup đặt hàng từ Contact Form 7 Wordpress

seolagi Moderator
Thành viên BQT

Moderator