Send email from static page hosted on GitHub Pages

html

email-integration

github-pages

static-websites

byAlex Kataev·Mar 6, 2025

To enable email-sending from your static GitHub Pages site, utilize EmailJS :

Obtain an EmailJS account and set up a service/template.
Embed the EmailJS SDK:

<!-- EmailJS, because we don't need stamps to send letters anymore -->
<script src="https://cdn.emailjs.com/sdk/2.3.2/email.min.js"></script>

Initialize it with your EmailJS user ID:

emailjs.init("your_user_id"); // Just your friendly neighborhood mailman

Implement your HTML form, attach an event handler for dispatch:

<!-- The box to post your virtual letters -->
<form id="contactForm">
    <input type="email" name="user_email">
    <textarea name="message"></textarea>
    <input type="submit" value="Send">
</form>

<script>
document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault();  // Stop! Don't reload until the bird has flown
    emailjs.sendForm('your_service_id', 'your_template_id', this)
        .then(function() {
            alert('Hooray! Your pigeon has been released!');
        }, function(error) {
            alert('Ouch. Pesky pigeons, ' + error);
        });
});
</script>

Replace your_user_id, your_service_id, your_template_id with your actual EmailJS credentials. This technique enables email functionality on static sites meticulously and swiftly.

Service options

While EmailJS is a direct and efficient way to send emails from static pages, there are other services like Formspree and Basin offering benefits like spam filtering, captcha implementation, and Zapier integration for your forms. Google Forms offers an alternative for data collection, integrating smooth into your static website.

For choosing a service, consider:

User registration requirements.
Seamless integration with your site's design and workflow.
Level of spam protection.
Ability to continue conversation with site visitors.

Formspree stands out as user-friendly especially since it doesn't require user sign-up.

Form integration best practices

Adopt some best practices while integrating external services into your site:

Validate input on the client-side to prevent harmful data submission.
Use HTTPS to ensure privacy of data in transit.
Provide clear user feedback post-submission – inform them about success or failure.
Respect accessibility – ensure forms are usable by individuals with disabilities.

GitHub Pages limitations

Stay aware of the GitHub Pages boundaries:

Zero server-side scripting: GitHub Pages serve static content only. Use JavaScript and third-party APIs for dynamic actions.
No databases: External services are a must for data storage and processing.
Plugin restrains: Not all Jekyll plugins are permitted, double-check which ones are supported.

Despite these confines, creativity in integrating external services means the sky's the limit.

Troubleshooting email delivery

When emails misfire from their destination, common issues are:

Misconfiguration: Double-check service/template IDs.
Network issues: Confirm your client can connect to the email service provider.
Spam filters: Sometimes emails get flagged as spam. Remind users to check their spam folders.

explain-codes / Html / Send email from static page hosted on GitHub Pages

Linked

How to send an email from JavaScript



Best way to obfuscate an e-mail address on a website?



What is the purpose of the HTML form tag?



Is either GET or POST more secure than the other?



Is there a max size to the length of a hidden input in HTML?

