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

[mystixx]

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



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

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

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

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

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

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

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

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

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

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

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

Отправить форму
На этом настройка окончена. Вы расстроены?
Как работает

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

Код прост. Сначала подключается чтение из 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 }); }); })(); Демо и скачать




На десерт

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

Click to view

Блог Назара Токаря
Читайте в блоге: http://dedushka.org/uroki/5822.html