Мы считаем, что у разработчика сайта должна быть свобода выбора, когда дело касается внешнего вида Интернет-страницы. Ввиду того, что в стандартной форме обратной связи возможно исключительно вертикальное отображение полей, что делает форму громоздкой для сайта, мы создали скрипт для горизонтального, более компактного отображения формы.
Наш скрипт позволяет каждому разработчику адаптировать форму для своего сайта с тем, чтобы она максимально эргономично отображалась на сайте.
В настройках присутствуют дополнительные параметры для видоизменения формы. Настройте и используйте обновлённую форму обратной связи для взаимодействия с клиентами без ущерба внешнему виду своего сайта!
Установка
Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
Код
<script>
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){}else{
var hor_max_length = 2; // Максимальное кол-вл полей в горизонтали
require(['jquery'], function($){
// Идем по формам, собирать поля
$('form').each(function(i){
// идентификатор формы
var hor_th_form = 'hor_form'+i;
$(this).attr('hor-id', ''+hor_th_form+'');
// Кол-во полей
$('[hor-id="'+hor_th_form+'"] input').each(function(){
if($(this).attr('placeholder') != undefined) $(this).addClass('hor_line');
});
var hor_th_inputs = $('[hor-id="'+hor_th_form+'"] .hor_line').length;
// Создаем места для полей
var hor_div_kol = parseInt(hor_th_inputs/hor_max_length);
for(q = 0;q < hor_div_kol;q++){
$('[hor-id="'+hor_th_form+'"] .hor_line:eq(0)').parent().before('<div style="display:flex;" class="hor_poles"></div>');
}
// Идем по полям
var hor_th_mesto = 0, hor_p = 1;
$('[hor-id="'+hor_th_form+'"] .hor_line').each(function(){
var hor_th_pole = $(this).parent().clone().css({'width': '100%', 'margin': '0 10px 0 0'});
if(hor_p > hor_max_length){
hor_p = 1;
hor_th_mesto++;
}
if($('[hor-id="'+hor_th_form+'"] .hor_poles:eq('+hor_th_mesto+')').length > 0){
hor_th_pole.appendTo('[hor-id="'+hor_th_form+'"] .hor_poles:eq('+hor_th_mesto+')');
$(this).parent().remove();
}
hor_p++;
});
// Стиль
$('.hor_poles label').each(function(){
$(this).css({'padding':'0'});
});
$('.hor_poles').each(function(){
$(this).children('div:eq(-1)').css({'margin':'0'});
});
});
});
}
</script>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице:
blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (
скриншот).