Callback функция и центрирование веб-формы

Добрый день.

К нам довольно-таки часто обращаются пользователи с вопросом: «Как отцентрировать веб-форму на странице своего сайта». Обычно для этого достаточно прописать несколько CSS правил, но так как не все пользователи в этом разбираются, мы решили добавить дополнительный параметр в код вызова формы.

По умолчанию, форма выравнивается по левому краю. Для того, чтобы выровнять форму по центру страницы, необходимо добавить параметр: center: 1. Вот как будет выглядеть код вызова формы:

<div id="form_{ID}_1"></div>
<script type="text/javascript">
(function (d, w, c) {
    (w[c] = w[c] || []).push({
        formId: {ID},
        host:"formdesigner.ru",
        formHeight:1108,
        el: "form_{ID}_1",
        center:  1
    });

    var s = d.createElement("script"), g = "getElementsByTagName";                
    s.type = "text/javascript"; s.charset="UTF-8"; s.async = false;
    s.src = (d.location.protocol == "https:" ? "https:" : "http:")+"//formdesigner.ru/js/iform.js";
    var h=d[g]("head")[0] || d[g]("body")[0];
    h.appendChild(s);
})(document, window, "fdforms");
</script>

Установив это параметр, форма будет выравниваться по центру страницы.

Кроме этого мы добавили еще один параметр – это callback функция, которая вызывается после успешного заполнения формы.

Для чего это нужно?

Данный функционал существенно расширяет возможности форм. Теперь вы можете после успешного заполнения формы выполнить произвольный javascript-код на странице своего сайта. Например, показывать тот или иной элемент на странице своего сайта, или же наоборот скрывать часть контента. Если вы используете всплывающее окно, для вывода формы, то можно после успешного заполнения формы закрывать это окно.

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

Вот как будет выглядеть код вызова формы с этим параметром:

<div id="form_{ID}_1"></div>
<script type="text/javascript">
(function (d, w, c) {
    (w[c] = w[c] || []).push({
        formId: {ID},
        host:"formdesigner.ru",
        formHeight:1108,
        el: "form_{ID}_1",
        center:  1,
        callback: function(){
            alert('Форма отправлена!');
        }
    });

    var s = d.createElement("script"), g = "getElementsByTagName";                
    s.type = "text/javascript"; s.charset="UTF-8"; s.async = false;
    s.src = (d.location.protocol == "https:" ? "https:" : "http:")+"//formdesigner.ru/js/iform.js";
    var h=d[g]("head")[0] || d[g]("body")[0];
    h.appendChild(s);
})(document, window, "fdforms");
</script>

Для всплывающего окна, код будет выглядеть следующим образом:

<script type="text/javascript" src="http://formdesigner.ru/js/widgets/popup.js"></script>
<a target="_blank" onclick="FDPopup.open({ID}, {'hideCloseBtn':false,'host':'formdesigner.ru','overlay':{'background':'#000000','opacity':0.1}, callback: function(){this.close()}}); return false;" href="http://formdesigner.ru/form/view/{ID}">Обратная связь</a>

Данный код будет закрывать всплывающее окно, после успешной отправки формы. Это достигается за счет вызова метода close:

callback: function(){this.close()}

На сегодня это все! Ждем ваших комментариев!

Комментарии
Готовые шаблоны веб-форм
Free

Шаблон для определения индекса потребительской лояльности (NPS)

С помощью этого шаблона можно создать опрос для определения индекса потребительской лояльности, рассчитать его и получить контекст ваших результатов. Подробнее
Platinum

Какой цвет волос подходит твоей душе?

Для магазинов косметики и парфюмерии, салонов красоты, СМИ, тематических блогов и соцстраниц. Узнай, какой цвет волос действительно подходит твоему внутреннему «я». Чтобы изменить жизнь, иногда достаточно просто перекрасить волосы.
$5.00
Подробнее
Platinum

Какой шампунь и кондиционер лучше всего подходят для ваших волос?

Квиз для выбора средств по уходу за волосами для магазинов косметики и парфюмерии,салонов красоты,тематических блогов и соцстраниц.
$5.00
Подробнее
Free

Заявка на курсы вождения автомобиля

Выберите необходимые курсы в автошколе, оформив заявку и менеджер свяжется для подтверждения выбранного курса Подробнее

Закажите разработку формы под ключ

Нет времени разбираться со всеми настройками самому? Не проблема!
Закажите разработку веб-формы у нас