No Image

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

СОДЕРЖАНИЕ
5 просмотров
10 марта 2020

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

Библиотека jQuery очень удобный инструмент. Она очень сильно упрощает работу с ajax -запросами, для этого у неё есть специальная конструкция.

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

Так, как мы работаем с библиотекой jQuery , не забываем подключить её в файла index.html следующей строкой:

Теперь создадим папку js , в которую поместим наш будущий скрипт в файле под названием ajax.js . Подключаем этот файл в index.html , следующей строкой в :

Теперь добавим id тэгу

Открываем файл ajax.js и добавляем туда следующий код:

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

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

Мы записали функцию, которая будет отправлять данные через ajax, теперь добавим с типом submit событие onClick (Выполняет при нажатии на элемент), по которому и будет вызываться эта функция.

Вот как станет выглядеть форма полностью:

Если теперь попробовать послать сообщение, то страница всё равно перезагрузится, потому что для с типом submit это заложено в коде по-умолчанию. Проблема решается изменением типа на button :

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

А исходники скачать по ссылке ниже:

Если у вас есть вопрос, задавайте их в комментариях ниже.

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

Для этой тривиальной задачи, я заранее нашел и модифицировал скрипт, который работает на AJAX технологии. Также я подготовил красивое оформление полей, используя фреймворк Bootstrap 3. Достаточно скопировать мои CSS-стили и форма примет готовый для использования вид.

Читайте также:  Acer extensa 2508 драйвера windows 7

1 – подключаем Jquery библиотеку:

2 – устанавливаем HTML форму с использованием Bootstrap разметки:

3 – размещаем JS скрипт

Этот скрипт размещается непосредственно под HTML формой и после объявления jQuery.

4 – рассмотрим код обработчика, который нужно разместить в файл post.php

В обработчике достаточно поменять значение переменной $mail_to, вписав туда свою почту.

4 – копируем стили оформления

Для корректного отображения формы должен быть подключен Bootstrap 3.

Вот и все! Наша форма готова. Скачивайте и оставляйте свои комментарии.

  • PHP 4/5/7, Perl 5, Python, Zend, phpMyAdmin;
  • SSH, sFTP/FTP доступ;
  • Возможность заказа дополнительных IP-адресов;
  • POP3, IMAP, SMTP для работы с почтой;
  • Неограниченное количество доменов и поддоменов;
  • Неограниченный трафик;
  • Автоматическая установка CMS;
  • Управление DNS-записями;
  • И еще много разных ништяков 😉

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?

Похожие статьи:

Комментарии ( )

Здравствуйте! Я не тестировал, но должно сработать вот так:

После этой строчки
$(‘.messages’).html(data.result);

Нужно добавить в select атрибут name, вот так:

Здравствуйте Алексей. Все сделал как вы сказали но что то не работает. Не отправляет форма. Показывает что поле select не заполнено.
в файл PHP дополнительно добавил следующее ниже скрипт. Вроде скрипт php делает проверку поля select но само поле в html остается чистым незаполненным возможно что то с не стыковка с bootstrap.CSS или надо дописать CSS к форме. Если не трудно посмотрите приложил архив form_select.rar

В файл PHP дополнительно добавил следующее.
// проверяем корректность полей if($_POST[‘select[name="form_str"]’] == "") $errors[] = "Поле Тип списков не заполнено"; // собираем данные из формы $message .= "Тип списков: " . $_POST[‘select[name="form_str"]’] . " ";

Вы должны авторизоваться, чтобы оставлять комментарии.

by Andrej — Category Веб-дизайнеру on 27/11/2018

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

Так в конечном итоге будет выглядеть форма обратной связи

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

Структура полей формы обратной связи

  • имя отправителя
  • почтовый адрес
  • телефон
  • компания отправителя
  • сайт отправителя
  • продукт (направление)
  • список необходимых услуг
  • дополнительная информация
  • антиспам / защита от роботов
Читайте также:  Как пользоваться bluescreenview на русском

Особенности и возможности

  • блокировка кнопки «отправить» до выполнения необходиых условий
  • простой селектор для проверки и защиты от роботов
  • дополнительная кнопка «очистить все поля»

Что входит в форму обратной связи?

  • HTML разметка (создание макета)
  • Стилизация полей формы на CSS/SCSS
  • jQuery + js
  • PHP обработчик

Создание HTML разметки

И так, давайте посмотрим на разметку формы:

  1. Здесь есть три первых поля, у которых указан id и некое js-событие onkeyup="checkParams()" (они понадобятся нам позднее). Для них будет проводиться обязательная проверка правильности ввода данных. За это отвечает атрибут required . Если вам необходимо убрать или сделать обязательным другое поле, просто удалите/добавьте этот атрибут.
  2. Несколько дополнительных полей, не являющихся обязательными.
  3. Селектор выбора предоставляемых услуг select .
  4. Поле дополнительной информации textarea .
  5. Селектор для проверки на «человечность» — Я работ | Я человек.
  6. Две кнопки: Отправить и Стереть информацию в заполненных полях.
  7. По-хорошему, здесь еще не хватает поля с галочкой, для подтверждения согласия на обработку данных, но ее добавлению, надеюсь, не вызовет у вас трудностей.

Вроде все. Едем дальше.

Оформление формы CSS/SCSS

Все поля формы стилизованы при помощи CSS flexbox (Flexible Box Layout Module) и разбиты на группы дополнительными классами. Разумеется, вы можете создать свои собственные стили. Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.

Настройка PHP кода

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

Что здесь есть?

  • header(‘Refresh: 5; URL=https://www.site.ru’); — после заполнения формы ботом, отправляет на страничку с уведомлением и через 5 секунд возвращает на указанную в поле.
  • mail, name, phone, . — настройка соответствия html полей. Здесь вам необходимо указать все соответствующие имена name="" в форме обратной связи. Таким образом, в поле services вам необходимо указать точно такой же порядок опций, что и в html разметке.
  • $mess — это тело сообщения, которое будет приходить в письме. Вы можете поменять их местами, изменить названия или просто удалить/закомментировать не нужные.
  • $headers — обязательная строка, указывающая кодировку письма. Если вы случайно сотрете или измените charset=utf-8 , то все ваши слова превратятся в иероглифы.
  • header — после успешного нажатия на кнопку, посетитель будет отправлен на страничку уведомления и через 5 секунд произойдет перенаправление на указанную страничку. Или же else < он получит увдомление об ошибке.
Читайте также:  Auto adjusting как отключить

Здесь все. Едем дальше.

Дополнительные плюшки на js и jQuery

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

Посмотрите на js-код. Это блокиратор кнопки, который при disabled не дает посетителю нажать ее, прежде чем необходимые вам поля будут заполнены.

Мы вставляем id в необходимые поля и disabled в кнопку для того, чтобы привязать их к данному скрипту. Вы можете изменить их названия и количество, добавив/убрав нужные var-строки. Но, если вы добавите или уберете их, не забудьте изменить условия в строке if (name.length != 0 && email.length >= 6 && phone.length >= 10) < .

Как работает эта строка?

Все завязано на количестве символов в указанном поле, т.е. ее длине length .

  • if (name.length != 0 — указывает на то, что поле не должно быть пустым. Читается как — «если в поле число символов не равно нулю, то…»
  • && — объединяет условия (и)
  • email.length >= 6 — кол-во символов должно быть больше или равно 6. Почему шесть? Я указал это число потому, что минимальный почтовый адрес состоит из 6 символов. Проверим? @bk.ru — 6 символов.
  • phone.length >= 10 — больше или равно десяти символам. Почему 10, а не 11 ? При заполнении этого поля, посетитель может указать свой телефон как с +7, так и через 8. Поэтому лучше указывать 10.

На этом все. Подключайте форму, тестируйте и пользуйтесь.

Если у вас остались вопросы, пишите в комментариях и не поскупитесь на оценку статьи. Заранее спасибо &#128578;

Возможно Вас также заинтересует…

Представьте, что у вас на странице сайта есть форма обратной связи, для получения сообщений от…

Введение Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель…

HTML – аббревиатура от Hyper Text Markup Language (англ.) – это язык разметки гипертекста, принятый…

Привет, дорогие читатели! Сегодня, я хочу поговорить о JSFiddle и разобрать вместе с вами этот…

Комментировать
5 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
Adblock detector