Skip to content

Instantly share code, notes, and snippets.

@jcicero518

jcicero518/main.html

Created December 20, 2022 18:12
Show Gist options
  • Save jcicero518/156ce7794767c02c07f21d2e1cf6eac0 to your computer and use it in GitHub Desktop.
Save jcicero518/156ce7794767c02c07f21d2e1cf6eac0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
main.html
<div id="custom-newsletter-embed"></div>
<script src="https://url-for-newsletter-embed.js"></script>
Raw
main2.html
<style>
/* Inline CSS... */
</style>
<form>
<input type="email" id="email">
<button>Subscribe</button>
</form>
Raw
newsletter.js
(function () {
// Get the element to embed into
let embed = document.querySelector('#custom-newsletter-embed');
if (!embed) return;
// Inject the form and styles
embed.innerHTML =
`<style>
/* Inline CSS... */
</style>
<form>
<label for="email">Enter your email</label>
<input type="email" id="email">
<button>Subscribe</button>
</form>
<div role="status"></div>`;
// Get newly created form elements
let form = embed.querySelector('form');
let announce = embed.querySelector('[role="status"]');
// Handle submit events
async function submitHandler (event) {
// Stop the form from reloading
event.preventDefault();
// Make sure an email address was provided
if (!form.email.value) {
announce.textContent = 'Please enter a valid email address.';
return;
}
try {
// Call the API
let request = await fetch('https://newsletter-api-endpoint.com', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({email: form.email.value})
});
// Get the response and show the message in the UI
let response = await request.json();
announce.textContent = response.msg;
} catch (error) {
// If something went wrong, show the error instead
announce.textContent = error.msg;
}
}
// Listen for submit events
form.addEventListener('submit', submitHandler);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment