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

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

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

Но что, если ваше поле имеет гораздо больше полей, чем 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, выпадающих списков и других элементов формы. С более подробной инструкцией и дополнительным функционалом можете ознакомится на страничке проекта.

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 7

  1. Сергей

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

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

    • dimadv7

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

  2. Сергей

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

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

    • dimadv7

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

  3. Сергей

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

    • dimadv7

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

  4. Сергей

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

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

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