Тарифы

HTML

<?php $num = 0; ?>
<?php if( have_rows('тарифы') ): ?>
<div class="price-tarif">
    <div class="container">
        <div class="title-big"><?php the_field('заголовок_блока_тарифов'); ?></div>
        <div class="flex_block">
            <?php while( have_rows('тарифы') ): the_row(); $num++ ?>
            <div class="tarif--inner">
                <div class="num"><span>0</span><?php echo $num; ?></div>
                <div class="title-block"><?php the_sub_field('название_тарифа'); ?></div>
                <div class="entrytext"><?php the_sub_field('список_услуг'); ?></div>
                <div class="btn-block">
                    <div class="price-num"><?php the_sub_field('цена'); ?></div>
                    <a class="btn btn-white" href="javascript:PopUpShowTarif()" data-title="<?php the_sub_field('название_тарифа'); ?>">Заказать</a>
                </div>

                <div class="modal-smg_boby modal-tarif">
                    <div class="modal-smg_boby-content">
                        <div class="modal-smg">
                            <div class="modal-smg_container">
                                <a class="close--modal-smg" href="javascript:PopUpHideTarif()"></a>
                                <div class="title-modal">Заказать тариф <br><?php the_sub_field('название_тарифа'); ?></div>
                                <div class="descr-modal">Вас проконсультирует квалифицированный мастер</div>
                                <?php echo do_shortcode('[contact-form-7 id="314" title="Тарифы"]'); ?>
                            </div>
                        </div>
                        <a class="close-smg_boby" href="javascript:PopUpHideTarif()"></a>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
    </div>
</div>
<?php endif; ?>

LESS

.price-tarif{
    text-align: center;
    padding-bottom: 150px;
    
    @media (max-width: 724px){
        padding-bottom: 50px;
    }
    .flex_block{
        padding-top: 50px;
        
        @media (max-width: 724px){
            padding: 0;
        }
    }
    .tarif--inner{
        width: calc(~'33.333% - 20px');
        margin-right: 30px;
        padding: 45px;
        box-sizing: border-box;
        background: @bg;
        position: relative;
        
        @media (max-width: 724px){
            width: 100%;
            padding: 50px 30px;
            margin-right: 0;
            margin-bottom: 30px;
        }
        &:nth-child(2){
            top: -50px;
            
            @media (max-width: 724px){
                top: auto;
            }
        }
        &:nth-child(3n){
            margin-right: 0;
        }
        .num{
            font-family: 'Factor A';
            font-size: 60px;
            line-height: 85px;
            margin-top: -10px;
            margin-bottom: 10px;
            color: @color-1;
        }
        .title-block{
            line-height: 26px;
            margin-bottom: 30px;
        }
        .entrytext{
            text-align: left;
            min-height: 180px;
            margin-bottom: 30px;
            
            @media (max-width: 724px){
                min-height: auto;
            }
        }
        ul{
            li{
                background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2311aecb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cline x1='12' y1='8' x2='12' y2='16'%3e%3c/line%3e%3cline x1='8' y1='12' x2='16' y2='12'%3e%3c/line%3e%3c/svg%3e") no-repeat 0 3px;
                background-size: 20px;
                margin-bottom: 10px;
                
                &::before{
                    display: none;
                }
            }
        }
        .btn-block{
            padding-top: 40px;
            border-top: 1px solid #dbdbdb;
            text-align: center;
            
            .price-num{
                font-size: 26px;
                font-weight: bold;
                margin-bottom: 20px;
                
                @media (max-width: 724px){
                    font-size: 22px;
                }
            }
            .btn{
                width: 100%;
                box-sizing: border-box;
            }
        }
    }
}

jQuery

//модалка тарифов
(function(){
    $(document).ready(function(){
        $('.tarif--inner').on('click', function(){
            $('.tarif--inner').removeClass('tarif--inner--active');
            $(this).addClass('tarif--inner--active');
        });
    });
})();
function PopUpShowTarif(){
    $(".tarif--inner--active .modal-tarif").fadeIn(230);
}
function PopUpHideTarif(){
    $(".tarif--inner--active .modal-tarif").fadeOut(230);
}

(function(){
    $(document).ready(function(){
        $('.tarif--inner .btn-block .btn').click(function(){
            tarifTitle = $(this).attr('data-title');
            
            $('.formData').val(tarifTitle);
        });
    });
})();
//модалка тарифов

CT 7 (Шаблон формы)

[text text-name placeholder "Ваше имя"]
[text* tel-phone placeholder "Ваш телефон"]
<button type="submit" class="btn">Заказать</button>
<label class="polit-form">
    <input name="polit" type="checkbox" checked="checked" required>
    <span class="checkmark">Я ознакомился с <a href="/privacy-policy/" target="_blank">политикой конфиденциальности</a></span>
</label>
[hidden formData class:formData]

CT 7 (Тело письма)

<h2>Заявка с сайта [_site_title]</h2>

<b>Тариф:</b> [formData]
<b>Имя:</b> [text-name]
<b>Телефон:</b> [tel-phone]