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.
