Форма обратной связи javascript: Создание формы обратной связи для лендинг пейдж

23611

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

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

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

Основные принципы организации обратной связи

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

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

Форма

Сама по себе форма является частью HTML документа, поэтому для пользователя нужно просто показать соответствующую форму и проще это сделать в тегах <form> </form>, в которых содержится кнопка Отправить или Сделать запрос, по нажатии на которую будет происходить дальнейшая обработка формы.

Очень важно корректно и понятно указать поля обязательные для заполнения, которые часто обозначаются символом *. В принципе, возможно написать саму форму и в тегах <div> </div>, но существует различие. Если <form> </form> формирует POST запрос, указанный в атрибуте action, который удобно использовать для дальнейшей обработки на сервере с помощью PHP, Pyton, Java и так далее, то в случае div нужно использовать JavaScript. Так же с помощью JavaScript можно данные посылать через Ajax запросы, в таком случае страница не будет обновляться в строке браузера.

Однако принцип один — мы отправляем некие данные на сервер.

Какие данные должны быть обязательными?

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

Обработка запроса на сервере

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

Ответ с сервера

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

Непосредственный разбор кода на HTML и PHP смотрите здесь.

Несколько форм на одной странице с отправкой без перезагрузки

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

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

За пересылку письма с введенными в форму данными отвечает PHP обработчик. Для передачи данных в обработчик используется кнопка с типом submit. В случае использования нескольких форм связи с одним php обработчиком Вы должны передать в него данные именно той формы, в которой была нажата кнопка «Отправить». Это можно сделать через if/else, с учетом разных имен атрибутов, наплодив одинаковых кусков кода, можно создать кучу обработчиков с разными именами, но одинаковым кодом, а можно использовать скрипт jQuery с помощью которого данные в обработчик будут отправляться из той формы где было произведено нажатие на кнопку «Отправить».

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

Несколько форм связи с одним обработчиком

К примеру, возьмем три формы.

Присвойте каждой форме свой уникальный id. У нас это form1, form2 и form3. Кроме того, для стилизации формы примените классы css, для отображения подсказки включите атрибуты placeholder, а для формирования темы письма добавьте скрытый input.

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

Отправка формы без перезагрузки страницы

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

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

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

update: При необходимости восстановления формы после отправки данных, вы можете использовать следующее решение (вставьте выделенный код в указанное место и оберните все input в форме в div с id, например inputs):

Метод .load() загружает данные и вставляет в указанный элемент.

«#parent» — id формы, в которую необходимо вставить удаленные данные.
В приведенном примере скрипта с отправкой данных форм без перезагрузки страницы, оберните в div все input. Назначьте ему id, например inputs. Этот div с вложенными полями input удаляется скриптом, на его месте появляется сообщение об отправке. Получается, что в коде остается тег form с id, этот id необходимо указать в #parent, это станет контейнером для загрузки скриптом данных формы (удаленные input).

«http://site.ru» — адрес вашей страницы с формой, откуда скрипт загрузит удаленные input. Например, если ваша форма будет находиться по адресу http://site.ru/contacts.html, вставляете этот адрес.

«#child» — id блока, который содержит input. В данном случае div #inputs.

3000 — время в мс через которое восстановится код формы.

PHP обработчик

Большинство форм для передачи данных используют метод POST, это позволяет «спрятать» данные формы и не загромождать URL в адресной строке.

Данный обработчик содержит проверку метода передачи данных.

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

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

Ajax RDmailform — форма отправки сообщений без перезагрузки страницы

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

Код формы базируется на двух js: jquery.form.min.js — для ajax отправки и jquery.rd-mailform.min.js — валидация полей + календарь (связана с jquery.form.min.js). Данную форму я нашел на западном сайте, она настолько мне понравилось, что пришлось потратить день, чтобы понять принцип ее работа, а также создать удобный пакет установки.

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

Скриншоты:

Особенности формы:
— может через ajax передовать файлы в любом количестве на почту
— вместо checbox и радиокнопок используются select-ы
— можно задавать иконки на каждое поле, по умолчанию карандаш
— можно создавать любое количество таких форм
— есть валидация полей
— красивые статусы ошибки/отправки формы
— из главного минуса — нет мультиселектов (только если обрубить select в jquery.rd-mailform.min.js)
— адаптивный дизайн (форма сама подстраивается под размер экрана с viewport)
— если поле создать с типом type=»date», то к нему автоматически подгрузится календарь

Установка формы

В скачанном примере просто скопировать форму с классом rd-mailform. В action поставьте ссылку на исполняющий php файл.

Добавление поля на примере input (главное, чтобы различались name полей):
<div>
<label data-add-placeholder data-add-icon>
<input placeholder=»Ваше имя» type=»text» name=»name» data-constraints=»@NotEmpty @LettersOnly»/>
</label>
</div>

В label:
data-add-placeholder — для эффекта исчезновения placeholder (при клике)
data-add-icon — добавляет иконку (font-awesome) для поля в зависимости от ИМЕНИ поля. (В этом случае всегда должен быть type=»text»).

В input:
data-constraints=»@SelectRequired» — условие перед отправкой поля (обязательные поля или формат записи). Возможные значения внизу.

Доступные иконки:
Карандаш (по умолчанию): name=»msg*»,
ФИО: name=»name*», Почта: name=»email*»,
Телефон: name=»phone*»,
Дата: name=»date*»,
Люди: name=»guests*»
Новые иконки можно добавить в rd-mailform.css (1294 строка)

Форматы полей и обязательные поля:
‘@LettersOnly’: {message: ‘Пожалуйста, используйте только буквы!’},
‘@NumbersOnly’: {message: ‘Пожалуйста, используйте только цифры!’},
‘@NotEmpty’: {message: ‘Поле не должно быть пустым!’},
‘@Email’: {message: ‘Введите верный адрес электронной почты!’},
‘@Phone’: {message: ‘Введите правильный номер телефона!’},
‘@Date’: {message: ‘Используйте MM.DD.YYYY формат!’},
‘@SelectRequired’: {message: ‘Пожалуйста, выберите вариант!’}

Статусы отправки — что должен возвращать php обработчик, после успешной/не успешной отправки сообщения:
‘MF000’: ‘Отправлено!’,
‘MF001’: ‘Получатель не устанавлен!’,
‘MF002’: ‘Форма не будет работать локально!’,
‘MF003’: ‘Пожалуйста, заполните поле email в форме!’,
‘MF004’: ‘Пожалуйста, определите тип Вашей формы!’,
‘MF254’: ‘Что-то не сработало в функции PHPMailer!’,
‘MF255’: ‘Произошла ошибка отправки формы!’

Статус организовать очень просто, например, если в mail.php у вас форма отправилась успешно, то пишите: echo ‘MF000’;

В php обработчик вся информация передается методом serialize(), поэтому там могут быть и файлы $_FILES.

Форма обратной связи- Testograf.ru

02. 10. 2016

Форма обратной связи или контактная форма устанавливается на сайт при помощи html кода. Другими словами, ее можно назвать html-форма. Вы можете легко создать форму обратной связи с любыми полями. Обычно форма обратной связи для сайта включает такие поля как имя, e-mail, телефон и поле для сообщения. На Тестографе вы можете совершенно бесплатно создать форму обратной связи и встроить ее на сайт используя html код или виджет (всплывающее окно).

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

Создать форму

2) Установка на сайт. Перейдите во вкладку «Сбор ответов» / «Встраивание». Скопируйте код формы и вставьте его на сайт. Форма также может быть доступна по ссылке.

Пример HTML кода формы обратной связи: <div></div><script type=»text/javascript» src=»https://www.testograf.ru/ru/iframe/script/14051/?secure-code=f8afbd22b5″ ></script>

3) Уведомления о новых сообщениях. Настройте уведомления о новых ответах. Для этого перейдите во вкладку E-mail уведомления. Выберите: «Уведомлять о новых ответах: каждый новый ответ».

После получения каждого нового ответа вам на e-mail придет такое сообщение:

Вы получили новый ответ на “Форма обратной связи”.
Дата и время: 02.10.2016 12:15:53

1.* Имя:

Андрей

2.* E-mail

[email protected]

3.* Телефон

8 926 746 33 40

4.* Причина обращения:

Вопросы по работе сайта

5.* Сообщение:

Добрый день! Подскажите, как оплатить услуги сайта от юр лица?

Смотрите также:

Testograf — конструктор форм, анкет и опросов

Как добавить на свой сайт контактную форму, отличную от PHP | автор: Jae Johns

Введение — Нажмите здесь, чтобы увидеть статью
. Установка бесплатного хостинга и домена. — Нажмите здесь, чтобы увидеть статью
. Установка бесплатной базы данных с помощью Google Sheets. — Нажмите здесь, чтобы увидеть статью
. Свяжите базу данных Google Sheet с веб-сайтом. для получения данных из базы данных в цикле — Щелкните здесь, чтобы перейти к статье
Добавить функцию поиска на веб-сайт — Щелкните здесь, чтобы перейти к статье
Добавить контактную форму, не зависящую от PHP

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

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

Это уже не так, и я покажу, что вы можете очень легко получить контактную информацию пользователя.

Благодаря возможностям Formspree нам нужно всего лишь добавить несколько строк кода на ваш веб-сайт.

Добавьте код для формы:

Отправить

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

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

Это пример данных того, что вы получите в электронном письме после того, как пользователь отправит контактную форму.

Обратите внимание, что каждое поле слева называется адрес электронной почты, имя и т. Д., А справа отображается информация.

электронная почта [email protected]

имя heya

фамилия thereson

сообщение вы слышите меня знаю

Подробные инструкции по использованию Formspree можно найти здесь.

Получите больше информации в моем блоге jaejohns.com/blog

Обработка форм в JavaScript

Всего несколько дней до открытия 2021 JavaScript Full-Stack Bootcamp .
Записывайтесь в лист ожидания!

Формы — чрезвычайно важная часть HTML и веб-платформы. Они позволяют пользователям взаимодействовать со страницей и

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

и многое другое.

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

  <форма>
  ...
  
  

Мы можем переопределить это поведение, установив атрибут action элемента формы, используя метод HTML, определенный атрибутом method , который по умолчанию имеет значение GET :

  

  ...
  
  

При щелчке по элементу ввода «Отправить» браузер отправляет POST-запрос на URL-адрес / контакт в том же источнике (протокол, домен и порт).

Используя JavaScript, мы можем перехватить это событие, отправить форму асинхронно (с XHR и Fetch ), а также мы можем реагировать на события, происходящие в отдельных элементах формы.

Перехват события отправки формы

Я только что описал поведение форм по умолчанию без JavaScript.

Чтобы начать работу с формами на JavaScript, необходимо перехватить событие submit в элементе формы:

  const form = document.querySelector ('форма')
form.addEventListener ('submit', event => {
  // обнаружено событие отправки
})
  

Теперь внутри функции обработчика событий отправки мы вызываем метод event.preventDefault () , чтобы предотвратить поведение по умолчанию и избежать отправки формы для перезагрузки страницы:

  const form = документ.querySelector ('форма')
form.addEventListener ('submit', event => {
  // обнаружено событие отправки
  event.preventDefault ()
})
  

На этом этапе нажатие кнопки отправки события в форме ничего не сделает, кроме предоставления нам элемента управления.

Работа с событиями элемента ввода

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

• ввод срабатывает в элементах формы при изменении значения элемента
• изменение запускается в элементах формы при изменении значения элемента.В случае текстового input элементов и textarea , он запускается только один раз, когда элемент теряет фокус (не для каждого отдельного набранного символа)
• cut срабатывает, когда пользователь вырезает текст из элемента формы
• копия срабатывает, когда пользователь копирует текст из элемента формы
• paste срабатывает, когда пользователь вставляет текст в элемент формы
• focus срабатывает, когда элемент формы получает фокус
• размытие срабатывает, когда элемент формы теряет фокус

Вот пример демонстрации формы на Codepen:

См. Перо Демо-версия Form Events от Flavio Copes (@flaviocopes) на CodePen.

Учебный курс 2021 JavaScript Full-Stack Bootcamp начнется в конце марта 2021 года. Не упустите эту возможность, подпишитесь на лист ожидания!

Другие руководства по браузеру:

10 фрагментов кода для создания красивых форм

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

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

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

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

Панель инструментов веб-дизайнера

Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многого другого!

1.Материальный дизайн

Все знают о языке материального дизайна Google за последние несколько лет. Концепции материального дизайна были нацелены на приложения для Android, но быстро распространились в Интернете.

Если вам нравится минималистский стиль пользовательского интерфейса материалов Google, ознакомьтесь с этой формой материалов, созданной Джоном Ульманном.

Он работает на Sass и Pug для предварительной обработки CSS / HTML. Это также довольно легкая форма, и элементы материального дизайна должны отображаться одинаково во всех браузерах.

Поистине источник вдохновения для всех дизайнеров материалов.

2. Под водой

Совершите путешествие в океан в этой уникальной контактной форме, созданной в водном стиле.

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

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

3. Форма Bootstrap 3

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

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

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

4. Elegant Contact

Благодаря значкам Font Awesome и некоторым базовым адаптивным стилям эта контактная форма действительно единственная в своем роде.

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

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

И если вы ищете что-то немного уникальное, попробуйте добавить в смесь другой шрифт.

5. Крошечный логин

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

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

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

6. Комбинация входа и регистрации

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

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

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

7. Классная доска Контакт

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

Плюс деревянный бордюр помогает продать эту вещь как настоящую.

  

  

     Имя 
    
     Электронная почта 
    
     Сообщение 
     
     Отправить