Sending emails with EmailJS dosent work from inputs

Question

Im try to send email with EmailJS. Everything works from normal site (i create a new project to learn 'how to use MailJS') but when i try but it to my main site error

Error is when i try to take data from inputs in form. When i set defaults values on .js it send it, so i have problem witch forms and send values from it.

// SendMail.js

function SendMail() {
var params = {
    name : document.getElementById("name").value,
    email : document.getElementById("email").value,
    message : document.getElementById("message").value,
    subject : document.getElementById("subject").value
}

emailjs.send('service_c3uu59k', 'template_j55tgxr', params)
.then(function(response) {
    console.log('SUCCESS!', response.status, response.text);
    alert("Dziala");
 }, function(error) {
    console.log('FAILED...', error);
    alert("Nie dziala");
 });
}

html

          <form method="POST">
            <div class="row">
              <div class="col-md-6">
                <div class="md-form">
                  <input class="form-control" id="name" type="text" name="name" required="required"/>
                  <label for="name">Name</label>
                </div>
              </div>
              <div class="col-md-6">
                <div class="md-form">
                  <input class="form-control" id="email" type="text" name="email" required="required"/>
                  <label for="email">Email</label>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="md-form">
                  <input class="form-control" id="subject" type="text" name="subject" required="required"/>
                  <label for="subject">Subject</label>
                </div>
              </div>
              <div class="col-md-12">
                <div class="md-form">
                  <textarea class="md-textarea" id="message" name="message" required="required"></textarea>
                  <label for="message">Message</label>
                </div>
              </div>
            </div>
            <div class="center-on-small-only mb-4">
              <button class="btn btn-indigo ml-0" onclick="SendMail()"><i class="fa fa-paper-plane-o mr-2"></i> Wyślij</button>
            </div>
          </form>

_"so i have problem witch forms"_ - then it would perhaps be a good idea to show us your form, don't you think? Please do not give us mere snippets that lack context when asking such a question, but provide a proper [mre] of your issue. — CBroe, Apr 12 '23 at 08:50
Apart from that this button will actually submit the form (and therefor cancel any pending background requests at this point - you should add `type="button"` on it to prevent that), I can't see anything wrong with that. Logging the `params` to console, that looks like a properly filled object with the form field values. — CBroe, Apr 12 '23 at 09:44

score -1 · Answer 1 · answered Apr 12 '23 at 09:54

Since Email.js allows only 2 email templates in the free tier, better to go with nodemailer. It is totally free and easily configurable.

setup on simple node backend and deploy on google cloud run.
If you are using templates use Handlebars as well

var mail = nodemailer.createTransport({
service: 'gmail',
auth: {
    user: 'email@email.com',
    pass: 'password'
 }
});

app.post('/duemail', (req, res) => {
  const filePath = path.join(__dirname, './templates/duepay.html');
  const source = fs.readFileSync(filePath, 'utf-8').toString();
  const template = handlebars.compile(source);
  const replacements = {
    name: req.body.name
  };
  const htmlToSend = template(replacements);

  var mailOptions = {
    from: '***********',
    to: req.body.email,
    subject: 'Sample Subject',
    text: "Sample text",
    html: htmlToSend,
  }

  mail.sendMail(mailOptions, function (error, info) {
    if (error) {
        console.log(error);
    } else {
        console.log('Email sent: ' + info.response);
    }
  });
  res.send('Done');
})

define replacements in your HTML as below.

<h4>Hello {{name}},</h4>

I don't see how replacing the backend with one that is harder and more expensive to maintain addresses the problem expressed in the question. — Quentin, Apr 12 '23 at 09:56

Sending emails with EmailJS dosent work from inputs

1 Answers1