Готовая контактная форма для Вашего сайта


Содержание

Простая контактная форма на PHP

Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!

Большое спасибо за вашу помощь и внимательность к нам!

Для какой бы цели не был создан сайт, думаю, он направлен на какую-нибудь аудиторию с которой необходимо организовать связь. В данном уроке как раз будет рассмотрен один из путей организации такой связи, а именно контактная форма.

Представленная форма обратной связи состоит всего из одного файла, за исключением файла со стилями, код которого разделяется на две части реализующих две функции:

  • html код — отвечает за отображение формы на странице;
  • php код — обрабатывает данные отправленные при помощи формы и отправляет эти данные на Ваш электронный адрес.

В первую очередь необходимо указать Ваш email, ведь именно на него будет отправляться сообщение пользователя Вашего сайта. Целевой email адрес хранится в переменной $to, которой он присваивается в следующей строке:

Следовательно, в этой строке Вам необходимо заменить электронный адрес adress@mail.com на необходимый.

Так же Вы можете поменять тему сообщения на более удобную для Вас. Тема сообщения содержится в переменной $subject, значение которой можно изменить по тому же принципу, что и адрес электронной почты.

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

где первая строка содержит сообщение об ошибке, а вторая об успешной отправке.

Ниже представлен css код, который использовался в примере этого урока, но Вы можете заменить его другим, тем самым подогнать внешний вид формы под уникальный дизайн Вашего сайта.

В общем, вот такая простая контактная форма у нас получилась с обработчиком на PHP. Кстати, если Вы захотите сделать ее более красивой и привлекательной, можете воспользоваться стильной формой обратной связи, которая также имеется у нас. На этом все, только положительных вам отзывов!

Создание формы обратной связи

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

Статья давно на сайте, но пришло время актуализировать ее, ведь с момента написания прошло более 5 лет, что-то устарело, за некоторые моменты откровенно стыдно, а что-то не так доходчиво разжевано.

С этого момента обновления статей буду делать максимально полными и подробными, чтобы вам не приходилось ничего искать на других ресурсах. Это статья, изначально, была ориентирована на форму с перебросом на страницу благодарности после нажатия кнопки «отправить».

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

Создание формы обратной связи – HTML разметка

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

Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.

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

В большинстве случаев, для создания формы обратной связи я использую такую разметку:

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

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

Под каждым полем создаю ‘div’ для вывода уведомлений об ошибках при валидации ‘.contact-form__error’.

Параметр ‘enctype’ в теге ‘form’ нужен для того, чтобы отправлять файл. Пока можете его не писать, но, если планируете сделать так, чтобы пользователь мог прикрепить вложение к письму, то нужно оставить все как есть.

Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу ‘body’, чтобы основной контент грузился быстрее.

Скрипт ‘mail.js’ — это файл формы, который помогает в отправке и обработке ответа сервера. О нем чуть позже. Сейчас нужно познакомить вас со структурой всех файлов, отвечающих за отправку.

Структура проекта

Здесь нас интересует папка ‘mail’. Именно тут и происходит вся магия.

Обратите внимание, что она лежит в корне сайта.

В первую очередь давайте разберем файл ‘config.php’. Тут задаются основные настройки формы.

Основные настройки формы

В принципе я объясняю комментариями в коде что и зачем, константы имеют интуитивно понятные имена, но давайте для новичков объясню все еще подробнее.

В начале идут константы, которые отвечают за проверку обязательно ли поле или нет и какое сообщение будет выводится в случае ошибки. Например, константы для имени

  • ‘const NAMEISREQUIRED = true;’ — означает, что поле обязательно для заполнения. Если в вашем случае его можно не заполнять, то поставьте ‘false’.
  • ‘const MSGSNAMEERROR = «Поле обязательно для заполнения»;’ — это сообщение, которое будет выводится пол полем, в случае если заполнение его обязательно, но по каким-то причинам пользователь этого не сделал.

То есть если имя обязательно, но не было заполнено, появиться сообщение ‘Поле обязательно для заполнения’. Вот так:

Далее идет константа с сообщением, которое увидит пользователь при успешной отправке, давайте, пока, реализуем такой функционал, а потом с перебросом на страницу благодарности.


Можете вывести любое сообщение, которое подходит в вашем случае.

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

  • Адрес сервера — ( константа HOST )
  • Логин (адрес электронной почты) — ( константа LOGIN )
  • Пароль — ( константа PASS )
  • Порт — ( константа PORT )

пароль и логин у каждого свои, а ‘HOST’ и ‘PORT’ для популярных почтовых сервисов я приведу в списке.

Сервис HOST PORT
Яндекс ssl://smtp.yandex.ru 465
Gmail smtp.gmail.com 465
Mail.ru ssl://smtp.mail.ru 465

Будьте внимательны с этими параметрами, так как тут легко сделать ошибку и ничего приходить не будет.

С остальным все проще, объяснять по сути и нечего:

Обратите внимание, что почта, указанная в ‘const SENDER’ должна совпадать с почтой, которую указали в ‘LOGIN’.

Валидация формы перед отправкой

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

Все вам понадобится дополнительная валидация, все это реализовано в файле ‘valid.php’.

Еще, я подумал, что было бы полезно сделать так, чтобы скрипт не отправлял данные, если не заполнено хотя бы одно из контактных полей. То есть телефон или email. Вот так я это реализовал.

Если вам это не нужно или у вас какой-то другой способ связи, поменяйте под свои нужды или удалите. Вот как это выглядит сейчас:

Отправка формы

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

Но еще раз напомню, что чуть ниже мы будем добавлять в форму и другие поля, а там изменяться и все эти файлы. Файлы phpmailer — это вспомогательная библиотека для правильной отправки данных на почту. Там ничего трогать нельзя.

Также, в отправке формы и валидацие участвует файл ‘mail.js’. Именно он помогает реализовать отправку без перезагрузки страницы. Тут тоже ничего менять не нужно, если вы не планируете использовать страницу благодарности, а вам достаточно того, что уведомление об успешной отправке выводится в форме.

На этом, в принципе, с основной формой можно заканчивать. Дальше будут только «навороты».

Если что-то упустил или что-то непонятно — пишите в комментариях, попробую объяснить подробнее или дополнить статью.

Форма обратной связи с основными полями

Стили специально не добавлял в статью, так как статья и так очень большая. В исходнике все есть.

Переброс на страницу благодарности

Как и говорил в начале статьи данная форма может работать как без перезагрузки, так и с перебросом на страницу благодарности. Давайте реализуем это. Нам понадобится немного подправить код в файле ‘mail.js’ и сама страница благодарности. На скриншоте со структурой проекта вы видели файл ‘thank-you-page.php’ — это и есть страница благодарности, которую я буду использовать. Как вы могли заметить, он лежит в корне. У вас она может быть где угодно, главное правильно указать к ней путь.

Итак, открываем файл ‘mail.js’, находим участок кода:

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

Делать мы это будем при помощи php, поэтому убедитесь, что страница благодарности у вас сохранена именно в этом формате.

Если у вас уже страница в ‘html’, просто измените расширение. Это никак не повлияет на работоспособность.

Итак, давайте как обычно начнем с разметки. В принципе, это обычная html страница, которую вы вольны оформлять как душе угодно, но, чтобы сработал наш механизм, при котором случайному человеку не будет показываться страничка нам нужно обернуть ее в небольшой php-код.

В первой строке мы отлавливаем наш GET-параметр, и, если он совпадает с заданным, то показываем страницу, если нет, то перебрасываем пользователя на главную.

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

То есть это строка говорит, что через 4 секунды после открытия этой страницы, перекинь автоматически посетителя на главную страницу. За это время, человек успеет прочитать ваше сообщение и его благополучно вернет на главную.

Если вам важен такой функционал, то раскомментируйте ее и настройте приемлемое время.

Маска ввода номера телефона

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

Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять ‘jQuery Mask Plugin’ из статьи, ссылку на которую дал выше.

Подключаем после jQuery. Я делаю это так:

Теперь необходимо инициализировать скрипт.

После этого маска успешно появилась в поле телефона:

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


Совсем подробно расписывать не буду, просто покажу что и куда добавляю, а в конце дам ссылку на исходник. Если какое-то из полей вам не понадобится, то просто не используйте его в разметке, а в файле ‘config’ — установите значение ‘false’ там, где задаем обязательность заполнения.

Область для ввода сообщения

Конечно же многим из вас может понадобится поле для ввода сообщения. Для того, чтобы получить его мы воспользуемся тегом ‘textarea’. Добавьте следующую разметку в форму:

Стили я уже добавил в ‘style.css’, так что теперь наша форма выглядит так:

Теперь необходимо передать данные в файл валидации ‘valid.php’ и проверить все ли в порядке. Как уже говорил выше, у нас простейший случай с проверкой не пустое ли поле. Прежде чем перейти к реализации валидации давайте предположим, что поле для ввода текста обязательно для заполнения.

Для этого перейдем в файл ‘config.php’ и укажем ‘true’ в константе, отвечающей за это текстовое поле.

Теперь наше текстовое поле стало обязательно для заполнения. В файле ‘valid.php’, по аналогии с другими полями напишем такую проверку:

Обратите внимание на ‘text’ в проверке POST запроса. Этот то самое значение, которое указывали в параметре ‘name’ у тега ‘textarea’.

В файле ‘mail.js’ сохраним ‘div’ в который будем выводить ошибку, если валидатор ее вернет для текстового поля:

А затем, ниже, напишем проверку:

По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную ‘$text’ в тело письма. Делается это в файле ‘mail.php’ в 34 строке, той самой, о которой я уже упоминал выше.

Цукерберг рекомендует:  C# - Помогите пожалуйста. Не работает код c#

Теперь, если все сделали правильно, в письме будут приходить данные и из этого поля.

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

Checkbox

Настало время добавить ‘checkbox’ с соглашением на обработку персональных данных. Вы можете делать и другие чекбоксы или радиокнопки. Принцип один и тот же для всех полей.

Создаем разметку в форме, определяем в ‘config.php’ обязательно ли поле, проверяем в валидаторе и формируем ошибку если она есть и выводим при помощи mail.js ее обратно в форму. Если нет, то передаем в mail.php и отправляем.

Итак, checkbox. Добавим разметку:

Не забудьте указать ссылку на соглашение. Стили уже добавлены в исходник.

Идем в файл ‘config.php’ и делаем поле обязательным.

Далее открываем файл ‘valid.php’ и добавляем следующий код:

Теперь переходим в файл ‘mail.js’ добавляем ‘div’ в который будет выводится ошибка, если она есть, и обработчик ошибки:

Осталось в тему письма добавить переменную с текстом о принятии соглашения.

В принципе, если поле обязательно модно было этого и не делать, но пусть лучше будет.

Добавление файла

Многим может понадобиться возможность отправки файла, давайте реализуем и этот функционал. Я уже подготовил все, вам остается только добавить разметку и выбрать обязательное ли поле для заполнения.

Настройки в файле ‘config.php’:

Вот так теперь выглядит форма.

А вот так выглядят пришедшие данные.

Вот такая большая статья о создании формы обратной связи получилась.

Форма обратной связи с дополнительными полями

Форма обратной связи без плагинов

Здравствуйте! Сегодня я поделюсь с Вами как можно легко и быстро создать простую в установке и удобную в использовании форму обратной связи на WordPress без плагинов, используя простые средствами HTML, CSS и PHP.

Преимущества такой формы очевидны — она универсальна и может быть установлена на любой сайт, включая популярные CMS, такие как WordPress, Joomla и даже на простые HTML сайты. Если в качестве примера рассматривать ВордПресс, то отсутствие дополнительных плагинов снизит потенциальную нагрузку сервер.

Отправка сообщений происходит без перезагрузки страницы! По порядку следуя инструкции в итоге мы должны получить такой результат:

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

Вставка формы обратной связи на блог

Для размещения формы обратной связи можно выбрать как отдельную запись, так и статическую страницу. Целесообразно ее использовать на специально отведенной странице для контактов. Итак, предлагаю использовать вот такой код, которой необходимо вставить в HTML-режиме редактора:

В первой строке Вам придется немного подкорректировать и указать свой путь к файлу-обработчику (mail.php), о котором расскажу ниже. Содержание тега label (текстовая метка поля ввода) и атрибута placeholder (подсказка внутри текстового поля, исчезающая при вводе) измените при желании.

Для того чтобы заменить текстовое поле с темой сообщения на раскрывающийся список необходимо заменить строку 7, применяя тег select с вариантами выбора option :

Атрибут required появился в HTML5 и указывает браузеру, что поле является обязательным для заполнения. Таким образом на стороне пользователя проводится проверка полей до отправки запроса на сервер. Атрибут работает не во всех браузерах, поэтому добавим в обработчике свою проверку.


Создаем обработчик формы обратной связи

Файл-обработчик с именем mail.php я поместил в папку с темой шаблона, в таком случае он будет доступен для редактирования прямо из админки блога, в меню Внешний вид — Редактор. Создаем файл, открываем его и вставляем туда следующий код:

Здесь мы повторно проводим проверку заполненности полей перед отправкой на почту. Если одно или несколько полей останутся пустыми — появится сообщение об ошибке, текст этого сообщения Вы можете изменить в параметре $error для каждого поля.

На этом настройка файла mail.php заканчивается и можно переходить к следующему этапу — подключению необходимых скриптов и стилевому оформлению.

Подключение необходимых библиотек и скриптов

Отправка сообщений происходит на AJAX без перезагрузки страницы, поэтому в первую очередь нам необходимо подключить библиотеку jQuery. Большинство современных тем и шаблонов уже используют библиотеку jQuery и подключать ее повторно не требуется. В противном случае она подключается в functions.php следующим образом:

Есть еще один способ подключить jQuery на WordPress с помощью файла functions.php:

В первом случае будет загружена библиотека, идущая в составе WordPress. Преимущество второго способа заключается в том, что загрузка происходит с CDN Google и таким образом можно подключить любую версию.

Теперь нам необходимо подключить свой скрипт, который будет работать в паре с обработчиком mail.php и отправлять сообщения, а также выводить информационные сообщения без перезагрузки страницы. Для этого создаем файл contact.js со следующим содержимым:

Подключать скрипт допустимо как на одной странице с формой, так и для всего сайта в заголовке или подвале, указав свой путь к файлу:

Основная работа завершена и наша форма на данном этапе уже полностью работоспособна, остался последний штрих — придать ей форму.

Оформление внешнего вида с помощью CSS

В этом примере я приведу фрагмент своего CSS файла, который отвечает за внешний вид формы обратной связи:

Вам потребуется два изображения, которые доступны в архиве с исходниками или сохраните их с этой страницы через контекстное меню по изображению «Сохранить картинку как…» и не забудьте в CSS изменить путь к этим файлам, если загружаете в иную папку.

— появляется в поле input при валидации формы;
— появляется в поле input когда форма не заполнена или заполнена неверно.

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

Подключение Google ReCaptcha для защиты от спама

По многочисленным просьбам дополняю статью. Для тех, кому требуется защита формы связи от спама, рекомендую подключить Google ReCaptcha. Для этого нужно вернуться к HTML основе формы и после строки с тегом textarea добавить новую, которая содержит ключ ReCaptcha:

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

Переходим к обработчику mail.php и дополним файл сразу после такими строками:

Обратите внимание на 2 строку — она содержит секретный ключ. Замените секретный ключ на свой, который получите вместе с публичным ключом. Файл recaptcha.php Вы найдете в архиве, загрузите его в папку с темой WordPress.

А также после 8 строки первоначального кода нужно добавить новую, которая будет проверять заполненность поля ReCaptcha:

На завершающем этапе подключаем API — скрипт ReCaptcha в секции head своего сайта:

Те, кому защита от спама не нужна, могут пропустить шаги, описанные в этом разделе.

Есть конечно и более функциональные плагины для CMS, например Contact Form 7 для WP, но зачем загружать блог? Данный код успешно справляется с возложенными на него функциями, к тому же не все плагины идеально работают и порой конфликтуют с шаблоном. На своей странице с контактами я использую именно эту форму)

Хочу заметить, что это один из самых простейших способов создать форму обратной связи без плагинов, ничего сверхъестественного, простой незамысловатый код, в котором разберется каждый, кто хоть раз редактировал свои шаблоны или записи в HTML режиме.

А у Вас есть форма обратной связи на сайте или предпочитаете использовать электронную почту, Skype и прочие средства коммуникации с пользователями?

Формы для сайта: юзабилити форм

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

Основные виды форм для сайта

Рассмотрим особенности каждого вида, чтобы вы смогли выбрать подходящие для вашего сайта или использовать список как чек-лист, чтобы не забыть разместить их все.

Форма заказа обратного звонка

Рекомендуем всем коммерческим сайтам использовать данную форму. Идеальное место размещения – шапка сайта, рядом с номером телефона. Причем не стоит показывать поля ввода сразу, лучше их скрыть под кнопкой «Заказать звонок» и выводить после клика. Не обязательно делать кнопку яркой, в виде ссылки она будет так же хорошо заметна:

В развернутой версии достаточно двух полей «Телефон» и «Имя» и где обязательно для заполнения только первое:

Можно оставить только одно поле для ввода телефона, тоже вполне рабочий вариант, хотя придется у каждого клиента при звонке сначала спрашивать имя:

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

Форма консультации

«Форма-спасатель» для тех пользователей вашего сайта, которые не смогли найти нужную информацию на странице, но хотят сделать заказ. Лучше размещать в одном из двух вариантов: либо в свернутом виде в правом нижнем углу экрана, либо в развернутом – внизу на Главной и на страницах каталога товаров или услуг.

Первый вариант размещения (пример с сайта Танго и Кэш):

Второй вариант размещения (пример с сайта Okna-dpa):

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


Количество полей так же рекомендуем оставлять небольшим. Спрашивайте имя, а вместо номера телефона можно запрашивать email пользователя (сделайте второе поле обязательным для заполнения).

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

Форма обратной связи на странице контактов YouDesign:

Форма заказа услуг

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

Часто на страницах услуг размещают форму заказа обратного звонка или консультации, что не совсем правильно. Клиент уже выбрал страницу услуги, возможно даже тариф, а ему показывается общая форма, где нет выбранной информации. Это дезориентирует. Рекомендуем указывать следующие поля:

  • «Вид услуги» или «Тариф» – данное поле лучше заполнять автоматически или разместить в виде текста в начале формы
  • «Имя»
  • «Телефон» – сделайте поле обязательным для заполнения
  • «Email» – чтобы продублировать информацию о заказе клиенту
  • «Комментарий» – возможно, у клиента есть уточнения

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

Форма заказа товаров

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

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

Пример размещения полей в форме для новых пользователей на Ozon:

Для старых клиентов. Те, кто заказывают повторно, уже указали всю контактную информацию, поэтому в форме помимо списка товаров должны быть только пункты выбора доставки и оплаты. И если вы используете промокоды, то добавьте поле для их ввода, но не более. Не нужно заново просить контакты клиента.

Форма заказа на Wildberries, где даже выводится прошлый выбор способа доставки и оплаты (но оставляют возможность их изменить):

Многие разбивают ввод адреса доставки на несколько полей, отдельно запрашивая индекс, название города, улицы, номер дома и т.д., что выглядит очень громоздко. Антипример с сайта Ангорочка:

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

Обязательными полями для ввода следует сделать контактные данные, адрес доставки, выбор способа доставки и оплаты. Форму можно выводит поэтапно, но и не возбраняется показать все поля сразу. Главное, визуально разделите их на смысловые группы.

Форма регистрации

Рекомендуем отделять ее от формы авторизации, потому что многих новых клиентов дезориентирует кнопка «Войти». Две ссылки рядом не будут занимать много места и сократят время поиска. Также форма всегда должна быть заметна, поэтому лучше разметить ее в шапке сайта. Самый привычный вариант – в верхнем правом углу в виде ссылки (пример от Аква-Вива):

В целом форма должна содержать те же поля, что и форма заказа (и обязательные поля для ввода такие же), поэтому советуем не перегружать ее лишними пунктами и для адреса оформить общее поле. Помните, что регистрация это дополнительные действия для клиента, поэтому не отталкивайте его длинным списком. Можно спросить дату рождения, чтобы отправлять поздравления и скидки, но заставлять клиента придумывать никнейм или указывать дополнительный телефон или адрес – лишнее.

Шикарная практика предлагать клиентам зарегистрироваться через соцсети. Так клиенту не придется придумывать пароль и в целом регистрация пройдет быстрее. Пример использования такой возможности на сайте Asos:

Данный интернет-магазин зарубежный, поэтому приведены популярные соцсети тех стран, для русскоязычной аудитории лучше убрать Twitter и добавить кнопки для Вконтакте, Одноклассников.

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

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

Форма авторизации

Как уже говорилось выше, разместить ссылку на форму лучше в шапке, рядом со ссылкой на регистрацию. Наиболее удобная пара полей – «Email» и «Пароль», но еще лучше, если вы также сделаете авторизацию через соцсети.

Пример хорошей формы авторизации от Lamoda, где предлагают два варианта входа на сайт:

Восстановление пароля привычнее всего делать по адресу почты, отправляя клиенту ссылку на форму ввода нового пароля. Генерирование автоматического «временного» пароля заставляет пользователя самому искать форму смены пароля, что неудобно и только лишние заморочки для клиента. Такого лучше не допускать.

Форма подписки на рассылку

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

Разместить форму следует на Главной странице, чтобы пользователь сразу увидел, что есть такая возможность. Лучше после всей основной информации, внизу страницы (пример от Lavkalavka):

Цукерберг рекомендует:  Mysql - БД SQL из сайта

Если на сайте есть блог, и в письмах, помимо товаров и услуг, вы анонсируете новые статьи, то тогда можно добавить форму на общей странице раздела, например, справа от статей, как это сделало у Vkusnosti by Mado:

В форме подписки, конечно же, нужно поле «Email», и еще можно спросить имя, чтобы сделать письма более персонализированными.

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

Общие рекомендации по юзабилити форм

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

    Формы во всплывающих (модальных) окнах. Следует выводить их только после клика пользователем по нужной ссылке или кнопке. Никаких «всплывашек» при открытии Главной страницы или при попытке клиентов покинуть сайт. Онлайн-консультант тоже не должен «выскакивать», предлагая начать чат. Такие вещи раздражают и отталкивают пользователей. Антипример от Delicat-Servis (сейчас ребята убрали эту проблему, и форма раскрывается только после клика):

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

  • Название формы. Всегда подписывайте формы, чтобы пользователь видел, что заполняет. Правильно, когда в заголовке прописывается название тарифа или услуги, но если заголовок получается слишком длинным, то добавьте данную информацию в виде текста ниже, как это сделали Fullhousedesign:

    Название полей формы. Лучше всего располагать название поля над ним, а уже внутри поля указать пример заполнения. Если разместить название внутри поля, то оно будет стираться при заполнении, что не совсем удобно. Также плохой вариант, когда названия находятся слева, а поля справа, глазам приходится соотносить колонки между собой (плохой пример формы на сайте Московского дома книги):

    Удобный вариант расположения подписей и подсказок (на сайте Xarakiri.ru):

    Обязательные поля. Всегда помечайте * поля, обязательные для заполнения. Выше при описании форм мы указали, какие выбрать. Исключение составляют формы с один полем – и так ясно, что оно обязательное. Пример выделения обязательных полей от компании Izto:

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

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

    Использование «капчи». Не рекомендуем использовать в формах проверку на робота, так как она заставляет пользователей совершать лишние действия и может даже стать причиной ухода с сайта. Используйте незаметные для пользователей методы защиты, например, отслеживайте на сервере время заполнения формы (если оно слишком маленькое, то значит форму заполняет робот), добавляйте скрытые поля (которые сможет заполнить только робот), используйте анти-спам сервисы для проверки и т.д. На самый крайний случай можно воспользоваться проверкой ввода от Google:

  • Сохранение данных. Возможно клиент случайно закрыл форму, случилась ошибка или перезагрузка, и чтобы не пришлось вводить данные заново – сохраняйте их до отправки. Особенно этот совет касается длинных форм.
  • Кнопка сброса данных. Ни в коем случае не размещайте ее рядом с кнопкой отправки, чтобы пользователь случайно не кликнул по ней. Разместите ее в другой части формы или вовсе уберите. Пример неудачного расположения кнопок на сайте Avarit:
  • Закон о Персональных данных. Чтобы избежать штрафов за сбор персональных данных клиентов, необходимо подготовить нормативные документы и написать об этом на сайте. Подробнее о законе и подготовке сайта »
  • Итоги

    К каждой форме следует подходить индивидуально, поэтому невозможно описать все случаи в одной статье. Главный принцип, которым следует руководствоваться – минимум полей. Лучше позвонить клиенту и уточнить детали устно, чем заставлять его заполнять длинные формы. Возможно у клиента возникли какие-то дополнительные вопросы, тогда звонком вы решите две проблемы.

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

    Создание контактной формы для сайта

    Дата публикации: 2010-11-24

    От автора: Мы часто сталкиваемся с контактными формами, будь то обычный сайт или, скажем, WordPress. Формы могут быть совершенно разными, всё зависит от Вас и от пожеланий клиента). В этом посте я наглядно покажу всю «анатомию» создания контактной формы для сайта средствами HTML и PHP.

    Перед тем, как мы приступим к создания контактной формы для сайта, я Вам рекомендую просмотреть демо-результат работы.

    Первым делом мы должны определить место, где будет наша форма. Помещать всё её содержимое мы будем между тегами:

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Атрибут action указывает, в какой файл пойдут данные при нажатии кнопки «Отправить». Значит, второе, что мы создадим mail.php.

    Метод передачи выбираем POST — то есть данные передадутся внутри тела запроса, а не через адресную строку.

    Рассмотрим этот код и попробуем его модифицировать.

    Для того, чтобы наша форма работала, необходимо добавить php-функции. Используем функцию $_POST для перевода значений из полей input в переменные:

    К примеру, у нас есть:

    Дальше функцией $_POST захватываем значение атрибута nameemail и преобразуем в переменную $email:

    И для всех сразу:

    Переменная $recipient задаёт тот адрес, на который отправятся данные. Ну а функция mail отправляет данные на почту.

    Теперь перед нами стоит задача продвинуться вперёд, я покажу, как можно добавить выпадающий список, и как добавить радио — кнопки.

    Выпадающий список

    Для создания выпадающего меню, нам потребуется вставить код в HTML, и подкрепить его PHP.


    HTML:

    Атрибут size указывает, сколько вариантов ответа будет показываться за раз. Чаще всего это 1.

    А вот и модифицированный код PHP, с учётом нашего выпадающего бокса:

    Мы видим, что добавилась $dropdown.

    Флажки и Радио-кнопки

    Рассмотрим HTML-код флажков.

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Обратите внимание на квадратные скобки в параметре name — они обеспечивают возможность выбора нескольких значений. Иногда используются просто разные имена.

    Что касается кнопок — переключателей (radio), то мы можем добавить такой пример:

    Необходим ли телефонный звонок?:

    Здесь имя одинаковое, но разные значение value.

    И опять, полный HTML:

    Дополняем наш обработчик переменными, которые потребуются для отправки письма:

    Любую из этих переменных можно дополнить различной полезной информацией. Я добавил имя пользователя в $subject, которая отвечает за тему письма.

    Вы, например, можете в $mailheader добавить адрес Вашей организации, телефоны и т.п.

    И напоследок — поработаем с почтой.

    Готовая форма обратной связи для сайта, всплывающая в окне

    Изучая сайты, вы могли заметить ,что на каждом из них есть форма обратной связи.
    Если это Landing Page, то таких форм может быть несколько. Такие формы выполняют очень важную роль в контакте между пользователем сайта и его владельцем.

    В этом уроке будет показано, как создать модальную форму обратной связи. Модальная форма — это форма появляющаяся про нажатии на кнопку или ссылку. Такая форма не занимает лишнее место на странице и отправляет все данные без перезагрузки страницы.

    Ajax форма обратной связи — структура формы.

    Для начала необходимо создать саму форму, ее html структуру. В этом нет ни чего сложного, используются стандартные html теги контейнера и формы. Код приведен ниже.

    запрос отправлен

    Контейнер с классом overlay, отвечает за затемнение экрана при появлении формы.
    Контейнер popup и popup2 — это два всплывающих окна. Первое окно с формой и второе с результатами отправки данных.

    Второй шаг — подключение стилей формы.

    Все стили формы приведены ниже. Также их можно подключить отдельным файлом, как сделано на DEMO странице.

    @charset «utf-8»;
    input,textarea < padding: 5px 8px; display: block;color: #b1b7ba; font: 12px/18px Verdana, Arial, sans-serif;>
    input[type=»submit»] < color: #fff; border: 1px solid #d6942d; font-size: 14px; margin-top: 6px;
    background: #ee7156; text-decoration: none; display: block; cursor: pointer; padding: 4px; height: 30px;>
    input[type=»submit»]:disabled< opacity: .3;>
    .open_modal a< text-decoration:none; color:#000;>
    .open_modal p <
    background: #ee7156;
    border-radius: 5px;
    padding: 2px 44px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    margin: 0 0 0 -50%;
    display: block;
    width: 225px;
    >

    .overlay <
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 99999;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    >
    .popup, .popup2 <
    width: 300px;
    display: inline-block;
    left: 50%;
    opacity: 0;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 999999;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
    >
    .popup form < padding: 0 0 20px; right: 0; background:#fff;>
    .popup2 .window <
    right: 0;
    width: 300px;
    background:#fff;
    padding: 0 27px 27px;

    .popup form input[type=»submit»] <
    background: #ee7156;
    text-align: center;
    text-transform: uppercase;
    width: 85%;
    border: 1px solid #ee7156;
    >

    .popup .close_modal color: #000; font-family: ‘tahoma’, sans-serif; text-align: center; font-size: 1.1em;>
    .popup2 .close_modal color: #000; font-family: ‘tahoma’, sans-serif; text-align: center; font-size: 1.1em;>

    .popup2 h5 <
    padding: 1em 0.5em;
    text-align: center;
    font-size: 1.5em;
    color: #000;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0;
    >
    .popup2 p <
    font-family: verdana;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    >
    .popup2 p strong <
    font-size: 1em;
    line-height: 30px;
    font-weight: normal;
    display: block;
    >

    ::-webkit-input-placeholder < color: #000; >
    ::-moz-placeholder < color: #000; >/* Firefox 19+ */
    :-moz-placeholder < color: #000; >/*Firefox 18- */
    :-ms-input-placeholder

    В конце файла стилей, идет оформление для placeholder. Подробнее о его оформлении, можно почитать в отдельной статье «Внешний вид названия полей или как изменить placeholder»

    В остальном нет ни чего сложно, по этому подробно объяснять стили не будем.

    Шаг три — приятное дополнение для создателей landing page и фанатов статистики.

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

    Эта проблема решается достаточно просто. Кнопке, вызывающей форму дописывается специальный код data-product=»Форма 1″. Где «Форма 1» уникальное значение для каждой кнопки. Оно может быть любым, главное, чтобы было понятно, что это за кнопка.

    а к странице с формами добавляется скрипт, который и будет добавлять отметку с названием кнопки.

    a.pop-form — эта отметка говорить у каких ссылок (тег а + название класса ссылки) собирать данные. При желании класс ссылки можно изменить, главное заменить его и в ссылке и в скрипте.
    input#h >

    Шаг четыре — подключение стилей и скриптов к странице сайта.

    Первое, что необходимо сделать — это подключить библиотеки без которых наша форма не сможет работать.


    Затем необходимо подключить скрипт и стили формы. При желании стили формы можно скопировать в основной файл style.css.

    Обычно такое подключение советуют делать в тегах head, но мы рекомендуем вынести блок с подключением ближе к концу страницы, перед закрывающим тегом body. Это позволит не блокировать загрузку основной части страницы. С точки зрения поисковых систем это плюс.

    В скрипте обработки и отправки писем сложного нет. Он содержит русские комментарии и достаточно прост в понимании.

    Пятый шаг — обработчик отправки письма со стороны сервера. mail.php

    Обработчик также достаточно простой и имеет русские комментарии. Единственное на, что следует обратить внимание — это переменные подобного типа $txtname = trim($_POST[‘txtname’]);

    Каждое поле формы имеет имя (name=»txtname») оно совпадает с переменной в обработчике. Это необходимо для сбора всех данных и их отправки на почту.

    Если вам необходимо добавить новое поле в форму, то не забудьте добавить его название в обработчик.

    После 19 строки нужно добавить название нового поля, допустим так
    $test = trim($_POST[‘test’]); при этом у поля должен быть атрибут name=»test»

    А в 34 строку нужно добавить
    $body = «Заявка с \n\nИмя: $txtname\nE-mail: $txtemail\nТелефон: $txtphone\nЧто заказали: $txtorder\nНаше новое поле: $test «;

    После этого все данные введенные в новом поле будут отправляться на вашу почту.

    Модальная форма обратной связи с использованием технологии ajax готова. Из приятных дополнений в этой форме реализована проверка заполнения полей на стороне клиента и добавлена возможность отслеживания с какой формы отправлено письмо.

    На этом все. Скачать готовую форму обратной связи для сайта можно тут:
    форма обратно связи ajax .
    В архиве есть дополнительная инструкция по подключению и изменению формы.

    Форма обратной связи для сайта

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

    Итак, начнем, как всегда, с обычной заготовки – html . Для начала нам понадобится форма с несколькими полями. Мы возьмем для наглядности и стандарта всех форм 3 поля. Т.е. это будет Имя, Email и телефон.

    Каждый input у нас имеет свое уникальное имя name , оно нам понадобится в дальнейшем для отправки сообщений. Вы можете также свободно добавлять свои поля и не только input , но и select , textarea . Только не забывайте каждому из них присваивать свои имена, которые мы будем использовать при отправке на почту информации. Для удобства я добавил каждому полю атрибут required , благодаря которому браузер не позволит пользователю отправить пустые значения и уведомит о необходимости их заполнения.

    Когда форма готова, можно ее немного преобразить. Тут все также зависит от ваших потребностей и фантазий. Я же, для наглядности набросал немного стилей для каждого элемента, чтобы не выглядело все столь плоским. Но если вам лень или не знаете как это делается, то можете использовать мой вариант:

    Клиентская часть

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

    Цукерберг рекомендует:  Хакинг - Взлом мозга

    Если вы хотите все сделать по старинке, то вам понадобится немного подправить верхний html и задать форме значение атрибута method ( post или get ). Все зависит от того, каким способом вы хотите передать данные из формы. А также не забудьте прописать action , который укажет путь к файлу php .

    А мы пойдем более продвинутым методом и сделаем отправку данных не перезагружая страницу, и получая ответ от сервера будем выдавать пользователю сообщение об успешной операции, либо ошибке. Однако, нам также понадобятся 2 файла, допустим contact.php и custom.js.

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

    Теперь разберемся в схеме действий и зачем нам нужны все эти библиотеки и файлы. Когда пользователь нажимает кнопку отправить, у нас происходит событие submit , которое мы пропишем в custom.js и на основе которого получим все данные из формы и передадим их в файл contact.php. Здесь мы еще раз проверяем, не пустые ли у нас поля (дабы избежать очередной возможности спама), производим отправку сообщения на email и уведомляем о результатах пользователя, которые передаются ответом в custom.js.

    Это самый элементарный пример работы контактной формы. Есть множество вариантов, как доработать файл проверки на php, создание своих классов и т.д. Но наша задача была создать простой и рабочий пример, который можно использовать на своем сайте.

    Готовые плагины

    Так как вы находитесь на блоге WordPress, то наверняка готовы и стремитесь использовать всевозможные плагины, особенно если вы в программировании и верстке полный ламер. И я вас в этом не виню и могу даже один из них представить вашему вниманию для наглядности. Цель этого абзаца не рекомендация, а лишь пример, так как я использовал плагин Contact Form 7 в нескольких проектах.

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

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

    21 контактная форма для сайта (обратная связь) на jquery

    1. Плагин для создания онлайн форм «jFormer»

    Создание контактных форм: обратной связи, комментирования, форма входа, форма регистрации с проверкой правильности ввода информации.

    2. Пошаговая форма регистрации с использованием jQuery

    Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.

    3. Пошаговая форма

    Заполнение формы в несколько шагов с проверкой правильности заполнения.

    4. Контактная форма для сайта

    Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.

    5. Анимированное переключение между формами на jQuery

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

    6. Выезжающая PHP форма обратной связи


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

    7. PHP форма регистрации с использованием jQuery и CSS3

    Форма с проверкой правильности ввода информации.

    8. PHP форма регистрации в стиле Facebook

    Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.

    9. jQuery контактная форма «SheepIt»

    Реализована возможность перед отправкой сообщения добавлять новые поля.

    10. Контактная форма «Fancy AJAX Contact Form»

    Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.

    11. Система авторизации/регистрации на сайте

    Выезжающий блок авторизации/регистрации на сайте. Используемые технологии: PHP, MySQL, jQuery, CSS.

    12. Форма отправки данных

    С проверкой правильности заполнения.

    13. Плагин jQuery «Contactable»

    Для реализации выезжающей формы обратной связи для быстрой отправки сообщения.

    14. jQuery плагин «Formwizard»

    Плагин для реализации пошаговых форм на сайте.

    15. Контактная форма в стиле старой печатной машинки

    16. Эффект свечения на jQuery

    Контактная форма с эффектом неонового свечения полей.

    17. Проверка правильности ввода данных в форму на jQuery

    jQuery форма с анимированными подсказками о допущенных ошибках при заполнении.

    18. Стильная форма

    Проверка правильности заполнения полей перед отправкой.

    19. Форма обратной связи выдвигается сверху экрана

    Анимационный эффект выезжающей формы обратной связи сверху экрана при нажатии на кнопку «Contact Us».

    Конструктор форм для сайта

    • Абзац текста
    • Текстовое поле
    • Текстовая область
    • Выпадающий список
    • Флажок
    • Группа переключателей
    • Скрытое поле
    • Выбор файлов
    • Кнопка «Отправить»

    Правила использования конструктора форм для сайтов


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

    Пользоваться конструктором форм очень легко. Просто выберете подходящую заготовку. Если требуется немного изменить форму, Вы можете добавить дополнительные поля из левого блока «Элементы формы», просто перетащив их в нужное место и заполнив необходимые свойства. Также Вы можете удалить ненужные поля или изменить их последовательность.

    Нажмите на кнопку «Посмотреть результат», что бы увидеть, как форма будет смотреться. Вы можете выбрать один из 4-х стилей отображения формы и нужный цвет.

    Сохранять формы могут только авторизированные пользователи!

    В личном кабинете Вы сможете редактировать формы, указать e-mail и телефон для SMS оповещений, а также скачать все необходимые скрипты для их установки на сайте. Если администратор Вашего сервера запрещает вам загружать файлы, вы можете подключить файлы с нашего сайта.

    Как создать базовую контактную форму с помощью плагина WPForms

    Приветствую вас, дорогие посетители моего блога!

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

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

    Как и следовало ожидать, когда дело доходит до добавления контактной формы на ваш веб-сайт WordPress, самый простой способ – использовать специальный плагин, одним из которых является популярный и мощный WPForms от команды, стоящей за OptinMonster и Soliloquy.

    В этом руководстве я покажу вам, как быстро и легко создать базовую контактную форму для вашего веб-сайта на платформе WordPress, используя бесплатную версию WPForms: WPForms Lite.

    Зачем использовать WPForms?

    Когда дело доходит до плагинов контактной формы WordPress, то тут есть из чего выбирать. Тем не менее, WPForms – это один из самых быстрых и простых способов добавить контактную форму на свой веб-сайт, но при этом вы можете обновить свои формы, если в будущем у вас возникнут более сложные потребности.

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

    Итак, теперь, когда вы знаете, почему WPForms является хорошим выбором, далее я покажу вам, как использовать этот бесплатный плагин для добавления базовой формы контакта в WordPress.

    Как добавить плагин WPForms Lite на свой сайт WordPress

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

    Самый быстрый способ добавить плагин на свой веб-сайт – войти в свою админ-панель WordPress и перейти к разделу плагинов на панели инструментов.

    На странице «Добавление плагинов» введите «WPForms Lite» в поле поиска и установите первый плагин, возвращенный в результатах.

    На следующем экране нажмите кнопку «Активировать» и WPForms будет готов к использованию на вашем веб-сайте WordPress.

    Как создать базовую контактную форму WordPress с WPForms

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

    На экране приветствия вы можете просмотреть полезное видео-руководство по созданию первой контактной формы с помощью WPForms. Кроме того, вы можете просто нажать кнопку «Создать свою первую форму», чтобы начать. Если по какой-либо причине экран приветствия не отображается, вы можете создать новую контактную форму, щелкнув боковое меню WPForms, а затем элемент «Добавить новую».

    Помимо нажатия кнопки «Создать свою первую форму», теперь у вас также есть возможность принять участие в конкурсе WPForms, который поможет вам в создании первой формы менее чем за пять минут. Если вы решите принять вызов, мастер установки проведет вас через пять этапов создания формы – от присвоения ей имени до публикации на вашем веб-сайте.

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

    Хотя вы можете начать с пустой формы, рекомендуется выбрать простой шаблон контактной формы.

    Для большинства целей достаточно простого шаблона контактной формы. Однако, если вам нужно добавить какие-либо дополнительные поля в вашу контактную форму, это так же просто, как нажать на любое из стандартных полей на левой панели, чтобы вставить их в вашу форму. Однако если вы хотите использовать какие-либо из полей “Fancy Fields” или “Payment Fields”, вам нужно будет перейти на профессиональную версию WPForms.

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

    Редактирование поля формы происходит на левой панели компоновщика, что позволяет изменять метку и описание поля, устанавливать размер поля и вводить любой текст-заполнитель. Доступные вам параметры зависят от того, какой тип поля вы редактируете – например, с помощью поля электронной почты вы можете легко включить поле подтверждения, которое требует от пользователя ввода своего адреса электронной почты дважды. Когда вы будете довольны полями формы и их настройками, нажмите кнопку «Сохранить».

    Настройка вашей контактной формы

    Каждая форма, которую вы создаете с помощью WPForms, может быть настроена индивидуально в соответствии с вашими потребностями. Итак, чтобы просмотреть текущие настройки или настроить работу вашей формы, просто нажмите на вкладку «Настройки» на экране построителя форм, чтобы открыть параметры конфигурации для формы, над которой вы работаете.

    Параметры сгруппированы в три раздела, охватывающих параметры «Общее», «Уведомление» и «Подтверждение» для формы.

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

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

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

    Опять же, когда вы будете довольны подтверждением формы, нажмите кнопку «Сохранить», чтобы подтвердить изменения.

    Публикация контактной формы на вашем сайте

    После сохранения формы вы можете опубликовать ее на своем веб-сайте WordPress, чтобы сделать ее доступной для посетителей. Нажатие на кнопку внедрения на экране построителя формы отобразит шорткод формы, над которой вы работаете. Затем вы можете скопировать и вставить этот шорткод в пост или страницу WordPress, чтобы сделать форму доступной. Полезно, чтобы на экране появилось обучающее видео, демонстрирующее, что нужно сделать, чтобы вставить шорткод формы в сообщение или страницу. Тем не менее, процесс очень прост.

    Еще один способ добавить одну из ваших форм на ваш веб-сайт – создать новую запись или страницу или открыть существующую для редактирования, а затем нажать кнопку «Добавить форму».

    После того, как вы нажали кнопку «Добавить форму», вы можете выбрать, какую форму вставлять, а также выбрать, отображать ли заголовок или описание формы.

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

    Теперь, если ваши посетители хотят отправить вам сообщение, все, что им нужно сделать, это заполнить форму и нажать кнопку «Отправить».

    WPForms Lite также включает в себя виджет, который позволяет отображать формы на боковой панели и в других готовых к виджетам областях вашей темы WordPress. В зависимости от выбранной вами темы виджет WPForms может дать вам возможность отображать форму в подвале (футере) вашего сайта, как показано ниже.

    Управление контактными формами WordPress

    Если вам нужно внести какие-либо изменения в свои формы, вы можете получить к ним доступ через пункт «Все формы» в меню WPForms.

    В этом разделе панели управления WordPress вы можете удалять или редактировать любые существующие формы, а при обновлении до WPForms Pro вы можете просматривать записи форм, отправленные посетителями вашего сайта.

    Как упоминалось ранее, любые изменения, которые вы вносите, будут немедленно отражены в ваших опубликованных формах, благодаря возможности коротких кодов WordPress.

    Последние мысли

    Как видите, бесплатный плагин WPForms Lite предоставляет очень простой способ добавления контактных форм на веб-сайты WordPress.

    Используя стандартный шаблон контактной формы, вы можете добавить этот тип формы на свой веб-сайт всего за несколько кликов – и, благодаря редактору с перетаскиванием, если вам нужно внести изменения в шаблон (например, добавив поля формы или изменение текста по умолчанию), весь процесс действительно очень прост.

    А у меня на этой ноте все – до скорых встреч!

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих
    Редактировать: