Tutorial - Como enviar un correo desde Nodejs usando Nodemailer desde nuestro típico formulario de contacto de nuestra página web

Tecnología
  
Programación Web
  
Nodejs
  
Bootstrap
  
Desarrollo Web
    03 Febrero, 2021   Regresar el blog
Compartir:

El día de hoy le muestro un ejemplo práctico de como enviar un correo de Nodejs utilizando un modulo llamado Nodemailer, es decir por lo general quieren tener un formulario de contacto de su aplicación, para hacerlo vamos a tener un servidor que reciba esos correos y los reenvíe a la cuenta que queramos.

Para iniciar creamos una carpeta en nuestro escritorio con el nombre app-email-node abrimos esa carpeta con nuestro editor de código favorito en mi caso visual studio code, seguido procedemos a activar la terminal (consola en windows) integrada de nuestro editor con las teclas control + shift + P y escribimos el siguiente comando para iniciar nuestro proyecto de node:

npm init --yes

Instalamos express que es un framework para generar servidores

npm install express

Creamos una carpeta /src para tener mas orden y dentro creamos un archivo index.js dentro tendrá el siguiente contenido:

index.js
const express = require('express')
const path = require('path')
const app = express()
const port = process.env.PORT || 4000
app.listen(port, ()=>{
    console.log(`Server on port ${port}`)
})

Creamos una carpeta dentro de /src llamada /public y dentro creamos un archivo index.html que es el que contendrá nuestro formulario de contacto

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial - Como enviar un correo desde Nodejs usando Nodemailer desde nuestro típico formulario de contacto de nuestra página web </title>
</head>
<body>
    <h1>Tutorial - Como enviar un correo desde Nodejs usando Nodemailer desde nuestro típico formulario de contacto de nuestra página web </h1>
</body>
</html>

index.js
const express = require('express')
const path = require('path')
const app = express()
const port = process.env.PORT || 4000
app.use(express.static(path.join(__dirname,'public')))
app.listen(port, ()=>{
    console.log(`Server on port ${port}`)
})


Procedemos dentro de la carpeta public crear dos archivos más uno (.css) [main.css] y el otro será la respuesta [response.html] de nuestro formulario cuando se envié el mismo, adicional vamos a utilizar un framework de css (bootstrap) para agilizar el estilo del formulario, adicional dentro de index.html crearemos nuestro formulario de contacto

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial - Como enviar un correo desde Nodejs usando Nodemailer desde nuestro típico formulario de contacto de nuestra página web </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="/main.css">
</head>
<body>
    <div class="container p-4">
            <div class="row">
                    <div class="col-md-6 offset-md-3">
                        <div class="card">
                            <div class="card-body">
                                <form action="">
                                    <div class="mb-3">
                                        <input name="name" type="text" class="form-control" placeholder="Name" autofocus>
                                    </div>
                                    <div class="mb-3">
                                        <input name="email" type="email" class="form-control" placeholder="Email" autofocus>
                                    </div>
                                    <div class="mb-3">
                                        <input name="phone" type="text" class="form-control" placeholder="Phone" autofocus>
                                    </div>
                                    <div class="mb-3">
                                        <textarea name="message" rows="2" class="form-control" placeholder="Message"></textarea>
                                    </div>
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-primary btn-outline btn-block">
                                            Submit
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
            </div>
    </div>
</body>
</html>



Ahora vamos a probar si recibimos los datos, estos mismos serán enviados a una ruta de nuestro servidor por medio del action="/send-email" method="POST" procederemos a crear esa ruta en index.js , pero antes de continuar como vamos a reiniciar muchas veces cuando desarrollemos el servidor vamos a instalar un módulo que lo hará por nosotros llamado nodemon

npm i nodemon -D

Modificaremos el package.json con el siguiente código

package.json
"scripts": {
    "start": "nodemon src/index.js"
  }

index.js
const express = require('express')
const path = require('path')
const app = express()
const port = process.env.PORT || 4000
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.post('/send-email', (req,res) => {
    const {name, email, phone, message} = req.body
    const contentHTML = `
                <h1>User Information:</h1>
                <ul>
                    <li>User_name: ${name}</li>
                    <li>Email: ${email}</li>
                    <li>Phone: ${phone}</li>
                </ul>
                <p>Message: ${message}</p>
    `;
    res.send('Received...')
})
app.use(express.static(path.join(__dirname,'public')))
app.listen(port, ()=>{
    console.log(`Server on port ${port}`)
})

Ahora es tiempo de instalar nodemailer

npm i nodemailer

Pero antes de configurar nodemailer, vamos a nuestro hosting compartido para crear un correo que es adonde enviaremos la consulta del formulario





Y para finalizar el tutorial es momento de configurar el módulo de nodemailer, una vez se envíe el formulario redireccionamos al success.html con un mensaje de éxito

require('dotenv').config()
const express = require('express')
const nodemailer = require('nodemailer')
const path = require('path')
const app = express()
const port = process.env.PORT || 4000
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.post('/send-email', async(req,res) => {
    const {name, email, phone, message} = req.body
    const contentHTML = `
                <h1>User Information:</h1>
                <ul>
                    <li>User_name: ${name}</li>
                    <li>Email: ${email}</li>
                    <li>Phone: ${phone}</li>
                </ul>
                <p>Message: ${message}</p>>
    `
   const transporter =  nodemailer.createTransport({
        host: 'mail.tupaginaonline.net',
        port: 587,
        secure: false,
        auth: {
            user: 'test@tupaginaonline.net',
            pass: process.env.PASS_EMAIL
        },
        tls: {
            rejectUnauthorized: false
        }
    })
    const response = await transporter.sendMail({
        from: "'Info TupaginaOnline' ",
        to: process.env.MY_EMAIL,
        subject: 'Website contact Form',
        html : contentHTML
    })
    console.log('Message', response.messageId)
    res.redirect('/success.html')
})
app.use(express.static(path.join(__dirname,'public')))
app.listen(port, ()=>{
    console.log(`Server on port ${port}`)
})




Aquí pueden ver el ejemplo en vivo






Y con esa amigos llegamos al final del tutorial, espero que lo hayan disfrutado y hasta la próxima!


Visita mi sitio web oficial

tupaginaonline.net

119 vistas
Compartir:


Autor
Jose Fuentes

- Web Developer -

 


0 COMENTARIO(S)
Contesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Comentario *
Nombre *
Correo electrónico *
Sitio web

Articulos Relacionados
Articulos recientes

Desarrollos en venta

$ usd dólar 600