Вкусные лепёшки из тандыра!
Запишись на бесплатный 2-х часовой мастер-класс с практикой
Первый урок бесплатно!
Выберите удобный способ связи, менеджер свяжется и объяснит детали:
Введите Ваше имя:
Введите номер телефона
Введите Ваш номер 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').removeClass('js-tilda-rule');
//Добавляем проверку полей
 $('.inputblock:eq('+number+') .t-input').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