Как сделать отправку формы на почту html и javascript

jQuery SendMail

универсальный плагин отправки HTML-форм
средствами PHP, jQuery, AJAX.

Особенности

Универсальный плагин отправки HTML-форм средствами PHP, jQuery, AJAX. Плагин автоматически собирает значения всех полей формы и в виде HTML-таблицы отправляет на указанный почтовый ящик. Для удобной и надежной отправки писем через SMTP-сервер используется библиотека PHPMailer.

• Отправка форм без перезагрузки страницы — AJAX
• Поддержка всех типов полей HTML5
• Поддержка отправки вложений (single, multiple)
• Возможность задавать массив получателей, отправителя, тему, редактировать HTML-содержимое письма
• Сохраняется работоспособность форм при отключенном JS (можно создавать/задвать отдельные страницы и переправлять на них при событиях: «Форма успешная отправлена» и «Ошибка при отправке формы»)
  Рекомендации по оформления подобных форм

Пакетные менеджеры

Подключение

1. Подключить последнюю версию jQuery и jquery.sendmail.js

2. В корневую директорию сайта скопировать папку mail/ со всем ее содержимым. В файле mail/sendmail.php отредактировать значения следующих обязательных параметров:

Значения параметров: SMPT-адрес сервера , TCP-порт , SMTP TLS/SSL , SMPT-аутентификация будут зависить от почтового ящика, который будет выбран в качестве отправителя. По умолчанию все настройки заданы для gmail.com .

3. Создать HTML-форму:

4. Инициализировать плагин на форме/ах:

Параметры

Примеры использования параметров

Параметры: sendmail.php

Методы

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

События

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

Data-атрибуты

Параметры в data-атрибуте имеют наивысший приоритет. Они переопределят параметры по умолчанию, а так же пользовательские параметры заданные при инициализации. Значение атрибута — валидный JSON.

Переопределение параметров по умолчанию

Рекомендации

Для поддержки работоспособности формы в случае отключенного в браузере JS, всегда указывать в теге <form> атрибуты action=»» и method=»» с актуальными значениями.

Для отправки вложений, обязательно наличие аттрибута enctype=»multipart/form-data» в теге <form>

Для отправки нескольких вложений из одного поля <input type=»file»> , обязательно наличие конструкции [] в атрибуте name=»upload[]» , а также наличие атрибута multiple .

При использовании <select multiple> , обязательно наличие конструкции [] в атрибуте name=»choose-colors[]»

Прикрепление файла к письму из sendmail.php (ссылка на файл, относ. путь):

Файлы error.html и success.html не обязательны. Если у пользователя в браузере отключен JS или по каким-либо причинам не удалось отправить форму AJAX-ом, перенаправление будет происходить именно на эти страницы. Отключить перенаправление можно в файле sendmail.php , установив переменным $success_page и $error_page пустые значения или false.

SMPT-адреса серверов наиболее популярных почтовых сервисов ( sendmail.php , $smtp_host ):

Следующие параметры зачастую у всех сервисов одни и те же.

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

• Зайти на https://myaccount.google.com под используемым в скрипте аккаунтом Google
• В меню слева перейти по «Безопасность»
• Ниже «Ненадежные приложения, у которых есть доступ к аккаунту» -> «Открыть доступ» или перейти по ссылке https://myaccount.google.com/lesssecureapps и выставить переключатель в положение «Небезопасные приложения разрешены»
• Перейти по ссылке https://accounts.google.com/DisplayUnlockCaptcha и нажать «Продолжить»

Примеры использования

Пример: Всплывающие окна после отправки

SendMail в связке с FancyBox. Всплывающие окна на 3 основных события.

Пример: Валидация формы

Валидация формы на примере jQuery Validation Plugin

Пример: Внесение доп. данных в таблицу письма

Свойства объекта instance.addData (ключ-значение) будут добавлены к общим данным формы
и выведены в таблице Email-письма.

История изменений

2.0.5 — 23.02.2019

• Изменены наименования некоторых событий

2.0.2 — 15.01.2019

• Полностью переработана структура плагина
• Функции обратного вызова заменены соотв. событиями
• Исправлено содержимое ответов от сервера, получ. в событиях «afterSend.sml», «success.sml», «serverError.sml», «ajaxError.sml». Ошибки от PHPMailer по умолчанию переведены на русский язык.
• Изменена логика перенаправлений на страницы «success.html» и «error.html»
• Добавлена возможность расширить передваемые из формы в таблицу данные, собственными, при помощи события «beforeSend.sml»
• Добавлен параметр «freeze», запрещающий повторную отправку формы на указанное время
• Другие мелкие исправления

1.0.8 — 07.10.2018

• Исправлены проблемы с путями в файле sendmail.php
• Незначительные правки в коде

1.0.7 — 22.09.2018

• Обновление библиотеки PHPMailer до версии 6.0.5

1.0.6 — 21.08.2018

• Колбэк «beforeSend» прерывает отправку письма при «return false»
• Некоторые правки для комфортной работы с jQuery Validation Plugin (пример в demo/index.html)

1.0.3 — 20.08.2018

• Незначительные правки в коде (не повливают на работу плагина)

1.0.2 — 18.08.2018

• Добавлена поддержка цепочек вызовов
• Незначительные изменения в именах некоторых переменных
• Правки в readme.md

Лицензия (MIT)

Copyright (c) 2018-2019 Sergey Kravchenko

Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:

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

ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ ГАРАНТИИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО КАКИМ-ЛИБО ИСКАМ, ЗА УЩЕРБ ИЛИ ПО ИНЫМ ТРЕБОВАНИЯМ, В ТОМ ЧИСЛЕ, ПРИ ДЕЙСТВИИ КОНТРАКТА, ДЕЛИКТЕ ИЛИ ИНОЙ СИТУАЦИИ, ВОЗНИКШИМ ИЗ-ЗА ИСПОЛЬЗОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫХ ДЕЙСТВИЙ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.

Отправка форм при помощи JavaScript

HTML формы могут декларативно отправлять HTTP (en-US) -запросы. Но формы также могут подготовить HTTP-запросы для отправки с помощью JavaScript, например при помощи XMLHttpRequest . В этой статье исследуются подобные подходы.

Формы не всегда формы

В современных веб-приложениях, одностраничных приложениях и приложениях на основе фреймворков, обычно HTML-формы (en-US) используются для отправки данных без загрузки нового документа при получении данных ответа. В начале поговорим о том почему это требует другого подхода.

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

Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счёт предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).

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

Асинхронная отправка произвольных данных обычно называется AJAX, что означает «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML).

Чем он отличается?

Объект XMLHttpRequest (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, XMLHttpRequest был разработан для получения и отправки XML (en-US) в качестве формата обмена, который со временем был заменён на JSON (en-US) . Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы ( application/x-www-form-urlencoded ) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в multipart/form-data .

Примечание: Сейчас Fetch API часто используется вместо XHR — это современная, обновлённая версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.

Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.

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

Так как нам следует отправлять подобные данные? Ниже описаны различные необходимые вам техники.

Отправка данных формы

Есть три способа отправки данных формы:

• Создание XMLHttpRequest вручную.
• Использование самостоятельного FormData объекта.
• Использование FormData связанного с <form> элементом.

Давайте рассмотрим их подробнее:

Создание XMLHttpRequest вручную

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

Посмотрите на пример:

И на JavaScript:

Примечание: This use of XMLHttpRequest is subject to the same-origin policy (en-US) if you want to send data to a third party web site. For cross-origin requests, you’ll need CORS and HTTP access control (en-US) .

Using XMLHttpRequest and the FormData object

Building an HTTP request by hand can be overwhelming. Fortunately, the XMLHttpRequest specification provides a newer, simpler way to handle form data requests with the FormData (en-US) object.

The FormData (en-US) object can be used to build form data for transmission, or to get the data within a form element to manage how it’s sent. Note that FormData (en-US) objects are «write only», which means you can change them, but not retrieve their contents.

Using this object is detailed in Using FormData Objects (en-US) , but here are two examples:

Using a standalone FormData object

You should be familiar with that HTML sample. Now for the JavaScript:

Here’s the live result:

Using FormData bound to a form element

You can also bind a FormData object to an <form> element. This creates a FormData object that represents the data contained in the form.

The HTML is typical:

But JavaScript takes over the form:

Here’s the live result:

You can even get more involved with the process by using the form’s elements property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the example in Accessing the element list’s contents в HTMLFormElement.elements.

Dealing with binary data

If you use a FormData (en-US) object with a form that includes <input type=»file»> widgets, the data will be processed automatically. But to send binary data by hand, there’s extra work to do.

There are many sources for binary data, including FileReader , Canvas , and WebRTC (en-US) . Unfortunately, some legacy browsers can’t access binary data or require complicated workarounds. To learn more about the FileReader API, see Using files from web applications.

The least complicated way of sending binary data is by using FormData (en-US)‘s append() method, demonstrated above. If you have to do it by hand, it’s trickier.

In the following example, we use the FileReader API to access binary data and then build the multi-part form data request by hand:

As you see, the HTML is a standard <form> . There’s nothing magical going on. The «magic» is in the JavaScript:

Here’s the live result:

Conclusion

Depending on the browser and the type of data you are dealing with, sending form data through JavaScript can be easy or difficult. The FormData (en-US) object is generally the answer, and you can use a polyfill for it on legacy browsers.

Форма обратной связи HTML с отправкой на почту: как создать с использование javascript, ajax и без php + исходники кода к уроку

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

Как создается форма обратной связи html с отправкой на почту: 3 варианта + капча Гугл

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

Обратная связь (feedback) – это не просто контакты, здесь клиент заполняет поля, обычно это title, name, e-mail и text, нажав кнопку “submit”, произойдет отправка на обработку, дальше остается ждать ответа. ИСХОДНИКИ КОДА СМОЖЕТЕ СКАЧАТЬ ДАЛЕЕ .

Советую также продумать защиту от ботов, иначе вы можете столкнуться с ситуацией, когда спамеры начнут применять роботов, чтобы отправлять рекламу. Во избежание подобных проблем следует вставить капчу. Можно её написать самому, но лучше воспользоваться готовым инструментом reCaptcha от google . Ниже будет описано, как её установить.

Вариант 1. с помощью Javascript

JS, это клиентский язык программирования, он умеет соединяться c “пхп” даже без сторонних библиотек. Разберем простой пример, есть некий посетитель, известно его имя и email. Пусть это будет “Tom” с email@gmail.com . Эти данные мы занесем в массив user, для отсылки воспользуемся классом XMLHttpRequest, таким образом, у нас будет напрямую соединение с сервером. Response-Text- это данные полученные с хоста, их выведем в специальный контейнер div, у которого атрибут id output. Примерно вот так.

У объекта XMLHttpRequest есть несколько методов:

• Open инициализирует созданный запрос, вызывается сразу после XMLHttpRequest , передает пять параметров: method (get, post и т.д). Url – здесь указывается php скрипт. Async – выполняется запрос? асинхронно принимает логическое значение (true|false). Последние два это user и password, используются для аутентификации, по умолчанию стоит null. В нашем случае при инициализации мы воспользуемся только первыми двумя параметрами.
• Onreadystatechange – вызывается при изменении readyState . В свойство readystatechange, можно присвоить функцию, которая будет вызываться после получения данных с сервера.
• Send – отправляет инфу, которая была инициализирована в open.

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

ReqReadyStateChange , срабатывает при получении данных с сервера. Если status 200 , это означает “ok”, хост запущен, наш результат в конечном итоге отобразиться в div контейнере output. Принимающий файл выглядит вот так, обратите внимание “echo”, это вывод в браузере, он отдается клиентской части JS и показывает в innerHTML:

Важно: при тестировании, скорее всего, вы получите непонятные символы. Вся проблема заключается в сбитой кодировке. Чтобы это исправить, вставьте вначале заголовок header(‘Content-type: text/html; charset=utf-8’) ;. Смотрим рисунок выше.

Сделаем реальную отправку forms, на этот раз применим method post . Наш “фитбек” будет состоять из четырех полей: тема сообщения, имя автора, email и text.

Чтобы отправить заполненные поля, требуется обработчик событий addEventListener . В нашем скрипте будет передано в него два значения click (щелчок мышки) и функция, она будет срабатывать при нажатии кнопки submit. Для получения элементов воспользуемся объектом document.

Важно: document является главным. С его помощью в JS вызываются все dom-объекты и обработчики событий. Поэтому записав через точку forms.user, мы вызовем forms, у которой атрибут name=”user”.

Полученную форму нужно присвоить переменной, например “var form” . Потом эти данные заносятся в объект FormData, этот object отправляем на server через функцию send.

Что получилось, смотрим на картинке. В принципе код мало чем отличается от реализации выше, единственное различие, это параметры “open”, первый method теперь post, второй мы получаем из формы.

С помощью mail обычно присылают описание проблемы. Эта функция принимает четыре значение: email, subject(тема письма), message и header . Дальше смотрим готовый вариант.

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

1. Заголовок header, который содержит “From: $name <$useremail>\r\n\r\n” . Получив сообщение от посетителя вебсайта, администратору достаточно нажать кнопку “ответить”, чтобы пообщаться с пользователем.
2. Это переменная $youremail, здесь указывается почтовый ящик, куда хотите получать все письма.
3. Текст “месседж ($message)” – приходит сообщение, там сам текст и имя отправителя. ( “Вам пришло сообщение от, $name!\n Текст сообщения: $text” ;).

Внимание: при создании скрипта feedback, вы можете столкнуться с нарушением кодировки, ранее мы писали, как с этим бороться, но указанный ваше вариант может оказаться не эффективным по той причине, что придется добавлять заголовок в каждый документ, и мы можем получить предупреждение “modify header”. Для решения подобной проблемы лучше задать кодировку в специальном файле. Создайте htaccess и запишите в него AddDefaultCharset UTF-8 .

Вариант 2. Без php обработчика

Быстрый вариант разработать “фидбэк”, без языков программирования, это вставить ссылку c помощью тега “a” и добавить в href специальное слово mailto:youremail. Полностью, это будет выглядеть вот так:

<a href=”mailto: youremail@yandex.ru“> Почта администратора </a> . Когда вы щелкните по этой ссылке, откроется программа outlock. Адрес автоматически подставиться в поле “кому”.

Дальше остается указать тему и text, после этого нажать кнопку отправить. Сообщение придет от имени отправителя, на которого зарегистрирован outlook.

Вариант 3. используя технологию Ajax

Технология ajax умеет отправлять инфу на хост без перезагрузки страницы, при этом снижая нагрузку на вебсайт. Скрипт срабатывает при нажатии на ссылку submit, вся информация будет проверена на корректность. Например, юзер заполняет поле name, при отправке будет проверяться, что имя состоит из букв латинского и русского алфавита, а не из непонятных символов. Для почтового адреса создадим регулярное выражение, чтобы проверялся формат введённого e-mail: “youremail@example.com” .

Если посетитель заполнил информацию о себе не соответствующие маскам, то мы можем выслать предупреждение с помощью alert и завершим скрипт командой return. Какие еще можно сделать улучшения? Большинство клиентов, посещая ресурсы, обращают внимание на дизайн. Красивая форма связи для сайта неплохо будет смотреться, если оформить её с помощью стилей. Для этого подключим css и запишем необходимую конструкцию. Основной особенностью станет, плавное исчезновение submit, и появление сообщения об успешной отправке. В теги head, разместим таблицу стилей, чтобы задать верстку.

Кнопка будет состоять из кадров, при щелчке произойдет, смена кадра и появится новая надпись “Работаю”, это может быть полезно, в том случае, если server долгое время не отвечает и надо оповестить клиента, чтобы тот не ушел. Прилагающий спрайт кнопки и задний фон поставляется вместе с исходниками. Ниже на картинке html скрипт.

В теге head добавлен script, также “(document)ready” будет содержать обработчик мыши. В div, у которого есть класс container, четыре поля и ссылка submit. Пример смотрите выше. При нажатии вся инфа отправиться в javascript и будет выполнен асинхронный запрос, соединившись с “пхп” и последующей передачи на хост. Полностью js-script показан ниже.

Константы emailRegex , name и themeRegex содержат регулярные выражения, чтобы выполнить проверку требуется создать несколько функций test и внести в их скобки значения: строку, которую собираемся закинуть на host.

Если проверка пройдёт нормально, то начинаем делать запрос, используя ajax. В скобках url, это submitUrl название “пхп” файла, который примет наши данные, type –метод post, data – подготовленный список полей, который будет отправлен на host. После выполнения запроса, плавно появится текст, оповещающий об успехе и завершении операции.

В тегах head, добавлен main.css, он отвечает за стиль верстки. Полностью его структура выглядит вот так:

Когда произойдет клик по submit, data.php начнет принимать данные с клиентской стороны. Подробно рассказывать, про его работу мы не будем. Об этом уже писали ранее, но “screenshoot” все же приложим, он находится ниже.

Бывают ситуации, когда администратор, подписан на несколько интересных пабликов или веб-сайтов, например по сео, на e-mail постоянно приходит новый материал. При проверке может случиться так, что среди кучи писем, вопрос заданный читателем просто затеряется. В таком случае есть выход, достаточно реализовать отправку “месседжей” в базу данных (БД). Таким образом, вы всегда будете в курсе, когда вам напишет посетитель блога.

Для записи в БД оповещений от юзеров, надо создать таблицу с пятью полями: id, theme, name, email и text . При вызове php файла, произойдет добавление “INSERT”, что значит вставка записи. Как это сделать смотрите выше.

Установка защиты с капчей Гугл ( робот reCaptcha )

Некоторые юзеры предпочитают ботов для автоматической рассылки рекламы когда создается форма обратной связи HTML с отправкой на почту. Чтобы избежать нежелательный spam, рекомендуется поставить капчу от Гугла. reCaptcha работает по принципу выбора определенных изображений, на которых находятся объекты, например светофоры, велосипеды, машины и другие. Человек легко справиться с этой задачей, а вот робот окажется в тупике. Чтобы настроить капчу, нужно перейти на сайт Google и заполнить форму регистрации. Делаем запрос в поисковике, выбираем первый сайт.

Откроется страница, щелкаем по ссылке “Admin Console” , она находится вверху. Появится форма регистрация сайта, заполняем, как показано на картинке и жмем кнопку отправить.

Дальше сервис выдаст два ключа, первый “ключ сайта” разрешен к публикации на ресурсе, второй секретный показывать нельзя. После того, как забрали два ключа, переделаем страницу с нашей feedback. Подключим в начале api.js, и немножко изменам структуру “хтмл”, образец ниже.

Теперь можно попробовать протестировать, если все сделано правильно, мы получим.

Javascript проверяет у нас все заполненные поля, на предмет ввода. Капчу, тоже следует протестировать, для этого есть getResponse, он получает токен, если удалось правильно выбрать изображения, в противном случае мы вернем пустоту. Убедиться в этом можно через alert(v);. Взято со “скрина” ниже.

Проверку капчи, также следует делать на php. Здесь пригодиться секретный ключ, который мы ранее скопировали. Делаем проверку.

Переменная $url, это ссылка, которая соединяет с api капчей Гугл. В $key записываем секретный ключ. Все это объединяем запрос с помощью конкатенации (точка) строк.

Используем Google.com, и присоединяем к этому домену параметры в виде get строки: secret, response, remoteip .

Результат $query можно вывести через echo. Но нам требуется получить массив, для этого воспользуемся json_decode, Если посмотреть json через var_dump, то он покажет array содержащий список значений success, hostname и “дата и время”. Нам нужен первый элемент “success”, он осуществляет проверку капчи, если она проходит, то возвращает true. Все что описано здесь, показано на скрине выше.

Стандартная форма “фидбек” обычно состоит из input и textarea . На многих веб-сайтах владельцы увеличивают функционал дополнительными полями, например, возможность выбрать тип отправляемого письма, через раскрывающий список: реклама, предложение и так далее. Input с атрибутом type=”file” применяют, чтобы осуществить отправку с вложением к письму. Для тех случаев, когда вопрос необходимо сопроводить картинкой.

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

СКАЧАТЬ исходники кода к уроку можно по ссылке ниже:

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

Как сделать отправку формы на почту html и javascript

Note: This use of XMLHttpRequest is subject to the same-origin policy (en-US) if you want to send data to a third party web site. For cross-origin requests, you’ll need CORS and HTTP access control.

Using XMLHttpRequest and the FormData object

Building an HTTP request by hand can be overwhelming. Fortunately, the XMLHttpRequest specification provides a newer, simpler way to handle form data requests with the FormData (en-US) object.

The FormData (en-US) object can be used to build form data for transmission, or to get the data within a form element to manage how it’s sent. Note that FormData (en-US) objects are «write only», which means you can change them, but not retrieve their contents.

Using this object is detailed in Using FormData Objects, but here are two examples:

Using a standalone FormData object

You should be familiar with that HTML sample. Now for the JavaScript:

Here’s the live result:

Using FormData bound to a form element

You can also bind a FormData object to an <form> element. This creates a FormData object that represents the data contained in the form.

The HTML is typical:

But JavaScript takes over the form:

Here’s the live result:

You can even get more involved with the process by using the form’s elements property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the example in Accessing the element list’s contents в HTMLFormElement.elements.

Dealing with binary data

If you use a FormData (en-US) object with a form that includes <input type=»file»> widgets, the data will be processed automatically. But to send binary data by hand, there’s extra work to do.

There are many sources for binary data, including FileReader , Canvas , and WebRTC. Unfortunately, some legacy browsers can’t access binary data or require complicated workarounds. To learn more about the FileReader API, see Using files from web applications.

The least complicated way of sending binary data is by using FormData (en-US)‘s append() method, demonstrated above. If you have to do it by hand, it’s trickier.

In the following example, we use the FileReader API to access binary data and then build the multi-part form data request by hand:

As you see, the HTML is a standard <form> . There’s nothing magical going on. The «magic» is in the JavaScript:

Here’s the live result:

Conclusion

Depending on the browser and the type of data you are dealing with, sending form data through JavaScript can be easy or difficult. The FormData (en-US) object is generally the answer, and you can use a polyfill for it on legacy browsers.