Что делает скрипт

Поле «Выбор картинки» в форме Zero Block превращается в аккуратные кнопки с иконками мессенджеров.

Как подключить

  1. В форме Zero Block добавьте поле «Выбор картинки» и загрузите иконки мессенджеров.
  2. Вставьте код в блок T123 «HTML-код» на страницу (или в «Настройки страницы» → «HTML-код для вставки внутрь head»).
  3. Цвета и скругление кнопок меняются в стилях.
  4. Опубликуйте страницу: код выполняется только на опубликованной странице.

Код

Код для вставки
<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>
тут нужно написать стили и js/css для того, чтобы отображались файлы скриптов