Sending an email from the browser using js

Question

I've created a simple contact form which allows users to enter in their name, email and a text message on my website (running using firebase hosting).

When they click submit I want to generate an email and send it to myself from them (i.e. the from and/or reply-to would be the email address they entered) containing their message.

I know there are limitations around being able to do this from within the browser for a number of different reasons. I'm also aware that this could be achieved using a mailto link with the extra information pre-populated in the email however I don't want to use this approach either.

Instead I was wondering if there's any way in which I can achieve this all from within the browser? I was think along the lines of making a POST request to another service (not owned by myself) which would then send the email as described. Does anyone have any experience with this type of requirement?

NOTE: I'm currently hosting using firebase as it's free for static content. I looked into whether I could run an express server and make use of a something like nodemailer, however I think I'll end up paying for somewhere to run it which seems a bit overkill given I don't expect to send more than 25-50 emails a month.

Alger

the browser isn't a mail client, so you will have to proxy the sending of the mail. – Ludovick

"all from within the browser? I was think along the lines of making a POST request to another service...which would then send the email" - So in fact the "hard" part would not be done within the browser. – Wakeen

Answer 1

2019 Update

EmailJS (Freemium)

This is now possible with the SaaS product EmailJS. They act as a middleman between you and the email provider, making sure API keys are not exposed to the public.

From their homepage:

NO SERVER NEEDED

We provide an out of the box service that allows you to send emails with no server side code.

SmtpJs (Free)

Alternative solution is outlined in this answer. Please make sure to not leak your SMTP credentials to the web.

Original answer

TL;DR Don't do it client-side. That's what a backend is for.

You can't just send an email from your browser because browsers aren't built like mail clients. There is no mail server to use.

You need to send the email from your server or from a third party provider.

An example of such a provider is SendGrid, and they provide a RESTful API like the one your are looking for. See how to send an email in the API docs.

SendGrid isn't your only choice. Here is a comparison of different transactional email providers

There is a security risk however: If you have your clients call the API from their browsers, you are exposing your API key to them. Any developer can easily use this API key to send emails from your SendGrid account. That's not what you want. Better do this on your backend. Don't want to pay for a server? No problem, there's free hosting. If this is the only feature of your backend, the free offers will suffice.

Chockfull

so there is absolutely no way to do this on firebase , as Firebase doesn't allows dynamic resources on their servers, and if you do this on client end you expose your api key so it's not secure. – Klutz

Answer 2

I believe this may have been answered here or possibly here?

Both of these approaches use the user's mail client, but without going with a server-side approach using Express of AJAX, I don't believe there is any way to do this purely in javascript.

Willi

Answer 3

Regarding Firebase: Emails can be sent via an extension (seems to be based on nodemailer and is triggered by writing Firestore documents).

Extension:

https://extensions.dev/extensions/firebase/firestore-send-email

Howto:

https://firebase.google.com/docs/extensions/official/firestore-send-email

https://invertase.io/blog/send-email-extension

Grandmotherly