Запоминание данных в форме

сохранение данных в формеВсем привет. Всех с прошедшим праздником ПОБЕДЫ. Сегодня хочу с вами поговорить, о такой "фишке" как автосохранение данных формы.

Для чего это нужно? Например, если пользователь ввел данные, жмет кнопку отправить, и у него по какой-то причине "отваливается" интернет. В таком случае ему придется заново вводить данные, если услуга действительно интересна.

Но что, если ваше поле имеет гораздо больше полей, чем e-mail, телефон и имя? Что если вы предложили оставить комментарий к заказу или у вас многошаговое заполнение формы? Наверняка многие из вас сталкивались с подобной проблемой и знают, как это раздражает. Иногда, запоминанием данных в форме пренебрегают в банковских сайтах, на форумах при заполнении аккаунта и т.д.

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

Если у вас подобная ситуация на лендинге, то рекомендую воспользоваться методом, о котором я расскажу дальше. Обещаю, что вы справитесь минут за пять, а людям, которые посещают ваш ресурс, станет удобнее им пользоваться.

Автосохранение данных формы

Итак, для того, чтобы реализовать автосохранение данных в форме, я предлагаю воспользоваться Garlic.js. Это такой чудо-скрипт, который при помощи data атрибута в форме, позволяет запоминать введенные данные. Работает следующим образом:

  • Подключаем библиотеку jQuery:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  • Подключаем Garlic.js, например, так:
    <script src="js/garlic.js"></script>
  • И в самой форме дописываем дата атрибут data-persist="garlic":
    <form data-persist="garlic"></form>

И все, теперь нервы ваших пользователей будут в порядке, а подключение скрипта занимает всего несколько минут. Главное не ленится и сделать. Запоминание данных осуществляется для checkbox, radiobutton, выпадающих списков и других элементов формы. С более подробной инструкцией и дополнительным функционалом можете ознакомится на страничке проекта.

А на сегодня - все. Пока. Еще раз с праздником :)

7 комментариев

  1. Сергей

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

    Не слышал о подобном?

    1. dimadv7

      Привет. Нет не слышал, но идея крутая. Не знаю насколько она понравится человеку, которому перезвонят :), но действительно может вернуть некоторых клиентов. Попробую тоже поискать))

  2. Сергей

    Если культурно поинтересоваться, то думаю человек нормально отреагирует :)
    Есть много полезных вещей, которые раздражают, но работают. Например попапы или некоторые товарные рассылки.
    Нужно золотую середину соблюдать :)

    А этот скрипт поставил, сделал, чтоб введенная однажды инфо никуда никогда не девалась. Круто для вернувшихся клиентов, так как на лендинге всего одно поле для телефона.
    Спасибо за крутой скрипт!

    1. dimadv7

      Если найдешь где-то скрипт такой, кинь ссылку пожалуйста. Статью напишу. Ведь действительно может пригодится :)

  3. Сергей

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

    1. dimadv7

      Как я понял, скрипт сохраняет данные в базу данных, а потом их уже от туда можно вытащить((( Я думал он сразу на почту их шлет. А вообще я немного не понимаю логики. Ну вот начал я вводить данные в поле, ввел 1 букву и передумал, скрипт что, сохранит это и перешлет мне - зачем?. Вообще нужно предусмотреть много условий, и мне кажется, что должно быть что-то сложнее. Нужно, чтобы обязательно было заполнено хотя бы одно из контактных полей. Чтобы поля не отправлялись автоматически а была проверка, нажал ли пользователь на кнопку отправить. И если он ушел, так и не нажав, но при этом вводил какие-то данные в поля, то только в таком случае приходило письмо.

  4. Сергей

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

    P.S. На почту не приходят оповещения о новых комментариях, хоть галочку вроде как ставил.

Добавить комментарий