Назар Токар
Опубліковано: 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. Програміст, адміністратор української Вікіпедії.
← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket
Обговорення

  1. Раф

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

  2. Роман

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

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

    2. Роман

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

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

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

  3. Андрей

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

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

  4. Евгений

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

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

  5. Малкин Данил

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

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

  6. Алекс

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

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

  7. Pavel

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

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

    2. Pavel

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

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

    4. Pavel

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

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

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

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

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

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

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

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

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

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

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

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

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

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