Форма связи в две колонки
<div class="row-one"> <div class="coll-one">[text* text-772 id:coll-name placeholder "Ваше имя"]</div> <div class="coll-two">[tel* tel-16 id:coll-tel class:tel placeholder "Номер телефона"]</div> </div> <div class="row-two"> <div class="coll-full">Какой продукт Вас интересует: [checkbox* checkbox-685 id:coll-menu "ГИДРОПЕН ПРОНИКАЮЩИЙ" "ГИДРОПЕН ЭЛАСТИЧНЫЙ 1К"]</div> </div> <div class="row-three"> <p style="text-align: center;">[submit id:coll-butt "Отправить заявку"]</p> </div>
Стили
@media (max-width: 600px) {
.coll-one, .coll-two {
width: 95%!important;
margin: 5px!important;
}
.row-one {
display: block!important;
}
}
.row-one, .row-two {
display: flex;
}
.row-three {
margin-top: 10px;
}
.coll-one, .coll-two {
width: 45%;
margin: 15px;
}
.coll-full {
text-align: center;
width: 100%;
color: #000;
font-weight: 600;
font-size: 14px;
}
#coll-name, #coll-tel {
border: 2px solid #008fd8;
border-radius: 35px;
color: #000000;
font-size: 14px;
font-weight: 600;
background: transparent;
}
#coll-butt:hover {
font-weight: 600;
border: 2px solid #008fd8!important;
}