Сложная форма с колонками и подписями
<div class="row-one"> <div class="coll-one">[text* text-469 id:coll-name placeholder "Марка авто"]</div> <div class="coll-two">[text* text-469 placeholder "Модель авто"]</div> </div> <div class="row-two"> <div class="coll-one-marsh"><label class="maker-text">Город отправления</label>[text* text-800 placeholder "Откуда"]</div> <div class="coll-two-marsh"><label class="maker-text">Город назначения</label>[text* text-878 placeholder "Куда"]</div> <div class="coll-three-marsh"><label class="maker-text">Желаемая дата отправки</label>[date* date-58 placeholder "Желаемая дата отправки"]</div> </div> <div class="row-three"> <div class="coll-one">[text* text-100 id:coll-name placeholder "Ваше имя"]</div> <div class="coll-two">[tel* tel-16 id:coll-tel class:tel placeholder "Номер телефона"]</div> </div> <div class="row-four"> <p style="text-align: center;">[submit id:coll-butt "Отправить заявку"]</p> </div> <p style="text-align: center;"><span style="color: #8f8b88; font-size: 12px;line-height:15px;">Отправляя заявку, вы соглашаетесь с нашей <a style="color: #8f8b88;" href="/политика-конфиденциальности/" target="_blank" rel="noopener">Политикой конфиденциальности</a></span></p>
Стили
/*начало формы*/
@media (max-width: 600px) {
.coll-one, .coll-two, .coll-one-marsh, .coll-two-marsh, .coll-three-marsh {
width: 95%!important;
margin: 5px!important;
}
.row-one, .row-two, .row-three {
display: block!important;
}
}
.maker-text {
font-size:14px;
}
.row-one, .row-two, .row-three {
display: flex;
}
.row-four {
margin-top: 10px;
}
.coll-one, .coll-two {
width: 48%;
margin: 15px;
}
.coll-one-marsh, .coll-two-marsh, .coll-three-marsh {
width: 30%;
margin: 15px;
}
/*конец формы*/