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

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

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

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

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

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

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

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

Настройка

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

<script type='text/javascript' src='http://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
 });
 });
})();

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

На десерт

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

    Отправить ответ

    30 Комментарий на "Не терять форму: скрипт сохранения данных в текстовых полях"

    Уведомлять
    avatar
    5000
    Раф
    Гость

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

    Роман
    Гость

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

    Роман
    Гость

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

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

    Андрей
    Гость

    Здравствуйте.
    А возможно этот скрипт прикрутить к переносу заполненного поля из одной формы в другую?
    Т.е. имеется форма заказа товара, где пользователь заполняет поля почта/имя/телефон, делает заказ.
    После этого он попадает на страницу оплаты товара (форма от яндекс.кассы) с полями почта/имя/телефон.
    Как сделать что бы поля на форме оплаты были уже заполнены?

    Евгений
    Гость

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

    Малкин Данил
    Гость

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

    Алекс
    Гость

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

    Pavel
    Гость

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

    Pavel
    Гость

    @Назар Токарь, Почемуто у меня не сохраняется….заполняю перехожу в другой товар и опять заполнять приходится. Может я что то не так подключил???…хотя и смс и на почту все приходит и работает вроде все как надо, за исключением того что заголовок не цепляет пишет “оформление заказа undefined” вот сайт

    Pavel
    Гость

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

    Макс
    Гость

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

    Макс
    Гость

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

    Макс
    Гость

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

    Макс
    Гость

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

    Макс
    Гость

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

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

    Макс
    Гость

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

    wpDiscuz