+7 982 100 5 999

Форма «Возникли вопросы?»

HTML

<div class="form-content">
    <div class="container">
        <div class="form-container">
            <div class="left">
                <div class="content-title"><?php the_field('заголовок_блока_формы_возникли_вопросы'); ?></div>
                <div class="content-descr"><?php the_field('подзаголовок_блока_формы_возникли_вопросы'); ?></div>
            </div>
            <form id="form-content-1" class="form-modal">
                <input type="text" name="name" placeholder="Имя">
                <input type="text" name="phone" placeholder="Телефон *" required>
                <button 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>
                <input type="hidden" name="formData" value="Нужна консультация с сайта <?php echo get_home_url(); ?>">
            </form>
        </div>
    </div>
</div>

LESS

.form-content{
    position: relative;
    
    @media (max-width: 724px){
        text-align: center;
        position: relative;
        background: @bg;
    }
    &::before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 50%;
        background: @bg;
        
        @media (max-width: 724px){
            display: none;
        }
    }
    .container{
        padding-top: 130px;
        padding-bottom: 130px;
        position: relative;
        
        @media (max-width: 724px){
            padding-top: 80px;
            padding-bottom: 80px;
        }
        &::after{
            content: '';
            position: absolute;
            right: 0;
            top: -30px;
            bottom: -30px;
            background: url('../img/bg-form.png') no-repeat right 70%;
            background-size: contain;
            width: 420px;
            
            @media (max-width: 724px){
                width: 180px;
                height: 180px;
                bottom: auto;
                top: -110px;
                right: 20px;
            }
        }
        &::before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: -150px;
            background: @bg;
            
            @media (max-width: 724px){
                display: none;
            }
        }
    }
    .content-title{
        margin-bottom: 5px;
    }
    .content-descr{
        position: relative;
        margin-bottom: 30px;
        color: @text-p;
    }
    form{
        position: relative;
        z-index: 2;
        
        input{
            display: inline-block;
            vertical-align: text-top;
            margin-right: 15px;
            width: 240px;
            
            @media (max-width: 724px){
                width: 100%;
                margin-right: 0;
                margin-bottom: 15px;
            }
        }
        .btn{
            vertical-align: text-top;
            
            @media (max-width: 724px){
                width: 100%;
            }
        }
    }
}