Как сделать выбор способа связи в форме Tilda
Вкусные лепёшки из тандыра!
Запишись на бесплатный 2-х часовой мастер-класс с практикой

Как сделать выбор способа связи в форме Tilda

1
Добавили на страницу блок BF310N
2
Добавили в него 7 полей с именами переменных:
- Имя ---
- Телефон - myphone
- Телефон - mywhatsapp
- Поле в одну строку - mytelegram
- Поле в одну строку - myvk
- E-mail - myemail
- Телефон - myviber
3
Все поля обязательные для заполнения
4
Добавили коды на страницу
(вставляется в блок ДРУГОЕ►Т123)
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём в форме кнопки выбора связи с различными полями
Длительность видео: 22 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Первый урок бесплатно!
Выберите удобный способ связи, менеджер свяжется и объяснит детали:
Введите Ваше имя:
Введите номер телефона
Введите Ваш номер WhatsApp:
Введите логин или номер Telegram:
Введите Вашу ссылку Вконтакте:
Введите контактный e-mail:
Введите Ваш номер Viber:
Нажимая на кнопку "Записаться на урок" Вы соглашаетесь с политикой конфиденциальности этого сайта
Библиотека для примера
1

<div class="toggle-grid">
          <div class="toggle__btn toggle__btn_active" data-name="tel"><span>Телефон</span></div>
          <div class="toggle__btn" data-name="wapp"><span>WhatsApp</span></div>
          <div class="toggle__btn" data-name="tele"><span>Telegram</span></div>
          <div class="toggle__btn" data-name="vk"><span>Вконтакте</span></div>
          <div class="toggle__btn" data-name="mail"><span>E-mail</span></div>
          <div class="toggle__btn" data-name="viber"><span>Viber</span></div>
</div>
2

<style>
/*Формат для всего блока*/
    .toggle-grid {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
/*Настройка перой кнопки*/    
    .toggle__btn:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

/*Стиль для активной кнопки*/
   .toggle__btn_active {
    border-color: #e41a44;
    -webkit-box-shadow: 0px 7px 10px 0px rgba(215, 15, 56, 0.2);
    box-shadow: 0px 7px 10px 0px rgba(215, 15, 56, 0.2);
    color: #FFFFFF !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2254f), to(#d70f38))  !important;
    background-image: linear-gradient(#f2254f, #d70f38) !important;
}
/*Настройка для всех кнопок*/
   .toggle__btn {
    width: calc(100%/5);
    height: 45px;
    font-size: 12px;
    font-family: 'Roboto',Arial,sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid #d6d6d6;
    color: #5D5D5D;
    cursor: pointer;
    margin-right: -1px;
    position: relative;
    overflow: hidden;
    -webkit-transition: ease 0.3s;
    transition: ease 0.3s;
}
/*Настройка псевдокласса активной кнопки*/
   .toggle__btn_active:before {
    opacity: 1;
}
/*Настройка псевдокласса кнопки*/
   .toggle__btn:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2254f), to(#d70f38));
    background-image: linear-gradient(#f2254f, #d70f38);
    opacity: 0;
    -webkit-transition: ease 0.3s;
    transition: ease 0.3s;
}

/*Настройка последней кнопки*/
.toggle__btn:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-right: 0;
}
/*Настройка контента в кнопке*/
 .toggle__btn span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    position: relative;
    z-index: 2;
}
/*Настройка псевдокласса в кнопке*/
 .toggle__btn span:before {
    content: "";
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/*Настройка эффекта при наведении в кнопке*/
.toggle__btn:hover {
    border-color: #e41a44;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2254f), to(#d70f38));
    background-image: linear-gradient(to bottom, #f2254f, #d70f38);
    color: #FFFFFF;
}
/*Настройка кнопок на мобильных дисплеях*/
 @media screen and (max-width: 640px){

.toggle__btn span {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 12px;
}
}
/*Настройка кнопок на мобильных дисплеях*/
 @media screen and (max-width: 500px){

.toggle__btn span {
    font-size: 0px;
}
.toggle__btn span:before {
    width: 15px;
    height: 15px;
}
}
</style>
3

<style>
/*Настройка контента в кнопке*/
/*Телефон белый*/
.toggle__btn_active[data-name="tel"] span:before, .toggle__btn_active[data-name="tel"]:hover span:before , .toggle__btn[data-name="tel"]:hover span:before {
    background-image: url(https://static.tildacdn.com/tild6661-3539-4831-a431-393432333364/035-phone-volume.svg) !important;
}
/*Телефон серый*/
 .toggle__btn[data-name="tel"] span:before {
    background-image: url(https://static.tildacdn.com/tild6134-3066-4564-a561-623663383539/phone-gray.svg);
}
/*WA белый*/
.toggle__btn_active[data-name="wapp"] span:before, .toggle__btn_active[data-name="wapp"]:hover span:before , .toggle__btn[data-name="wapp"]:hover span:before {
    background-image: url(https://static.tildacdn.com/tild6364-3761-4239-b561-313864346465/wapp-w.svg) !important;
}
/*WA зелёный*/
 .toggle__btn[data-name="wapp"] span:before {
    background-image: url(https://static.tildacdn.com/tild3530-3439-4062-b361-653736376565/wapp.svg);
}

/*TG белый*/
.toggle__btn_active[data-name="tele"] span:before, .toggle__btn_active[data-name="tele"]:hover span:before , .toggle__btn[data-name="tele"]:hover span:before {
    background-image: url(https://static.tildacdn.com/tild3439-3761-4732-b837-616562326636/tele-w.svg) !important;
}
/*TG синий*/
 .toggle__btn[data-name="tele"] span:before {
    background-image: url(https://static.tildacdn.com/tild3635-3239-4137-b538-366338376662/tele.svg);
}

/*VK белый*/
.toggle__btn_active[data-name="vk"] span:before, .toggle__btn_active[data-name="vk"]:hover span:before , .toggle__btn[data-name="vk"]:hover span:before {
    background-image: url(https://static.tildacdn.com/tild3234-3162-4135-a565-336261353062/vk-w.svg) !important;
}
/*VK синий*/
 .toggle__btn[data-name="vk"] span:before {
    background-image: url(https://static.tildacdn.com/tild3732-3763-4938-b039-323831623839/vk.svg);
}

/*EMAIL белый*/
.toggle__btn_active[data-name="mail"] span:before, .toggle__btn_active[data-name="mail"]:hover span:before , .toggle__btn[data-name="mail"]:hover span:before{
    background-image: url(https://static.tildacdn.com/tild3932-3065-4638-a234-326561643534/mail-w.svg) !important;
}
/*EMAIL красный*/
 .toggle__btn[data-name="mail"] span:before {
    background-image: url(https://static.tildacdn.com/tild3266-6163-4737-a361-316438303539/mail.svg);
}

/*Viber белый*/
.toggle__btn_active[data-name="viber"] span:before, .toggle__btn_active[data-name="viber"]:hover span:before ,.toggle__btn[data-name="viber"]:hover span:before {
    background-image: url(https://static.tildacdn.com/tild6137-3137-4763-b862-363136303463/viber-w.svg) !important;
}
/*Viber фиолетовый*/
 .toggle__btn[data-name="viber"] span:before {
    background-image: url(https://static.tildacdn.com/tild6231-6264-4465-b362-316463643364/viber.svg);
}


</style>
4

<script>
$( document ).ready(function() {
    //Перемещаем кнопки в форму
 $('.toggle-grid').insertAfter('.t-input-group_nm');
 //Присваиваем блокам с полями нужные классы и скрываем ненужные
 $('input[name="myphone"]').parent(".t-input-block").parent(".t-input-group").addClass('myphone inputblock');
 $('input[name="mywhatsapp"]').parent(".t-input-block").parent(".t-input-group").addClass('mywhatsapp inputblock').hide();
 $('input[name="mytelegram"]').parent(".t-input-block").parent(".t-input-group").addClass('mytelegram inputblock').hide();
 $('input[name="myvk"]').parent(".t-input-block").parent(".t-input-group").addClass('myvk inputblock').hide();
 $('input[name="myemail"]').parent(".t-input-block").parent(".t-input-group").addClass('myemail inputblock').hide();
 $('input[name="myviber"]').parent(".t-input-block").parent(".t-input-group").addClass('myviber inputblock').hide();
 
  
 setTimeout(function() {
      
     
    $('.inputblock input').removeAttr('data-tilda-req'); 
    $('.inputblock:eq(0) input:last').attr('data-tilda-req','1');
    
    
    
 }, 2000);
 
//При нажатии на кнопку переключателя
 $('.toggle-grid .toggle__btn').click(function() {
//Удаляем класс у активной кнопки
 $('.toggle__btn').removeClass('toggle__btn_active');
//Добавляем класс к нажатой кнопке
 $(this).addClass('toggle__btn_active');
//Вычисляем порядковый номер кнопки  
 number = $(".toggle__btn").index(this);
//Скываем поля ввода онтактов
 $('.inputblock').hide();
//Показываем нужное поле для нажатой кнопки
 $('.inputblock:eq('+number+')').show();
 

     $('.inputblock input').removeAttr('data-tilda-req'); 
     $('.inputblock:eq('+number+') input:last').attr('data-tilda-req','1');
 
 
 });
   
});
</script>
5

<style>
    .t696__content {
    padding: 31px 45px 39px !important;
}
    .t696__text-wrapper {
    margin-bottom: 6px !important;
}
   .inputblock {
    float: left;
    width: 50%;
}
  .t696 .t-form__submit {
    margin-top: 55px  !important;
}  
   .t696__form-bottom-text {
    clear: both;
}

   .t696__form-bottom-text div {
    font-size: 10px   !important;
    opacity: 0.6   !important;
}

  @media screen and (max-width: 640px){
 .inputblock {
    float: none;
    width: 100%;
}
   .t696 .t-form__submit {
    margin-top: 35px  !important;
}  }

.t-form__successbox {
    background: #ffcfd9 !important;
    border-radius: 30px;
}
.t-form__errorbox-middle {
    display: none;
}

</style>
Телефон
WhatsApp
Telegram
Вконтакте
E-mail
Viber
Made on
Tilda