Назар Токар
Опубліковано: 14 Березня 2014
Оновлено: 4 Травня 2017

UPD 2014-04-27: скрипт проверяет, указаны ли значения полей в html. Если да, то эти поля не меняет.

Часто бывает так, что заполненная на вашем сайте форма остается неподтвержденной. Например, пользователь мог случайно обновить страницу, закрыть окно или уйти со страницы. Вернувшись, он обнаруживает пустую форму. Далеко не каждый готов заполнять все по второму кругу и в итоге пользователь уходит оформлять заказ на другой сайт. Великую человеческую лень еще никто не отменял. Заполнить новую форму на другом сайте покажется проще, чем повторно заполнять вашу.

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

Как это работает

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

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

Одинаково сохраняются данные как из текстовых полей, так и текстовых блоков (textarea).

Если кому интересны технические подробности, то для сохранения и чтения данных будет использоваться плагин jQuery Storage (автор Dave Schindler). Скачайте его отсюда и не забудьте подключить.

Настройка

Файл ntsaveforms.js загружаете в любое место на ftp и подключайте оттуда. Убедитесь, что у вас подключен jQuery версии не старее 1.7. Если его нет, подключите:

<script type='text/javascript' src='https://code.jquery.com/jquery-latest.min.js'></script>

Для начала нужно указать, какие именно поля нужно сохранять и заполнять автоматически. Для этого добавим им класс ntSaveForms. Например, текстовое поле будет выглядеть так:

<input type="text" class="yourClass... ntSaveForms" value="" placeholder="Укажите ваше имя">

Далее, в самый конец кода, перед </body> подключаем скрипт:

<script type='text/javascript' src='/ntsaveforms.js'></script>

Стирание данных

В том случае, если форма заполнена и подтверждена, данные больше не нужны и их нужно стереть. Чтобы удалить все записи скрипта, добавьте кнопке подтверждения формы класс ntSaveFormsSubmit. При клике по этой кнопке сохраненные в cookies данные будут стерты. На действие кнопки это никак не повлияет. Пример такой кнопки:

<button class="ntSaveFormsSubmit" type="submit">Отправить форму</button>

На этом настройка окончена. Вы расстроены?

Как работает

Обратите внимание: поля будут автоматически заполняться при загрузке страницы. Это значит, что формы или отдельные поля, которые будут динамически создаваться после загрузки, заполнены не будут. Это вряд ли вам помешает, но знание — по-прежнему сила, имейте ввиду.

Код прост. Сначала подключается чтение из cookies и далее сам скрипт:

(function ntSaveForms() {
 var text, cl;
 $(".ntSaveForms").each(function(i) {
 cl = "ntSaveForms"+i;
 $(this).addClass(cl); // add new class
 text = $.Storage.get(cl);
 if (text && text.length > 0 && !$(this).val()) {
 $(this).val(text); // set field data
 }
 });

$(".ntSaveForms").keyup(function() {
 $.Storage.set($(this).attr("class").split(" ")[$(this).attr("class").split(" ").length -1], $(this).val()); // save field data
 });

$(".ntSaveFormsSubmit").click(function() {
 $(".ntSaveForms").each(function(i) {
 $.Storage.remove("ntSaveForms"+i); // remove data
 });
 });
})();

Демо и скачать

На десерт

Не забывайте, скоро лето, надо держать себя в форме. Если не для того, чтобы щеголять на пляже, то хотя бы для того, чтобы не потребовались советы Винни Джонса. Оставьте поцелуи для девочек, делаем массаж сердца.

← Тисни «Лайк», щоб читати нас у Фейсбуці
Tokar_ua Будьте в курсі. Долучайтесь до нашого каналу в Telegram.

    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    30 коментарів

    спочатку нові
    за рейтингом спочатку нові за хронологією

    А можете новичку объяснить по шагам, что и куда вставляется, в какой файл, если это вордпресс и подойдет ли для вукомерца? А то что-то затрудняюсь.

    А проблема с сохранением данных из автозаполнения только у меня???

    Или скрипт сохраняет только первый символ при подстановке.

    Автор
    Назар Токар

    @Роман, на рабочем магазине сохраняются всем поля, например.

    @Назар Токарь, поля то все, но вот если заполняешь его вручную то да.

    А если выбираешь из подсказки браузера то нет.

    Например начинаю вводить свое имя: Р - мне браузер предлагает выбрать Роман я выбираю, обновляю страницу и в поле только буква Р.

    Автор
    Назар Токар

    @Роман, это потому что сохранение происходит на событие keyup, вы можете поменять его на change, чтобы и автозаполнение учитывалось.

    Здравствуйте.

    А возможно этот скрипт прикрутить к переносу заполненного поля из одной формы в другую?

    Т.е. имеется форма заказа товара, где пользователь заполняет поля почта/имя/телефон, делает заказ.

    После этого он попадает на страницу оплаты товара (форма от яндекс.кассы) с полями почта/имя/телефон.

    Как сделать что бы поля на форме оплаты были уже заполнены?

    Автор
    Назар Токар

    @Андрей, сохраняйте данные в localStorage и при загрузке следующей формы заполняйте её данными из него.

    Здравствуйте!

    Интересует скрипт на заказ: надо передавать данные из формы обратной связи на сайте, в CRM для дальнейшей обработки (автоматическое создание нового контрагента). Также на основе формы для отзывов создать что-то вроде гостевой книги и подключить программу лояльности. Оставление отзыва, по замыслу, является одним из условий подключения к программе лояльности... Возможно?

    Автор
    Назар Токар

    @Евгений, я не беру работу на заказ сейчас, а так конечно да. Может, кто-то из читателей возьмется.

    Малкин Данил

    К сожалению, данный скрипт работает только с полями text и textarea. С select'ами уже не работает.

    Автор
    Назар Токар

    @Малкин Данил, ну да, он для текстовых полей и блоков.

    Как сделать так, что бы сохранение данных работало и с заполнеными формами value="..."?

    Автор
    Назар Токар

    Если вы указали value="", то оно останется таким же после перезагрузки :)

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

    Автор
    Назар Токар

    @Pavel, данные в форме buyme и так сохраняются самим buyme, повторно заполнять не надо.

    @Назар Токарь, Почемуто у меня не сохраняется....заполняю перехожу в другой товар и опять заполнять приходится. Может я что то не так подключил???...хотя и смс и на почту все приходит и работает вроде все как надо, за исключением того что заголовок не цепляет пишет "оформление заказа undefined" http://kerama-plitka-samara.ru" rel="nofollow">вот сайт

    Автор
    Назар Токар

    @Pavel, может, выключены cookies, данные хранятся там.

    @Назар Токарь, cookies включены, пробовал с разных браузеров и устройств(((

    Автор
    Назар Токар

    @Pavel, я мог ошибиться, попробуйте подключить этот скрипт. Только подключите также jquery.storage.

    Рано радовался. При редактировании созданного объявления поля с информацией пустые, т. к. за добавление и редактирования объявления отвечает одна и та же форма/шаблон ((

    Автор
    Назар Токар

    @Макс, так а зачем в редактировании формы вставлять сохранение набранных данных? Сохранение актуально при заполнении пустых форм.

    @Назар Токарь, я вначале так и рассчитывал, что при добавлении объявления человек может случайно выйти со страницы и повторно ему уже не захочется набирать текс объявы. Поэтому и прикрутил ваш скрипт. Но забыл учесть возможность редактирования созданного объявления. Дело в том что для создания и редактирования объявления используется одна форма. В таких случаях, на сколько я понимаю, данный скрипт не подходит.

    Автор
    Назар Токар

    @Макс, в таком случае можно проверять, записано ли что-то для этого поля. Я обновил скрипт, перезакачайте.

    @Назар Токарь, спасибо! Заменил, протестировал, работает!

    В Яндекс.Браузере при нажатии ссылки Очистить все данные форм - данные не очищаются.

    Автор
    Назар Токар

    @Макс, после удаления обновите страницу. Если данные сохраняются, то и удаляются, после обновления само собой. Проверьте, чтобы cookies были включены.

    @Назар Токарь, спасибо, действительно после удаления нужно обновить страницу.
    Т. е. если кнопке назначено действие редиректа или обновления страницы, то скрипт должен работать...

    Пойду пробовать на рабочем сайте :)

    Автор
    Назар Токар

    @Макс, при подтверждении заказа, например кнопка "Купить" ваш магазин сохраняет заказ и отправляет вас не страницу с уведомлением. Если бы мой скрипт при очищении данных обновлял страницу, то заказ не оформлялся бы. Данные сохраняются и стираются без ведома пользователя. Это важно.

    @Назар Токарь, спасибо попробовал ваш скрипт на доске объявлений. Работает.

    Автор
    Назар Токар

    @Макс, рад что понравился. Сам его на мебельном магазине опробовал сначала.