Скрипты для uKit 31.07.2017 7 944
Горизонтальная форма обратной связи

Горизонтальная форма обратной связи

Каждому владельцу сайта важно мнение посетителей или информация от посетителей. Взгляд со стороны в вопросах удобства сайта, полезности информации, оформления заказа и т.п. Именно поэтому не стоит пренебрегать установкой формы обратной связи.

Мы считаем, что у разработчика сайта должна быть свобода выбора, когда дело касается внешнего вида Интернет-страницы. Ввиду того, что в стандартной форме обратной связи возможно исключительно вертикальное отображение полей, что делает форму громоздкой для сайта, мы создали скрипт для горизонтального, более компактного отображения формы.

Наш скрипт позволяет каждому разработчику адаптировать форму для своего сайта с тем, чтобы она максимально эргономично отображалась на сайте.

В настройках присутствуют дополнительные параметры для видоизменения формы. Настройте и используйте обновлённую форму обратной связи для взаимодействия с клиентами без ущерба внешнему виду своего сайта!

 



Установка

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
 

Код
<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 за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 7
avatar
1
А как присвоить скрипт к определенному блоку только?
avatar
0
2
Не предусмотрено. Только если переделывать решение.
avatar
0
3
На самом деле возможно применить скрипт только для определенного блока, для этого в строке:
Цитата
// Идем по формам, собирать поля

 Нужно вписать ID нужного блока, например:   
Код
$('#ul-id-298-11 form').each(function(i){
avatar
4
Здравствуйте, не подскажете как можно убрать прозрачность полей?
avatar
0
5
У разных шаблонов это редактируется по разному, если вы создадите специальную тему на форуме: https://ukit.top/forum/ с ссылкой на ваш элемент, то мы предоставим вам код для редактирования полей на вашем шаблоне
avatar
6
спасибо за скрипт! а не думали над тем, чтобы можно было сделать кнопку "отправить" не по левому краю как во всех стандартных формах, а по центру? к горизонтальной форме было бы очень кстати. Либо чтобы кнопка была в один ряд вместе с полями. Это довольно популярное решение на многих интернет-ресурсах.
avatar
0
7
Чтобы изменить кнопку, скрипт не нужен. Для этого используются CSS-стили и для разных шаблонов нужны индивидуальные стили.
avatar