У большинства из нас есть хотя бы одна форма где-то на нашем сайте WordPress.
Это может быть простая контактная форма. Или подписка на рассылку. Форма покупки может быть. Или, может быть, что-то на заказ.
Какую бы информацию ни собирала ваша форма, я готов поспорить, что вы хотите, чтобы как можно больше людей заполнили ее и нажали кнопку «Отправить». Вы не хотите, чтобы люди сдавались на полпути или вообще никогда не находили форму.
В этой статье я собираюсь дать вам несколько советов по добавлению форм на ваш сайт, которые на самом деле заполняются. Я собираюсь рассказать:
- Код: как создавать формы, которые являются доступными и отзывчивыми, с правильным кодом, который обеспечивает их правильную работу.
- Пользовательский опыт: как улучшить дизайн ваших форм, чтобы их было легче заполнять.
По мере продвижения я приведу несколько примеров хороших форм, которые работают хорошо и удобно для пользователя, и укажу на некоторые ресурсы, которые вы можете использовать, чтобы помочь.
-
Создайте контактную форму в WordPress, используя бесплатный плагин
-
Выберите конструктор форм: сравнение 7 лучших компоновщиков форм WordPress
-
Лучшие плагины контактной формы WordPress
-
Используйте конструктор форм Drag-and-Drop для WordPress
Итак, начнем с кода.
Хорошо закодированные формы
Скорее всего, вы не кодируете формы прямо на свой сайт. Вы, вероятно, используете плагин.
Поэтому важно установить плагин, который выводит чистый, доступный и отзывчивый код, который не оказывает негативного влияния на то, как ваша форма отображается или работает.
Когда вы установили свой плагин и создали свою первую форму с его помощью, я рекомендую посетить форму на вашем сайте (как на настольном компьютере, так и на мобильном устройстве) и изучить код, который его запускает.
Хорошо закодированная форма будет:
- Используйте правильные элементы для полей формы и меток.
- Дизайн вывода формы должен быть в том же порядке, что и код.
- Будьте отзывчивы, чтобы он одинаково хорошо работал на всех экранах.
- Можно использовать без мыши: при переходе по полям с помощью клавиатуры пользователь будет перемещаться по полям в правильном порядке.
- Легко взаимодействовать на экранах любого размера с помощью мыши, клавиатуры или большого пальца.
Проверьте свою форму на разных устройствах и размерах экрана и убедитесь, что код использует правильные элементы HTML и ничего не добавляет. Запустите его через инструмент проверки, чтобы убедиться в отсутствии проблем.
Если вы обнаружите незначительные проблемы, вы можете исправить их в настройках вашей формы. Для серьезных проблем, вам может понадобиться найти другой плагин форм .
-
Лучшие плагины контактной формы WordPress
-
Лучшие плагины WordPress Form Builder для 2019
И если ваш плагин для конструктора форм дал вам форму, которая не отвечает, вам определенно нужен новый плагин. Большинство посетителей веб-сайта теперь на мобильном телефоне, и если ваши формы не отвечают, они не будут заполнять их.
Регистрационная форма для Envato Elements разработана таким образом, чтобы она одинаково хорошо работала на настольных компьютерах или мобильных устройствах, а дизайн и контент между ними не менялись.
UX в дизайне форм
Дизайн формы и то, насколько легко с ней взаимодействовать, окажут огромное влияние на то, как часто она заполняется. Чтобы максимально увеличить вероятность того, что как можно больше людей попадут на кнопку отправки, вам лучше всего использовать UX. практика. Вот несколько вещей, которые вы можете сделать, чтобы улучшить свои формы.
Ограничить количество полей
Формы требуют времени для заполнения, и вы хотите уменьшить это. Вы также хотите, чтобы люди не чувствовали, что вы нарушаете их конфиденциальность. Недавно я попытался получить доступ к общедоступному Wi-Fi, который требовал от меня предоставить не только мой адрес электронной почты, но также номер телефона, почтовый адрес и дату рождения. Излишне говорить, что я подключен к другой сети WiFi!
Сайт HubSpot предоставляет бесплатное руководство по конверсии сайта в обмен на ваш адрес электронной почты. Однако, когда вы нажимаете на ссылку для скачивания, вам предоставляется форма, запрашивающая у вас гораздо больше информации, чем требуется для отправки вам руководства.
Я бы скачал руководство и был бы счастлив получить их новостную рассылку, но я не хотел предоставлять всю эту информацию, поэтому я не заполнил форму. Это преобразование потеряно.
В отличие от этого, сайт Kickstarter запрашивает только ваше имя, адрес электронной почты и пароль, когда вы регистрируетесь с ними. Это все, что им нужно, так что это все, что они просят.
Укажите, какую информацию вам нужно, чтобы иметь возможность ответить кому-то, кто заполняет вашу форму. Это может быть не более чем их имя и адрес электронной почты или номер телефона. Для подписки на рассылку вам нужен только их адрес электронной почты. Придерживайтесь минимума: вы всегда можете попросить больше позже, если вам это нужно.
Разделить длинные формы
Если ваша форма должна быть длинной, потому что вам действительно нужно больше информации, рассмотрите возможность ее разделения на несколько вкладок или страниц. Таким образом, пользователь не будет загружен полями при первом обращении к форме.
Если вы зарегистрируетесь на премию Герцога Эдинбургского в Великобритании, которая присуждается молодым людям за физические, психические и социальные проблемы, вам действительно необходимо предоставить много информации. Форма была разделена на пять частей, чтобы сделать ее менее сложной.
Макет формы
Читателям легче сканировать форму, если текст находится над полями. Таким образом, глаз притягивается к форме, не перемещаясь из стороны в сторону. И форма будет одинаково хорошо работать на компьютере или на мобильном телефоне.
Регистрационная форма Envato Elements делает это, чтобы направить взгляд на форму. Он также включает в себя не более обязательных полей.
Поля формы также должны быть понятны и полезны. Избегайте жаргонных или нестандартных описаний полей. Имя и адрес электронной почты достаточно.
Призыв к действию
Четкий призыв к действию даст пользователям стимул для заполнения формы. Если ясно, что заполнение этой формы выгодно для них, или действие, которое она вызовет, не вызывает сомнений, то они с большей вероятностью дойдут до кнопки отправки.
Unbounce провел A / B-тестирование в регистрационной форме для Betting Expert и обнаружил, что улучшенный призыв к действию увеличил конверсию более чем на 30%.
«Get Free Betting Tips» превзошла «Join Betting Expert», потому что она дала людям четкую причину подписки, с выгодой для них.
При разработке вашего призыва к действию представьте настроение посетителя и то, что он ищет, когда они заполняют вашу форму. Забудьте о преимуществах для вашего бизнеса и сформулируйте, что они получат от этого.
И если ваш плагин форм позволяет это (и хороший), отредактируйте кнопку отправки так, чтобы это был призыв к действию.
Не спрашивайте информацию об оплате, если она вам не нужна
Выше я упомянул сеть WiFi, которая требовала информацию, которую я считал неактуальной. Другая часть информации, с которой люди не хотят расстаться, если это не нужно, это номер их кредитной карты.
Если вы предлагаете бесплатную пробную версию, не спрашивайте номер кредитной карты при регистрации. Вместо этого дайте посетителю причину остаться с вами после этого первого месяца (или недели, или того, что вы предлагаете), а затем получите детали платежа.
Сайт Moz предлагает бесплатную пробную версию с простой формой и обязательством, которое я могу отменить в любое время, и обещание напомнить мне до окончания моей бесплатной пробной версии. Все идет нормально.
Но когда я прокручиваю вниз, меня спрашивают данные моей кредитной карты. Это заставляет меня предположить, что через месяц они автоматически начисляют мне деньги, и отговаривает меня от регистрации.
Теперь я не отрицаю, что Моз знает свое дело, когда дело доходит до SEO и конверсий, так что это может быть преднамеренной тактикой. Возможно, они обнаружили, что количество людей, бросивших учебу в течение бесплатного месяца, значительно больше, поэтому стоит потерять потенциальных подписчиков. Если то же самое относится и к вам, это нормально, но сначала обязательно сделайте анализ.
Использование условной логики
Использование условной логики в ваших формах может помочь сделать их не дольше, чем нужно.
Плагин хороших форм позволит вам отображать поля, основанные на ответе пользователя на более раннее поле, то есть эти поля не отображаются без необходимости.
-
Выберите конструктор форм: сравнение 7 лучших компоновщиков форм WordPress
-
Quform против FormCraft: Сравнение лучших плагинов WordPress Form Builder
Еще раз, будьте осторожны, решая, какие из этих полей будут отображаться, и показывайте их только тогда, когда они действительно необходимы.
Подтверждения формы и сообщения
После того, как пользователь нажал кнопку «Отправить», рекомендуется оставить отзыв, чтобы он знал, что он успешно заполнил форму.
Это может быть перенаправление на другую страницу с дополнительной информацией или сообщение на той же странице, где находилась форма. В любом случае, дайте понять, что пользователь успешно заполнил форму, и что вы им за это благодарны. Скажите им, что будет дальше, включая любые действия, которые они должны предпринять, такие как проверка электронной почты.
И когда вы получите форму заявки, следите за ними как можно скорее. В настоящее время я нахожусь в процессе переезда, и вчера я заполнил формы запроса веб-сайта с тремя фирмами удаления. Только один перезвонил мне — угадай, кто из них получит мой бизнес!
Сконфигурируйте свой плагин, чтобы уведомлять вас о каждой отправленной форме и сразу же следить за ним. Если вы можете, настройте автоответчик, используя вашу систему электронной почты или поставщика списков рассылки, чтобы они быстро что-то получали.
Если пользователь не заполнил форму правильно, и возникла ошибка, убедитесь, что любое сообщение об ошибке ясно и говорит ему, что ему нужно сделать. Не используйте оценочный текст и не будьте расплывчаты.
Когда я ввожу свое имя в поле адреса электронной почты в форме регистрации элементов Envato, это поле подсвечивается, и сообщение электронной почты является недействительным .
Это проясняет, в чем моя ошибка, так что я могу исправить ее.
Хороший дизайн формы увеличит конверсию
Правильный дизайн форм на вашем веб-сайте увеличит количество людей, которые заполняют их и нажимают кнопку «Отправить». Если вы убедитесь, что ваши формы хорошо закодированы, доступны и быстро реагируют, и вы разрабатываете их для хорошего пользовательского опыта, вы должны обнаружить, что они намного эффективнее.
-
WordPressСоздайте контактную форму в WordPress, используя бесплатный плагин
-
WordPressВыберите конструктор форм: сравнение 7 лучших компоновщиков форм WordPress
-
WordPressЛучшие плагины контактной формы WordPress
-
WordPressИспользуйте конструктор форм Drag-and-Drop для WordPress
Кроме того, если вы хотите использовать пользовательские плагины, но вам неудобно работать с серверами и предпочитаете, чтобы кто-то сделал все это за вас, рассмотрите возможность управляемого хостинга WordPress. Благодаря партнерству Envato с SiteGround вы можете получить до 60% скидки на управляемый хостинг WordPress .