I’m having trouble getting this e-mail submission to work;
HTML:
<style>
/* Basic styling (optional) */
.container { text-align: center; padding: 20px; }
#downloadBtn { display: none; } /* Hide button initially */
</style>
</head>
<body>
<div class="container">
<h4>download our brochure</h4>
<label for="email">Email:</label>
<input type="email" id="email" required>
<button id="submitBtn">submit</button>
<a id="downloadBtn" href="your_pdf_file.pdf" download>Download PDF</a>
</div>
<script src="/public_html/wp-admin/js/emailScript.js"></script>
JS:
const emailInput = document.getElementById("email");
const submitBtn = document.getElementById("submitBtn");
const downloadBtn = document.getElementById("downloadBtn");
submitBtn.addEventListener("click", () => {
const email = emailInput.value;
if (validateEmail(email)) { // (Optional) Add email validation
// 1. Here, you'd typically send the email to your server/backend for storage/processing.
// 2. After successful email submission:
submitBtn.style.display = "none";
downloadBtn.style.display = "block";
} else {
alert("Please enter a valid email address.");
}
});
function validateEmail(email) {
const excludedDomains = ["hotmail.com", "hotmail.co.uk", "gmail.com", "gmail.co.uk"];
const domain = email.split("@")[1];
if (!email.includes("@") || excludedDomains.includes(domain.toLowerCase())) {
return false;
}
return true;
}
For context: I have dropped the .js file into the /public_html/wp-admin/js/ folder of my WordPress site and directed the HTML there.
On the test page I have created, the submit button does nothing when an e-mail address is entered.
Thanks in advance.
I’ve tried putting the js file in different places and directing the html; nothing has worked.
New contributor
Adriaen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.