От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.
Автор: Павел Карабило
Начинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript. Следуя за мной шаг за шагом, начинающий веб-программист (или веб-дизайнер) сможет создать простую форму, которая сможет стать основой для первой гостевой книги, системы комментариев или другого простого веб-приложения. Надеюсь, в недалеком будущем, я предоставлю вашему вниманию небольшой туториал, в котором расскажу, как из одной такой формы спроектировать и написать гостевую книгу, используя PHP и MySQL.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг 1.
Для начала, давайте определимся, для чего мы будем создавать форму. Если бы мы создавали форму для регистрации на крупном портале, то нам пришлось бы разместить на ней поля для ввода имени, фамилии, логина пользователя, его адреса электронной почты, и, возможно, для его реального адреса, поле для пароля, и т.д. В общем, нам придется разместить на форме целую кучу полей, в которых мы запутаемся, а гости нашего сайта – тем более. Я решил сделать простейшую форму для самой простой гостевой книги, для этого мне понадобится:
поле для ввода имени автора сообщения;
поле для ввода адреса его электронной почты;
текстовую область для написания сообщения;
кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.
Форма обратной связи HTML с отправкой на почту: как создать с использование javascript, ajax и без php + исходники кода к уроку
Как создается форма обратной связи html с отправкой на почту: 3 варианта + капча Гугл
На многих ресурсах можно увидеть контакты e-mail, телеграм или скайп, обычно они находятся в подвале сайта или на отдельной странице. С помощью контактов можно отправить небольшое сообщение владельцу блога и написать вопрос.
Вариант 1. с помощью Javascript
У объекта XMLHttpRequest есть несколько методов:
Важно: при тестировании, скорее всего, вы получите непонятные символы. Вся проблема заключается в сбитой кодировке. Чтобы это исправить, вставьте вначале заголовок header(‘Content-type: text/html; charset=utf-8’) ;. Смотрим рисунок выше.
Важно: document является главным. С его помощью в JS вызываются все dom-объекты и обработчики событий. Поэтому записав через точку forms.user, мы вызовем forms, у которой атрибут name=”user”.
Что получилось, смотрим на картинке. В принципе код мало чем отличается от реализации выше, единственное различие, это параметры “open”, первый method теперь post, второй мы получаем из формы.
Первым параметром – ваш емайл, куда будут приходить все письма, subject – это тема, message – описание проблема и последняя это header (шапка), там устанавливается кодировка и адресат. Допустим, мы решили задать вопрос по статье. Входящее письмо можно увидеть на скриншоте. Для удобства были расставлены цифры, а чуть ниже нумерованный список – объяснения, за что отвечает код в полученном письме.
Вариант 2. Без php обработчика
Быстрый вариант разработать “фидбэк”, без языков программирования, это вставить ссылку c помощью тега “a” и добавить в href специальное слово mailto:youremail. Полностью, это будет выглядеть вот так:
Дальше остается указать тему и text, после этого нажать кнопку отправить. Сообщение придет от имени отправителя, на которого зарегистрирован outlook.
Вариант 3. используя технологию Ajax
Если посетитель заполнил информацию о себе не соответствующие маскам, то мы можем выслать предупреждение с помощью alert и завершим скрипт командой return. Какие еще можно сделать улучшения? Большинство клиентов, посещая ресурсы, обращают внимание на дизайн. Красивая форма связи для сайта неплохо будет смотреться, если оформить её с помощью стилей. Для этого подключим css и запишем необходимую конструкцию. Основной особенностью станет, плавное исчезновение submit, и появление сообщения об успешной отправке. В теги head, разместим таблицу стилей, чтобы задать верстку.
Кнопка будет состоять из кадров, при щелчке произойдет, смена кадра и появится новая надпись “Работаю”, это может быть полезно, в том случае, если server долгое время не отвечает и надо оповестить клиента, чтобы тот не ушел. Прилагающий спрайт кнопки и задний фон поставляется вместе с исходниками. Ниже на картинке html скрипт.
В теге head добавлен script, также “(document)ready” будет содержать обработчик мыши. В div, у которого есть класс container, четыре поля и ссылка submit. Пример смотрите выше. При нажатии вся инфа отправиться в javascript и будет выполнен асинхронный запрос, соединившись с “пхп” и последующей передачи на хост. Полностью js-script показан ниже.
Если проверка пройдёт нормально, то начинаем делать запрос, используя ajax. В скобках url, это submitUrl название “пхп” файла, который примет наши данные, type –метод post, data – подготовленный список полей, который будет отправлен на host. После выполнения запроса, плавно появится текст, оповещающий об успехе и завершении операции.
В тегах head, добавлен main.css, он отвечает за стиль верстки. Полностью его структура выглядит вот так:
Когда произойдет клик по submit, data.php начнет принимать данные с клиентской стороны. Подробно рассказывать, про его работу мы не будем. Об этом уже писали ранее, но “screenshoot” все же приложим, он находится ниже.
Бывают ситуации, когда администратор, подписан на несколько интересных пабликов или веб-сайтов, например по сео, на e-mail постоянно приходит новый материал. При проверке может случиться так, что среди кучи писем, вопрос заданный читателем просто затеряется. В таком случае есть выход, достаточно реализовать отправку “месседжей” в базу данных (БД). Таким образом, вы всегда будете в курсе, когда вам напишет посетитель блога.
Установка защиты с капчей Гугл ( робот reCaptcha )
Некоторые юзеры предпочитают ботов для автоматической рассылки рекламы когда создается форма обратной связи HTML с отправкой на почту. Чтобы избежать нежелательный spam, рекомендуется поставить капчу от Гугла. reCaptcha работает по принципу выбора определенных изображений, на которых находятся объекты, например светофоры, велосипеды, машины и другие. Человек легко справиться с этой задачей, а вот робот окажется в тупике. Чтобы настроить капчу, нужно перейти на сайт Google и заполнить форму регистрации. Делаем запрос в поисковике, выбираем первый сайт.
Дальше сервис выдаст два ключа, первый “ключ сайта” разрешен к публикации на ресурсе, второй секретный показывать нельзя. После того, как забрали два ключа, переделаем страницу с нашей feedback. Подключим в начале api.js, и немножко изменам структуру “хтмл”, образец ниже.
Теперь можно попробовать протестировать, если все сделано правильно, мы получим.
Javascript проверяет у нас все заполненные поля, на предмет ввода. Капчу, тоже следует протестировать, для этого есть getResponse, он получает токен, если удалось правильно выбрать изображения, в противном случае мы вернем пустоту. Убедиться в этом можно через alert(v);. Взято со “скрина” ниже.
Проверку капчи, также следует делать на php. Здесь пригодиться секретный ключ, который мы ранее скопировали. Делаем проверку.
Здесь мы разобрали, как работает форма обратной связи html с отправкой на почту и капчей гугл. Есть много способов улучшить feedback, расширить функционал за счет новых полей и даже сделать мини-форум, где читатели смогут заходить на сайт и смотреть, ответили администраторы или нет. Существует множество вариантов для своего улучшения фидбек.
СКАЧАТЬ исходники кода к уроку можно по ссылке ниже:
Вот так и делаются такие вещи. Если материал понравился не забывай поставить лайк и сделать репост а также почитай статью про генератор онлайн таблиц. Всех благ.
Создание формы обратной связи с валидацией, оформлением, отправкой письма и описанием
Преимущество данной формы в том, что в ней нет необходимости ставить капчу и мучать тем самым ее отправителей, а не спамботов.
Валидация заполненных полей осуществляется средствами jQuery, плюс дополнительно можно добавить проверки на php
Так выглядит форма:
HTML код формы:
Немного о коде:
Комментарии:
Интересно как же заставить работать одновременно две формы, и почему не срабатывают две.
В JS нужно немного поменять, через each сделать форму. Никак не соберусь обновить тут коды…
Очень ждем, а то хотел как раз сделать интеграцию с несколькими формами, а оно не фурычит, ставит еще одну форму не хотелось бы
Если на коммерческой основе, то хоть сейчас:)
Подскажите как поиграть с размерами? Форма не влазит в высоту, слишком большая, раза в 2 бы уменьшить и соответственно шрифт поменьше.
Смотрите по CSS, там даже не зная можно догадаться, проверить и поглядеть результат. Например: height: 50px; — высота верхних полей и кнопки min-height: 170px; — высота поля с доп. инфой
Вопрос такой: как вставить в js код — цель на отправку формы метрики?
Когда форма отправлена:
всё работает по кайфу
Добрый день! Спасибо за крутое решение… долго искал
Подскажите, пожалуйста, как правильно добавить input file, чтобы и можно было получить файлы
Я про отправку файлов не писал в блоге, но можно почитать тут например. Или лучше использовать что то более профессиональное — PHPMailer
Вставил всё это на свою страницу. По нажатию кнопки ничего не происходит.
Нужно результат видеть, я же не могу угодать почему оно не работает
Как показать результат? Выполняю на openserver. При нажатии на кнопку ничего не происходит. Файл стилей и файл скрипта прописаны (отлинкованы)
Когда все прописано, работает как на примере. Ошибки какие-нибудь есть в консоле?
Выдает ошибку 404, типа файл не найден. При этом запрос уходит, а ответ говорит: 404 Not Found — файл сам по пути имеется, указан как со / так и без, разницы нет. Все равно ошибка 404. Есть предположение, что где-то в системе стоит запрет на открытие файлов php, как можно дать разрешение 1 файлу, send.php?
Если 404, то это не запрет php Скиньте результат сюда или в ВК/Телеграм
Добрый день! А файл jQuery как назвать необходимо?
Как сделать простую Форму Обратной связи с AJAX обработкой
Форма обратной связи сейчас есть практически на каждом лендинге или просто на сайте каким-либо образом связанным с продажей своей услуги. По сути, это уже почти обязательный атрибут любого сайта ориентированного на продажу услуг или товаров.
Мы с вами сделаем небольшую форму с полями для имени, телефона и сообщения. Также, мы добавим AJAX запрос для того, чтобы избавить пользователя от неудобного переадресовывания на другую страницу после отправки письма. То есть, после отправки, выскочит сообщение под формой: «Ваше сообщение успешно отправлено».
ШАГ 1. Добавление формы в HTML файл
Для начала нам необходимо в html файл добавить нашу форму. Вставьте вот такой код:
Появляется несколько вопросов: «Что за блок erconts?» «Почему мы оставили action пустым?» «Почему блок erconts имеет display: none?»
Блок erconts будет использован как контейнер для сообщения, которое будет выводится после отправки письма. То есть, в него с помощью ajax мы будем выводить всякого рода ошибки или сообщения с подтверждением отправки.
Action мы оставили пустым, чтобы небыло переадресации на другую страницу после отправки письма, ведь мы используем ajax метод и переадресация нам уже просто не к чему.
Блок erconts будет анимировано появляться с сообщением об успешной отправке сообщения. Анимация будет прописана в коде следующего шага.
ПРИМЕЧАНИЕ! Советую не убирать id callbacks и id submit у елемента form и input соответственно. По этим id мы сможем напрямую обращатся к ним в ajax запросе.
ШАГ 2. Добавление AJAX запроса в javascript файл
Далее, создаем javascript файл, подключаем его в наш html файл. Затем помещаем в javascript файл код ниже:
Как вы видите, мы отлавливаем событие нажатия кнопки с id submit и начинаем вызывать ajax функцию. В строке url: «send.php» вызывается php файл с обработчиком формы, который мы создадим в следующем шаге. В строке data: «$(«#callbacks»).serialize()» собираются данные для обработки, которые ввел пользователь в форму. В функции error выводится сообщение при ошибке отправки. Такое сообщение будет выводится, если вдруг у человека не будет работать интернет или если не был подключен обработчик о котором я писал ранее. В функции beforeSend выводится сообщение перед отправкой. Это сообщение часто даже не видно при отправке, потому что оно мелькает буквально на пару сотен долисекунд из-за быстрой обработки письма. Функция success выводит сообщение при удачной отправки данных письма обработчику.
По сути, этот ajax запрос просто берет данные которые ввел пользователь и передает их в файл обработчика, который мы сейчас будем создавать. А уже из того файла берет сообщение об ошибке или об успешной отправки письма.
ШАГ 3. Создание обработчика формы в PHP файле
Вам нужно в папке вашего сайта создать файл send.php и вставить в него этот код:
Кратко опишу, что делает этот код.
Первая часть кода заносит данные, которые ему передал ajax в свои переменные под названием name, phone и body. Затем, эти переменные проверяются на их содержание. Если хоть одна из них будет пустая, обработчик вернет сообщение об ошибке: «Пожалуйста, заполните все поля». Далее, если эти переменные содержат какие-то данные, то есть, пользователь ввел свои данные, обработчик начинает прорабатывать письмо. Наш обработчик начинает вычислять ip пользователя и его браузер. Далее он конструирует письмо с темой, которую мы можем указать в этом обработчике. Он вставляет переменные с данными в это письмо и проводит отправку на почту, которую вы должны указать в переменной $to в коде этого обработчика. В моем случае я написал свою почту, а вы должны написать свою или ту на которую должно прийти письмо.
Конец кода с помощью функции mail() определяет, получилось ли отправить письмо или нет. Если обработчик смог отправить письмо, он пишет одно сообщение, а если нет, другое.
Вы можете изменять сообщения, которые должен написать этот обработчик пользователю при отправке.
ВСЕ ГОТОВО! Теперь на вашем сайте есть абсолютно работающая форма обратной связи в Ajax исполнении.
Форма обратной связи
