Sending message from HTML form to a mail server

Sending message from HTML form to a mail server
0

#1

Hello,

Beginner Q again, looking to learn from experts on here. Say, I have a contact section in the HTML page to let user enter their contact info and a message then hit submit button. The goal is to implement send email functionality - i.e collect the submitted data and send that on to an email account of the web site owner.

My understanding from searching on the web is, either (1) have a server side program to process the data which sends that information onto an email server, or (2) have a href=“mailto:…” in the “< a >” tag (this will require a mail client installed in client side)

I guess option (1) is for backend developer, and option (2) though can be done by front end developer but it is assuming client side has mail client installed thus not a very good solution.

I don’t see (or at least not obvious to me) the Front End Development curriculum here covers how to accomplish the send email functionality. Is it correct to assume this is the domain of back end development, thus wont be part of the front end development curriculum ?

Thanks.
p.s. even if this is not the domain of front end development, i’d still appreciate helpful links to read more about how to implement this functionality.


#2

You’re correct. This is not covered in the front end curriculum, though the example portfolio does have a form. There are third-party services you can use that don’t require you to do any back end coding, though.


#3

If you don’t want to bother with setting up an email server, there are front-end API’s that let you do it for free. For example EmailJS. I have never used it, but it looks like it would be straightforward once you connect your email provider…

// client code
const service_id = 'my_mandrill';
const template_id = 'feedback';
const template_params = {
  name: $('#input-name').val(),
  reply_email: $('#input-email').val(),
  message: $('#input-message').val()
};

emailjs.send(service_id,template_id,template_params);

If you want to do it on the front-end like above, you will need a service like that to do it for you. I have never really done this on the back-end either, but it looks pretty straightforward:

// Example from nodemailer module
// https://github.com/nodemailer/nodemailer

// npm install nodemailer --save

// You will still have to setup your own smtp transporter:
// https://nodemailer.com/smtp/

'use strict';

import nodemailer from 'nodemailer';

// create reusable transporter object using the default SMTP transport
const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        // remember to use env variables if you open source
        user: '[email protected]',
        pass: 'yourpass' 
    }
});

// setup email data with unicode symbols
let mailOptions = {
    from: '"Fred Foo 👻" <[email protected]>', // sender address
    to: '[email protected], [email protected]', // list of receivers
    subject: 'Hello ✔', // Subject line
    text: 'Hello world ?', // plain text body
    html: '<b>Hello world ?</b>' // html body
};

// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
    if (error) console.log(error);
    else console.log(`Message ${info.messageId} sent: ${info.response}`);
});