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

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

  • автор:

Как отправить данные из формы обратной связи с помощью одного JavaScript?

Задача:
Используя JavaScript + сторонний сервис — отправлять из формы обратной связи 2 поля:
— имя пользователя,
— телефон пользователя.
Отправка всегда на один и тот же е-мейл.

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

  • Вопрос задан более трёх лет назад
  • 11013 просмотров

Комментировать
Решения вопроса 1

Видимо подниму прокисшую тему, но для отправки данных формы на почту можно использовать простой как спичка https://formspree.io/

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 1

Учи английский — и не будет проблем при выборе сервиса.
А если по теме, то — Firebase Cloud Messaging. Поддерживает все: от Web до Android. Просто .стильно, модно. молодежно!
Справка — https://firebase.google.com/docs/cloud-messaging/j.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

  • JavaScript
  • +1 ещё

Выгрузка JS кода в php, но не просто?

  • 1 подписчик
  • 5 часов назад
  • 53 просмотра

как отправить форму js

Чтобы отправить форму с помощью JavaScript, нужно использовать метод submit() для формы. Это можно сделать так:

const myForm = document.getElementById('myForm'); // получаем форму по ее id myForm.submit(); // отправляем форму 

В этом примере мы получаем форму по ее идентификатору myForm с помощью метода getElementById() , а затем вызываем метод submit() , который отправляет форму.

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

const myForm = document.getElementById('myForm'); myForm.addEventListener('submit', function (event)  // Отменяем стандартное поведение формы event.preventDefault(); // Получаем данные из формы const formData = new FormData(myForm); // Отправляем данные на сервер fetch('/api/submit-form',  method: 'POST', body: formData, >) .then((response) =>  // Обрабатываем ответ от сервера console.log(response); >) .catch((error) =>  // Обрабатываем ошибку console.error(error); >); >); 

В этом примере мы добавляем обработчик событий на отправку формы, который отменяет стандартное поведение формы с помощью метода preventDefault() . Затем мы получаем данные из формы с помощью объекта FormData , создаем запрос POST с помощью fetch() и отправляем данные на сервер. В конце мы обрабатываем ответ от сервера или ошибку с помощью методов then() и catch() .

Отправка форм при помощи 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 связанного с элементом.

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

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

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

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

button>Click Me!button> 

И на JavaScript:

const btn = document.querySelector("button"); function sendData(data)  console.log("Sending data"); const XHR = new XMLHttpRequest(); let urlEncodedData = "", urlEncodedDataPairs = [], name; // Turn the data object into an array of URL-encoded key/value pairs. for (name in data)  urlEncodedDataPairs.push( encodeURIComponent(name) + " token operator">+ encodeURIComponent(data[name]), ); > // Combine the pairs into a single string and replace all %-encoded spaces to // the '+' character; matches the behaviour of browser form submissions. urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+"); // Define what happens on successful data submission XHR.addEventListener("load", function (event)  alert("Yeah! Data sent and response loaded."); >); // Define what happens in case of error XHR.addEventListener("error", function (event)  alert("Oops! Something went wrong."); >); // Set up our request XHR.open("POST", "https://example.com/cors.php"); // Add the required HTTP header for form data POST requests XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Finally, send our data. XHR.send(urlEncodedData); > btn.addEventListener("click", function ()  sendData( test: "ok" >); >); 

Примечание: 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
button>Click Me!button> 

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

const btn = document.querySelector("button"); function sendData(data)  const XHR = new XMLHttpRequest(), FD = new FormData(); // Push our data into our FormData object for (name in data)  FD.append(name, data[name]); > // Define what happens on successful data submission XHR.addEventListener("load", function (event)  alert("Yeah! Data sent and response loaded."); >); // Define what happens in case of error XHR.addEventListener(" error", function (event)  alert("Oops! Something went wrong."); >); // Set up our request XHR.open("POST", "https://example.com/cors.php"); // Send our FormData object; HTTP headers are set automatically XHR.send(FD); > btn.addEventListener("click", function ()  sendData( test: "ok" >); >); 

Here’s the live result:

Using FormData bound to a form element

The HTML is typical:

form id="myForm"> label for="myName">Send me your name:label> input id="myName" name="name" value="John" /> input type="submit" value="Send Me!" /> form> 

But JavaScript takes over the form:

.addEventListener("load", function ()  function sendData()  const XHR = new XMLHttpRequest(); // Bind the FormData object and the form element const FD = new FormData(form); // Define what happens on successful data submission XHR.addEventListener("load", function (event)  alert(event.target.responseText); >); // Define what happens in case of error XHR.addEventListener("error", function (event)  alert("Oops! Something went wrong."); >); // Set up our request XHR.open("POST", "https://example.com/cors.php"); // The data sent is what the user provided in the form XHR.send(FD); > // Access the form element. const form = document.getElementById("myForm"); // . and take over its submit event. form.addEventListener("submit", function (event)  event.preventDefault(); sendData(); >); >); 

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 form controls.

Dealing with binary data

If you use a FormData (en-US) object with a form that includes 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:

form id="theForm"> p> label for="theText">text data:label> input id="theText" name="myText" value="Some text data" type="text" /> p> p> label for="theFile">file data:label> input id="theFile" name="myFile" type="file" /> p> button>Send Me!button> form> 

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

// Because we want to access DOM nodes, // we initialize our script at page load. window.addEventListener("load", function ()  // These variables are used to store the form data const text = document.getElementById("theText"); const file =  dom: document.getElementById("theFile"), binary: null, >; // Use the FileReader API to access file content const reader = new FileReader(); // Because FileReader is asynchronous, store its // result when it finishes to read the file reader.addEventListener("load", function ()  file.binary = reader.result; >); // At page load, if a file is already selected, read it. if (file.dom.files[0])  reader.readAsBinaryString(file.dom.files[0]); > // If not, read the file once the user selects it. file.dom.addEventListener("change", function ()  if (reader.readyState === FileReader.LOADING)  reader.abort(); > reader.readAsBinaryString(file.dom.files[0]); >); // sendData is our main function function sendData()  // If there is a selected file, wait it is read // If there is not, delay the execution of the function if (!file.binary && file.dom.files.length > 0)  setTimeout(sendData, 10); return; > // To construct our multipart form data request, // We need an XMLHttpRequest instance const XHR = new XMLHttpRequest(); // We need a separator to define each part of the request const boundary = "blob"; // Store our body request in a string. let data = ""; // So, if the user has selected a file if (file.dom.files[0])  // Start a new part in our body's request data += "--" + boundary + "\r\n"; // Describe it as form data data += "content-disposition: form-data; " + // Define the name of the form data 'name token operator">+ file.dom.name + '"; ' + // Provide the real name of the file 'filename token operator">+ file.dom.files[0].name + '"\r\n'; // And the MIME type of the file data += "Content-Type: " + file.dom.files[0].type + "\r\n"; // There's a blank line between the metadata and the data data += "\r\n"; // Append the binary data to our body's request data += file.binary + "\r\n"; > // Text data is simpler // Start a new part in our body's request data += "--" + boundary + "\r\n"; // Say it's form data, and name it data += 'content-disposition: form-data; name token operator">+ text.name + '"\r\n'; // There's a blank line between the metadata and the data data += "\r\n"; // Append the text data to our body's request data += text.value + "\r\n"; // Once we are done, "close" the body's request data += "--" + boundary + "--"; // Define what happens on successful data submission XHR.addEventListener("load", function (event)  alert("Yeah! Data sent and response loaded."); >); // Define what happens in case of error XHR.addEventListener("error", function (event)  alert("Oops! Something went wrong."); >); // Set up our request XHR.open("POST", "https://example.com/cors.php"); // Add the required HTTP header to handle a multipart form data POST request XHR.setRequestHeader( "Content-Type", "multipart/form-data; boundary token operator">+ boundary, ); // And finally, send our data. XHR.send(data); > // Access our form. const form = document.getElementById("theForm"); // . to take over the submit event form.addEventListener("submit", function (event)  event.preventDefault(); sendData(); >); >); 

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.

Как настроить отправку формы обратной связи на электронную почту

Узнайте, как настроить отправку формы обратной связи на электронную почту с помощью PHP и SMTP, шаг за шагом!

Setting up email feedback form

Алексей Кодов
Автор статьи
23 июня 2023 в 15:19

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

Шаг 1: Создание HTML-формы

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

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

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Шаг 2: Настройка PHP-скрипта для отправки писем

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

<?php require 'PHPMailerAutoload.php'; $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $mail = new PHPMailer; $mail->isSMTP(); $mail->Host = 'smtp.example.com'; $mail->SMTPAuth = true; $mail->Username = 'your_email@example.com'; $mail->Password = 'your_email_password'; $mail->SMTPSecure = 'tls'; $mail->Port = 587; $mail->setFrom($email, $name); $mail->addAddress('your_email@example.com'); $mail->isHTML(true); $mail->Subject = 'Сообщение с формы обратной связи'; $mail->Body = "От: $name <br> Email: $email <br> Сообщение: $message"; if(!$mail->send()) < echo 'Ошибка при отправке сообщения.'; echo 'Mailer Error: ' . $mail->ErrorInfo; >else < echo 'Сообщение успешно отправлено!'; >?>

В этом примере мы используем библиотеку PHPMailer для отправки писем через SMTP. Убедитесь, что вы указали правильные данные для вашего SMTP-сервера, логина и пароля электронной почты.

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Шаг 3: Тестирование

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

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

Теперь ваша форма обратной связи готова к использованию! �� Не забудьте улучшить ее внешний вид с помощью CSS и добавить проверку введенных данных на стороне клиента для улучшения пользовательского опыта.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *