Универсальный шаблон 1.5!

6 новых секций: наши услуги и преимущества, компактный слайдер изображений, CTA с фоновым изображением, отзывы и наша команда!

Подробнее

Универсальный шаблон

Удобный шаблон для создания lading page, корпоративного сайта, сайта-портфолио, блога или фото-галереи

Подробнее

Универсальный шаблон

Удобный шаблон для создания lading page, корпоративного сайта, сайта-портфолио, блога или фото-галереи

Подробнее

Универсальный шаблон

Удобный шаблон для создания lading page, корпоративного сайта, сайта-портфолио, блога или фото-галереи

Подробнее

Как настроить обратную связь на сайте Webasyst

В связи с большим количеством вопросов о настройке формы обратной связи на сайте мы решили написать небольшую статью на эту тему.

1) Стандартная форма обратной связи от Вебасист.

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

В обновлении 1.5.5 форма обратной связи стала работать без перезагрузки страницы. Так же появилась возможно заменить поле Сообщение полем Телефон, и скрыть поле Email.

Добавление дополнительных полей в форму невозможно. Для этого используйте стороннее приложение Мультиформы.

И не забудьте настроить почту администратора в приложении Инсталлер. На эту почту будут приходить сообщения из формы обратной связи!

* Форма обратной связи без перезагрузки корректно работает в том случае, если приложение Сайт является главным приложением во Фреймворке.


2) Сторонняя форма обратной связи. Приложение Multiform (Веб-формы)

Посмотреть как работает данная форма обратной связи можно на нашем сайте: Easyweb

О настройке самого приложения Веб-формы можно прочитать на странице его документации по ссылке выше. Я лишь опишу настройку данного приложения именно под Универсальный шаблон.

Код стандартной формы обратной связи расположен в файле index.html шаблона и заключен между {if $theme_settings.header_button_popover}...{/if}

Вам необходимо будет заменить стандартный код на этот:

{if $theme_settings.header_button_popover}
<script type="text/javascript" src="{$wa_static_url}wa-content/js/jquery-wa/wa.dialog.js" type="text/javascript"></script>
<div id="feedback-dialog" class="dialog">
    <div class="dialog-background cancel"></div>
    <div class="dialog-window">
        <div class="dialog-body">
            <div class="dialog-buttons"><i class="fa fa-times dialog-close cancel"></i></div>
                <h4 class="section-header">Мы Вам перезвоним!</h4>
                {$wa->multiform->form('feedback')}
                <script>    
                    $('form.contact-section .multiform-gap-field').each(function(index, element){
                        var placeholder = $(element).find('.multiform-gap-name label').text();
                        var icon = $(element).hasClass('user') ? 'fa-user' : $(element).hasClass('phone') ? 'fa-phone' : $(element).hasClass('rub') ? 'fa-rub' : 'fa-envelope-o';
                        $(element).find('.multiform-gap-value input').addClass('name plain buffer').attr('placeholder',placeholder);
                        $(element).find('.multiform-gap-value').prepend('<span class="pre-input"><i class="fa '+icon+'"></i></span>');
                        console.log(placeholder);
                    });
                    var pageFrom = $('.page__from input');
                    if (pageFrom.length) {
                        var pageUrl = document.location.href;
                        pageFrom.val(pageUrl);
                    }
                    $('.multiform-submit input').addClass('button red');
                </script>
        </div>
    </div>
</div>
{/if}

{$wa->multiform->form('feedback')} - поменяйте на код для вывода Вашей формы

Теперь нужно внести дополнительные настройки в приложение Веб-формы.

Для этого перейдите в приложение Веб-формы, откройте настройки нужной формы обратной связи, найдите там поле "CSS класс формы" и добавьте туда значение "contact-section".

Для добавление иконок в поле ввода необходимо открыть настроку полей в приложении и добавить в поле "css класс" класс иконки из fontsawesome без fa префикса. Например, если иконки телефона имеет класс fa-phone, то добавьте просто phone. Сейчас скрипт будет проставлять только иконки fa-user, fa-phone, fa-rub и fa-envelope-o (данная иконки проставляется всем полям, которым не прописан класс). В дальнейшем мы обновим скрипт и он будет поддерживать все иконки FontAwesome.

Так же можно создать скрытое текстовое поле с классом "page__from", тогда в данное поле будет автоматически подставляться ссылка страницы, с которой отправлено сообщение.

Чтобы скрыть данное поле добавьте этот код в default.css:

.page__from {
    display: none;
}

Теперь у Вас есть удобная форма обратной связи для Универсального шаблона. Надеюсь данная статья будет полезна покупателям.

По всем вопросам, замечаниям и ошибкам пишите на support@easyweb.su

Форма обратной связи

Данная форма создана при помощи приложения "Форма обратной связи". Вы можете получить на него скидку при покупке шаблона. За дополнительной информацией пишите на support@easyweb.su