Вкусные лепёшки из тандыра!
Запишись на бесплатный 2-х часовой мастер-класс с практикой
Studio Headphones
SKU: 700.954.29
100
р.
When we first checked out our new headphones, we noticed the box said 'improved bass by cool. We had to wonder, is this marketing jargon, or the real thing? But it only took a moment to realize that bass was not kidding.
Click to order
Cart
Total: 
Your Name
Your Phone
Your Phone
Payment method
Первый урок бесплатно!
Выберите удобный способ связи, менеджер свяжется и объяснит детали:
Введите Ваше имя:
Введите номер телефона
Введите Ваш номер WhatsApp:
Введите логин или номер Telegram:
Введите Вашу ссылку Вконтакте:
Введите контактный e-mail:
Введите Ваш номер Viber:
Нажимая на кнопку "Записаться на урок" Вы соглашаетесь с политикой конфиденциальности этого сайта

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

Пример выполнен на базе блока BF310N

Как выполнили данный пример:

1. Добавили на страницу блок BF310N
2. Добавили в него 7 полей с именами переменных:
- Имя ---
- Телефон - myphone
- Телефон - mywhatsapp
- Поле в одну строку - mytelegram
- Поле в одну строку - myvk
- E-mail - myemail
- Телефон - myviber
3. Все поля обязательные для заполнения
4. Добавили коды на страницу
(вставляется в блок ДРУГОЕ►Т123)
СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём форму из примера
2. Добавляем несколько форм
3. Меняем визуальные настройки кнопок
4. Уменьшаем количество способов связи
5. Добавляем выбор связи в корзину

Создаём в форме кнопки выбора связи с различными полями
Длительность видео: 31 мин
Подписка к видеоинструкции на платной основе
Фрагмент видео

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://clck.ru/Eqf9e) !important;
}
/*Телефон серый*/
 .toggle__btn[data-name="tel"] span:before {
    background-image: url(https://clck.ru/EqfAN);
}
/*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://clck.ru/EqfCh) !important;
}
/*WA зелёный*/
 .toggle__btn[data-name="wapp"] span:before {
    background-image: url(https://clck.ru/EqfDP);
}

/*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://clck.ru/EqfEr) !important;
}
/*TG синий*/
 .toggle__btn[data-name="tele"] span:before {
    background-image: url(https://clck.ru/EqfGK);
}

/*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://clck.ru/EqfKK) !important;
}
/*VK синий*/
 .toggle__btn[data-name="vk"] span:before {
    background-image: url(https://clck.ru/EqfKR);
}

/*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://clck.ru/EqfMU) !important;
}
/*EMAIL красный*/
 .toggle__btn[data-name="mail"] span:before {
    background-image: url(https://clck.ru/EqfMb);
}

/*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://clck.ru/EqfPo) !important;
}
/*Viber фиолетовый*/
 .toggle__btn[data-name="viber"] span:before {
    background-image: url(https://clck.ru/EqfQ8);
}


</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();
 
//Убираем проверку полей
 $('.inputblock .t-input').removeClass('js-tilda-rule');
//Добавляем проверку полей
 $('.inputblock:eq(0) .t-input').addClass('js-tilda-rule');

//При нажатии на кнопку переключателя
 $('.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 .t-input , .inputblock .js-phonemask-result').removeClass('js-tilda-rule');
//Добавляем проверку полей
 $('.inputblock:eq('+number+') .t-input , .inputblock:eq('+number+') .js-phonemask-result').addClass('js-tilda-rule');
});
  
});
</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