Поле «Выбор картинки» в форме Zero Block превращается в аккуратные кнопки с иконками мессенджеров.
<style>
.t-img-select__control {
width: auto !important;
margin: 5px !important;
display: inline-flex !important;
padding: 5px 10px;
border: solid 1px #fafafa;
/* цвет обводки кнопки */
background: #fafafa;
/* цвет фона кнопки */
border-radius: 10px;
/* скругление */
}
.t-img-select__indicator {
width: 30px !important;
height: 30px !important;
box-shadow: none !important;
padding: 0;
margin: 3px 3px 3px 0px;
padding-bottom: 0px !important;
}
.t-img-select__indicator:after {
display: none;
}
.t-img-select__text {
font-size: 16px;
margin-top: 3px !important;
margin-bottom: 3px !important;
margin-left: 5px !important;
line-height: 30px !important;
}
</style>
<script>
$(() => {
const main = () => {
$('.t-input-group_in').hide()
$('.t-img-select__control input').on('click', function(){
$('.t-input-group_in').show(300)
$('.t-img-select__control').css('border','2px solid #f7f7f7'); // цвет обводки неактивной кнопки
$(this).parents('.t-img-select__control').css('border','2px solid #7385fe'); // цвет обводки активной кнопки
})
$('[value="Телефон"]').on('click', function(){
$('.t-input-group_in .t-input-title').text('Введите номер телефона');
$('[name="conval"]').attr('placeholder','+1 860 000 00 00');
})
$('[value="Telegram"]').on('click', function(){
$('.t-input-group_in .t-input-title').text('Введите ник или номер Telegram');
$('[name="conval"]').attr('placeholder','@nicname');
})
$('[value="WhatsApp"]').on('click', function(){
$('.t-input-group_in .t-input-title').text('Введите номер WhatsApp');
$('[name="conval"]').attr('placeholder','+1 860 000 00 00');
})
$('[value="Viber"]').on('click', function(){
$('.t-input-group_in .t-input-title').text('Введите номер Viber');
$('[name="conval"]').attr('placeholder','+1 860 000 00 00');
})
$('[value="Vk"]').on('click', function(){
$('.t-input-group_in .t-input-title').text('Введите ник Vk');
$('[name="conval"]').attr('placeholder','@nicname');
})
$('[value="Почта"]').on('click', function(){
$('.t-input-group_in .t-input-title').text('Введите адрес электронной почты');
$('[name="conval"]').attr('placeholder','yournic@mail.com');
})
$('[value="СМС"]').on('click', function(){
$('.t-input-group_in .t-input-title').text('Введите номер для СМС');
$('[name="conval"]').attr('placeholder','+1 860 000 00 00');
})
}
const $artboard = $(".t396__artboard");
if($artboard.hasClass("rendered"))
main();
else
$artboard.on("artBoardRendered", () => main());
})
</script>