Email form with javascript

Building a contact form with Next.js and Nodemailer

There are many packages available to help you implement email functionality on your website or app. I used the popular nodemailer library, and it paired really nicely with Next.js api routes. I will start by describing the contact form component. Next, I will discuss how I implemented the API endpoint to handle email requests. Finally, I will close by integrating the form with the endpoint. To get the most out of this article, you should be familiar with Javascript, React, and Next.js. Let’s get start by reviewing the contact form component below.

import useContactForm from '../hooks/useContactForm'; const ContactForm = () =>  const values, handleChange> = useContactForm(); const handleSubmit = (e) =>  e.preventDefault() > return ( form onSubmit=handleSubmit>> label htmlFor='email'>Emaillabel> input required id='email' value=values.email> onChange=handleChange> type='email' /> label htmlFor='subject'>Subjectlabel> input required id='subject' value=values.subject> onChange=handleChange> type='text' /> label htmlFor='message'>Messagelabel> textarea required value=values.message> onChange=handleChange> id='message' rows=8> /> button type='submit' value='Submit'>Sendbutton> form> ); >; export default ContactForm; 

The form component

The form component is relatively straightforward, but let’s break down what’s happening here. First, we import a custom hook called useContactForm (more on that later). Then, we destructure values and handleChange . The values object represents the current state of the form inputs and has the following properties and initial state.

const values =  email: '', subject: '', message: '', > 

We also get a function called handleChange , which will handle the form onChange events. Working our way down in the function body, we have a handleSubmit function to handle the form onSubmit events.
Currently, the only thing it does is prevent the default form submission behavior. We will add more logic to handle the form data later. For now, let’s take a closer look at our useContactForm custom hook.

import useState> from 'react'; const useContactForm = () =>  const [values, setValues] = useState( email: '', subject: '', message: '', >); const handleChange = (e) =>  setValues(prevState =>  return  . prevState, [e.target.id]: e.target.value, >; >); >; return values, handleChange>; >; export default useContactForm; 

As mentioned earlier, the initial state of the values object contains properties defined by the id defined on the form
input, each with an initial value of an empty string. The handleChange function updates the state by including all the elements from the current state using spread syntax. Finally, we use e.target.id to update the target element’s state dynamically. There are certainly other ways to keep state for a form. The most common alternative that comes to mind is using one useState hook for each form input. The useContactForm hook allows us to accomplish the same goal by using less code. Before moving on to the API, I created a function using axios that we will use to
send requests to the API.

import axios from 'axios'; const sendEmail = async (email, subject, message) =>  return axios( method: 'post', url: '/api/send-mail', data:  email: email, subject: subject, message: message, >, >); >; export default sendEmail; 

The API

I created the API endpoint with the built-in Next.js Api Routes. I started by creating the following directory
in my Next.js project.

http://localhost:3000/api/send-mail 

const nodemailer = require('nodemailer'); export default function handler(req, res)  const message =  from: req.body.email, to: process.env.GMAIL_EMAIL_ADDRESS, subject: req.body.subject, text: req.body.message, html: ` $req.body.message> `, >; let transporter = nodemailer.createTransport( service: 'Gmail', auth:  user: process.env.GMAIL_EMAIL_ADDRESS, pass: process.env.GMAIL_APP_PASSWORD, >, >); if (req.method === 'POST')  transporter.sendMail(message, (err, info) =>  if (err)  res.status(404).json( error: `Connection refused at $err.address>` >); > else  res.status(250).json( success: `Message delivered to $info.accepted>` >); > >); > > 

Ok, a lot is going on here. First, I included the nodemailer library. Next, we have the function handler , which is the request handler, with the req and res parameters. Check out the API Routes docs if you are unfamiliar
with the req and res objects. Next, we create the nodemailer message configuration object. I used Gmail as my
provider, but there are a few caveats that are discussed here (using Gmail).
The excellent news is that nodemailer supports many alternatives. The nodemailer docs are fantastic. I encourage you to review the docs if you are unfamiliar with the library. We create the transporter object to send the mail data. The transporter function accepts the message data and an optional callback. The callback gives us access to the error and info objects which I use to handle the response. That’s it for the API. Now, let’s wire up the contact form.

Connecting the form to the api

import useContactForm from '../hooks/useContactForm'; import sendEmail from '../lib/sendEmail'; import useState> from 'react'; const ContactForm = () =>  const values, handleChange> = useContactForm(); const [responseMessage, setResponseMessage] = useState( isSuccessful: false, message: ''>); const handleSubmit = async (e) =>  e.preventDefault(); try  const req = await sendEmail(values.email, values.subject, values.message); if (req.status === 250)  setResponseMessage( isSuccessful: true, message: 'Thank you for your message.'>); > > catch (e)  console.log(e); setResponseMessage( isSuccessful: false, message: 'Oops something went wrong. Please try again.', >); > >; return ( form onSubmit=handleSubmit>> label htmlFor='email'>Emaillabel> input required id='email' value=values.email> onChange=handleChange> type='email' /> label htmlFor='subject'>Subjectlabel> input required id='subject' value=values.subject> onChange=handleChange> type='text' /> label htmlFor='message'>Messagelabel> textarea required value=values.message> onChange=handleChange> id='message' rows=8> /> button type='submit' value='Submit'>Sendbutton> form> ); >; export default ContactForm; 

The handleSubmit function is converted to an async function. We use the sendEmail function we created to await the response from the new API endpoint. The responseMessage state is updated with the response.

Conclusion

Now that the responseMessage state has changed, we can use it to update the UI. Usually, this includes displaying an alert to the user with the status of the message.

Источник

# Creating a contact form

We have our Contact Service email service and Contact Form email template from the previous steps. Let’s create a simple HTML form and send its content by email.

DOCTYPE html> html> head> title>Contact Formtitle> script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"> script> script type="text/javascript"> (function()  // https://dashboard.emailjs.com/admin/account emailjs.init('YOUR_PUBLIC_KEY'); >)(); script> script type="text/javascript"> window.onload = function()  document.getElementById('contact-form').addEventListener('submit', function(event)  event.preventDefault(); // generate a five digit number for the contact_number variable this.contact_number.value = Math.random() * 100000 | 0; // these IDs from the previous steps emailjs.sendForm('contact_service', 'contact_form', this) .then(function()  console.log('SUCCESS!'); >, function(error)  console.log('FAILED. ', error); >); >); > script> head> body> form id="contact-form"> input type="hidden" name="contact_number"> label>Namelabel> input type="text" name="user_name"> label>Emaillabel> input type="email" name="user_email"> label>Messagelabel> textarea name="message">textarea> input type="submit" value="Send"> form> body> html> 

You can obtain your public key from the Account

(opens new window) page in the EmailJS dashboard. After filling the fields and sending the request we should find the new email in our personal inbox. If you can’t find it take a look at the spam folder.

# So what did we do?

First, we load our EmailJS SDK

script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"> script> 

Second, we initialize the SDK with our public key

emailjs.init('YOUR_PUBLIC_KEY'); 

Third, we submit our contact form and send it through EmailJS, using our Contact Service and Contact Form:

emailjs.sendForm('contact_service', 'contact_form', this) 

# That’s it!

You now have a contact form that sends all submissions to your inbox via your own Gmail account.

Источник

Отправка писем с помощью JavaScript

JavaScript – это язык программирования, который можно использовать как для интерфейсной, так и для внутренней разработки. Когда JavaScript упоминается в контексте отправки электронных писем, Node.js – это первое, что приходит на ум. И сегодня мы разберем, как использовать JS для отправки электронных писем из приложения, у которого нет сервера.

FAQ: Могу ли я отправлять электронные письма с JS или нет?

Вы не можете отправлять электронные письма, используя только код JavaScript, из-за отсутствия поддержки серверных соединений. Для этого вам понадобится серверный язык, который общается с SMTP-сервером. Вы можете использовать JS вместе с серверным скриптом, который будет отправлять электронные письма из браузера на основе ваших запросов.

Почему вы можете захотеть отправлять электронные письма с помощью JS

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

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

mailto: для отправки формы данных

Поскольку вы не можете отправить электронное письмо напрямую с помощью JS, вы можете указать браузеру открыть для этого почтовый клиент по умолчанию. Технически метод mailto: не отправляет электронную почту прямо из браузера, но может выполнять следующую работу:

Когда вы запустите код в браузере, вы увидите следующее:

После отправки данных браузер открывает почтовый клиент по умолчанию. В нашем случае это Gmail.

Метод mailto: является довольно простым решением для реализации , но он имеет некоторые специфические недостатки:

• Вы не можете контролировать макет данных, поскольку данные отправляются в форме, отправленной браузером.
• mailto: не защищает ваш адрес электронной почты от спам-ботов. Некоторое время назад это можно было смягчить, построив ссылку в JS. В наши дни все больше и больше ботов запускают JS и не полагаются на HTML, отображаемый только сервером.

SmtpJS.com – отправка писем из JavaScript

SmtpJS – это бесплатная библиотека, которую вы можете использовать для отправки писем из JavaScript. Все, что вам нужно, – это SMTP-сервер и несколько манипуляций, чтобы все было сделано. Мы будем использовать Mailtrap.io в качестве сервера, потому что это действенное решение для тестирования электронной почты. Ниже приведен порядок действий, которому вы должны следовать:

• Создайте HTML-файл (например, test.html) со следующим скриптом:
  
• Создайте кнопку, которая будет запускать функцию JavaScript.
• Напишите функцию JS для отправки писем через SmtpJS.com.

Email.send(< Host : "smtp.mailtrap.io", Username : "", Password : "", To : 'recipient@example.com', From : "sender@example.com", Subject : "Test email", Body : "
Header
Bold text Italic" >).then( message => alert(message) ); > 

Недостатком приведенного выше примера является то, что ваше имя пользователя и пароль видны в клиентском скрипте. Это можно исправить, если использовать параметр шифрования, предоставляемый SmtpJS. Нажмите кнопку «Зашифровать свои учетные данные SMTP» и заполните необходимые поля.

После этого нажмите “Сгенерировать токен безопасности” и затем используйте его в своей функции JS вместо настроек SMTP-сервера, как показано ниже:

Источник