Search code examples
emailnotificationshtml-emailnodemaileremail-notifications

html email notification not working properly

I am implementing Nodemailer to send emails from Node.Js. However, HTML page is not responding properly. My index.js:

const nodemailer = require('nodemailer');
const fs = require('fs');
const handlebars = require('handlebars');

const transporter = nodemailer.createTransport({
    host: "smtp.mailtrap.io",
    port: 2525,
    auth: {
        user: "xxxx",
        pass: "xxxx"
    }
});

const readHTMLFile = (path, callback) => {
    fs.readFile(path, {encoding: 'utf-8'}, (err, html) => {
        if(err){
            callback(err);
        }
        else{
            callback(null,html);
        }
    });
}

readHTMLFile('index.html', (err, html) => {
    const template = handlebars.compile(html);
    const replacements = {
        username: 'Bob'
    };
    const htmlToSend = template(replacements);
    const message = {
        from: 'testxxxx@example.com',
        to: 'to@xxxx.com',
        subject: 'No reply',
        html: htmlToSend
    }

    transporter.sendMail(message, (error, info) => {
        if(error){
            console.log(`error: ${JSON.stringify(error)}`);
        }
        else{
            console.log('Email sent: ' + info.response);
        }
    });
});

My index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Email Notification</title>
</head>
<body>
<div>
    <h3>Hey! {{username}}!!</h3>
    <form action="https://www.google.com">
        <input type="submit" value="Go to Google" />
    </form>
    <h4><a href="https://www.stackoverflow.com">Go to Stackoverflow</a></h4>
</div>

Now, user gets email and user is able to click on Go to Stackoverflow link and gets redirected to stackoverflow website. However, when user clicks on button Go to Google, nothing happens. I want user to click on a button and get redirected to the website. Please help me to solve this issue.

Solution

  • The problem is that you are using a form. Some email clients do not accept forms. For a detailed explanation see https://www.sitepoint.com/forms-in-email/.

    Instead, if you want a link, use an <a> like your other example.

    If you want it looking like a button, for the best results (i.e. for best rendering across all different email clients), you'll need to use a table approach:

    <table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;">
        <tr>
            <td style="padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;border-collapse:collapse;">
                <!-- START CENTERED BUTTON -->
                <center>
                    <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                        <tbody>
                            <tr>
                                <td align="center" bgcolor="#D90432" width="200" style="-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; border: none; line-height:20px;color:#ffffff;">
                                    <a href="https://www.google.com.au" style="text-decoration: none;color:#ffffff;display:block;">Read more</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>  
                </center>
                <!-- END CENTERED BUTTON -->
            </td>
        </tr>
    </table>