How to email an HTML file with JavaScript?

I have an HTML file that a user should be able to open as a popup and email to me in its entirety.

This HTML file includes a contact form as well as other data such as the <h1> of the webpage in which the form was opened as a popup and I need all these data in the email.

Files

popup.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>יצירת קשר</title>
		<link rel="stylesheet" href="style.css"></link>
		<link rel="stylesheet" href="behavior.css"></link>
	</head>
	<body class="inquire_product_by_h1" dir="rtl">
		<h1 style="display: none">Lorem Ipsum</h1>
		<div class="modal_wrapper">
			<span class="modal_closing_button">X</span>

			<script>
				const productName = document.querySelector('h1').textContent;
				const modalHeading = document.createElement('h2');
				modalHeading.textContent = `אנו מבינים שאתה מעוניין במוצר ${productName} שלנו`;
				document.querySelector('.modal_wrapper').appendChild(modalHeading);
			</script>

			<h3>אנא מלא את הפרטים להלן ונחזור אליך לגבי מוצר זה.</h3>
			
			<form action="mailto:example@example" method="get" enctype="text/plain">
				<script>
					internalMessage = `לקוח מעוניין במידע על ${h1}.textContent.;`
				</script>

				<label for="fname" dir="rtl">שם מלא:</label>
				<input type="text" class="fname" name="name"></input><br>

				<label for="email" dir="rtl">אימייל:</label>
				<input type="email" class="email" name="email" dir="ltr"></input><br>

				<label for="phone" dir="rtl">טלפון:</label>
				<input type="tel" class="phone" name="phone" dir="ltr"></input><br>

				<input type="submit" class="submit" value="שלח"></input>
			</form>

		</div>
	</body>
	<script src="behavior.js"></script>
</html>

success.html

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>יצירת קשר</title>
<link rel="stylesheet" href="style.css"></link>
<link rel="stylesheet" href="behavior.css"></link>
</head>
<body dir="rtl" class="success_message">
	<div class="modal_wrapper">
		<h2 class="success_header_heading">הודעתך נשלחה בהצלחה</h2>
		<p class="success_message">תודה על ההתעניינות לעבוד עימי ועל כל פנייה המצריכה את תגובתי אשתדל להגיב בהקדם האפשרי.</p>
	</div>
</body>
	<script src="behavior.js"></script>
</html>

style.css

.modal_wrapper h1,
.modal_wrapper h2,
.modal_wrapper h3,
.modal_wrapper h4,
.modal_wrapper h5,
.modal_wrapper h6,
.modal_wrapper p,
.modal_wrapper b,
.modal_wrapper strong, 
.modal_wrapper span, 
.modal_wrapper li, 
.modal_wrapper a, 
.modal_wrapper label,
.modal_wrapper input
 {
    display: block;
    position: relative;
    color: #fff;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 22px;
}

p, b, strong, span, li, a, label {
    font-size: 18px;
}

.modal_wrapper {
    display: block;
    margin: 0 auto 0;
    padding: 25px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    word-break: break-word;
    width: 50%;
    height: 100%;
    z-index: 9999;
    background: green;
    font-weight: bold;
    text-align: center;
}

.modal_closing_button {
    display: block;
    position: relative;
    text-align: right;
    font-size: 18px;
}

.modal_message {
    padding: 25px 25px 0 25px;
    margin: 0 0 10px 0;
    font-size: 18px;
    display: block;
}

input {
    box-sizing: border-box;
    margin: 10px 0 10px 0;
    padding: 10px;
    display: block;
    width: 100%;
    color: #000 !important;
}

#submit {
    background: orange;
    font-weight: bold;
}

behavior.js

// Allow closing the form and re-start

document.querySelector('.modal_closing_button').addEventListener('click', ()=>{
    document.querySelector('.modal_wrapper').remove();
});

// Tansfer user to success page

let formToWorkOn = document.querySelector(".modal_wrapper");
formToWorkOn.addEventListener("submit", function(event) {
    event.preventDefault();
    window.location.href="success.html";
});

My question

Assuming that I have good website hosting with good email configuration without any significant problems in email sending.
How to email an HTML file with JavaScript?

Notes

  • The entire process (popup, email) should be frontend; nothing like PHP or any other backend language is involved.

You cannot send an email with front-end JavaScript. You need a back-end language like PHP, Ruby etc.

The closest you can get with client-side technologies is to make a link like this:

<a href="mailto:me@example.com>Send a mail</a>

Which will open in the user’s default mail application.

1 Like

:frowning:

About 33 years and W3C or EcmaScript didn’t give us such mechanism for frontend emailing? :cry:

My problem is that many desktop computer website web surfers probably don’t use a Windows/Linux/Apple email native application on their desktop computer.

You need to configure a server to actually send the mail. How do you imagine that working on the front-end?

You could find a service, I guess. But going by this question, and various other questions I have seen you posting recently, I would just slump up the $4 a month for a DigitalOcean droplet and use that.

You need to configure a server to actually send the mail. How do you imagine that working on the front-end?

Couldn’t W3C or EcmaScript give us a server even in payment? I’d gladly pay them 5$-10$ a month to have a slight passage with JavaScript on that.

My knowledge in internet architecture and web architecure is not the highest though, so something I just said now might be absurd.


You could find a service, I guess. But going by this question, and various other questions I have seen you posting recently, I would just slump up the $4 a month for a DigitalOcean droplet and use that.

I used to rent a 5$ droplet from Digital Ocean at the time but for a LAMP-PHPMyAdmin-Certbot-Composer kind of environment, not for an email environment.

Moreover, I personally find configuring email DNS recrods, a Local Email Server (LES) such as Postfix, a Local Email Protocoler (LEP) such as Dovecot and a Local Email Client (LEC) such as Roundcube a frustration :black_joker:

So, I am probably missing something but how could a DO droplet help me instead of complicating me? :slight_smile:

I am willing to pay money for a decent email solution but I don’t know any.

Sendgrid has a free tier that lets you send up to with 100 emails/day. No credit card required.

3 Likes

And then I could avoid installing any backend email program whatsoever?
If so, that’s what I seek then.

The question is, how would sendgrid or any similar service (Email Proxy as a Service? EPaaS?) know to send the HTML popup to my email?

You will still need a server of sorts. but it would mean that you don’t have to concern yourself with any of the email sending infrastructure.

This should give you an idea of the general principle:

Out of interest, where is your site hosted?

You will still need a server of sorts.

My Drupal website is based on PHP but I assume that you meant to say that I won’t need to configure anything on PHP in regards to email, if PHP sends all email to sendgrid who then sends all of that email to my Gmail account.

Well, actually I have tried that several months ago but I thought that this is also too much; that transferring emails from PHP to sendgrid and from sendgrid to Gmail is also too much.

In that case, I might need a whole other approach like just adding a block containing a phone number and an email address to all “product” type pages (something I can easily do with Drupal’s block system and then filter that block to appear in all of
“product” pages).

Out of interest, where is your site hosted?

My website is currently hosted on Namecheap on a shared hosting plan (Stellar Business plan) but their email configurations are WordPress-oriented and do not support Drupal contact forms.

If your website is using Dupral, you should be able to install a module allowing mail via SMTP. E.g.: https://www.drupal.org/project/smtp

I found one of your old questions about this on the Drupal forums (link). I would follow the advice that you are given in that thread.

But in light of all of the information that you were given there (and here as well), questions like:

make me wonder if it might be worth you brushing up on the basics of PHP and Drupal.

This would help you (and likely save you quite a bit of time) in the long run.

Ah so you’d like me to have your home browser send a bomb threat to your local governmental agency without you pushing a button. Good good, hold please…

There’s a reason things like this dont exist.

1 Like

I know the Drupal user interface quite good, 13 years. My problem is with the PHP code of it. I don’t konw almost anything about PHP coding and don’t want to know much about it because I always disliked the PHP lexicon and syntax and/or the entire Object Oriented Programming approach; for me it’s a “different planet” than regular non OOP JavaScript.

When I do HTML-JavaScript-CSS I usually enjoy it, when I do Twig-PHP I usually suffer :expressionless:

I don’t know enough about information security to understand what you exactly meant to say but I trust you on this.

It’s the same reason that Javascript is not allowed access to the local filesystem.

You’re visiting a webpage, that will run Javascript code, whether or not you push a button to say “run this code”. That code therefore has to be sandboxed and “safe”.

If you let the code send an email, without the intercession of a server/backend, nothing would stop someone from sending a bad email, and no tracing of that email could tell you whether the PC user sent it, or a random website they visited sent it. All they can say is “It came from this PC via Javascript”.

If, however, it has to go back through a backend server, the [insert legal investigation bureau of your country here] can go… “the email came from this server”. The server can go “the request came into this webpage, which is owned by X, sends an email using this code, and was contacted by Y at this IP and this moment in time”, and then the investigators can determine whether or not X or Y needs to go to jail.

1 Like

I do not understand what that means. I have read all the replies and I assume you mean that you want to execute JavaScript in HTML in a message. That can work. It is possible. It was possible many years ago. The problem is that it is dangerous. You might be able to get it to work but your antivirus is likely to tell you no. Even if you can be successful at convincing your antivirus, everyone you send it to is likely to (definitely should) have an antivirus that says you are doing something dangerous.

People often try to solve a fundamental problem and then ask for help with the solution. Usually there is a better solution but they do not explain the fundamental problem.

Probably. If so then in order to get the best solution you need to explain the fundamental problem.

I have been programming for half a century and know a variety of languages and I sure do not want to use PHP. It is among the worst for inconsistencies and kludges. It definitely was not designed by a computer language specialist in the beginning. I really think you should hold tight onto all reservations you have about using PHP.

Sending an HTML file via email using JavaScript typically involves using a server-side language (such as Node.js) to handle the email sending process.