Send email from static page hosted on GitHub Pages

HtmlFormsHtml EmailGithub Pages

Html Problem Overview


I have hosted a single static HTML page using GitHub Pages. I need to add a "Send Feedback" feature to my static page where a user can type in his name, email, comments and click the SUBMIT button. This will send an email with the contents to my email address. Can this somehow work in a static HTML page on GitHub? Does GitHub Pages support this mailing feature?

I also want to know what features/plugins etc can GitHub Pages server support based on the underlying web server it uses?

Html Solutions


Solution 1 - Html

Yes it can be done this way with the help of Formspree.

Formspree

http://formspree.io/

HTML forms Just send your form to our URL and we'll forward it to your email. No PHP, Javascript or sign up required — perfect for static sites!You just need to open your text editor, and paste the following code:

<form action="http://formspree.io/[email protected]"><input type="email" name="_replyto"><textarea   name="body"></textarea><input type="submit" value="Send"></form>

That's it, your form already works! It will post the form onto an external domain, formspree.io, and send you an email with all the form content. No database. And you can just hit reply in your mailbox to continue the conversation with your visitor.

This tool was built by the guys from Brace, then open-sourced and hosted by Assembly.

> Setting it up is easy and free. Here's how: > > You don't even have to register. > > 1. Setup the HTML form > > Change your form's action-attribute to this and replace [email protected] > with your own email. > > > http://formspree.io/[email protected] > > 2. Submit the form and confirm your email address > > Go to your website and submit the form once. This will send you an > email asking to confirm your email address, so that no one can start > sending you spam from random websites. > > 3. All set, receive emails > > From now on, when someone submits that form, we'll forward you the > data as email. >

Solution 2 - Html

This cannot be done natively on GitHub pages. You will need to use some kind of form submission tool.

GitHub's pages documentation describes what you can and cannot do with the hosting, and what plugins it supports.

Solution 3 - Html

Github pages doesn't support php and some of the other backend stuff you'd need for this. A simple approach is to just create a google form which corresponds to your html form and use the action submit to that. It is a bit trickier to do it with out a redirect but it can be done.

Here's how I did it: https://github.com/toperkin/staticFormEmails/blob/master/README.md

Solution 4 - Html

GitHub Pages doesn't offer/support anything like this, since it's just a static website hosting. It serves HTML files and assets, but doesn't run server side scripts.

A few months ago I run into the same problem and did some research. As others mentioned, an external form handler service is needed for this task. Fortunately, there are tons of them:

I compared their features and limits based on their website, then I chose, tried out Basin and finally I stuck with it. It offers spam filter, captcha verification, Zapier integration; hides your email address in your form and it can send an email receipt to the one who submitted the form - all of this for free. It works like a charm on my website (hosted on GitHub Pages) behind my contact form.

EDIT: It offered unlimited submissions when I originally wrote this answer, but now a paid subscription is required for unlimited submissions and a redirect URL. Free tier now includes 100 submissions/month.

It's very easy to set up, the administration interface shows HTML snippets to copy-paste. Your form will look something like this:

<form accept-charset="UTF-8" action="https://usebasin.com/f/123456xabcdef" enctype="multipart/form-data" method="POST">
  <input type="email" id="email" name="email" required>
  <textarea rows="4" cols="50" name="comment" required></textarea>
  <button type="submit">Submit</button>
</form>

Some time ago I wrote a blog post about testing Basin with more details.

Solution 5 - Html

Formspree founder here.

Formspree has changed a bit in the last few years. It's now supports AJAX for free, spam filtering, optional captcha verification, and several built-in plugins including Zapier.

The best way to get started is to create a form on the home page (https://formspree.io), or go to https://formspree.io/create. The old way of putting your email directly in the URL still works, but that exposes your email in the HTML, and requires an activation step. Creating a form in Formspree avoids the form activation step, and hides your email address.

There's lots of up-to-date information about Formspree's features and common issues at https://help.formspree.io/. The product continues to improve on a weekly basis. Come check it out!

Solution 6 - Html

Yes it can, there are many apps around the web that allows you to send emails from you static HTML with a couple of javascript lines. Some of them are mandrillapp, sendgrid, among others, and the best of them, they are all free !

Solution 7 - Html

This solution involves self-hosting the backend part on a virtual server, do not be scared of a little backend. Here is my static GitLab page without any third party form provider.

I created an open source project that enables you to include a contact form into your GitHub, GitLab or any other static hosted websites. I find the answer, you cannot do it yourself, please use formspree not a good answer. While this is true that you currently cannot have a backend service hosted on GitHub and GitLab pages, you can forward your request using cross origin resource sharing to your own backend server.

The frontend part of my solution is available on GitLab here. It uses jQuery Ajax to send the data with a HTTP post request using CORS to the backend. The PHP backend code is here. Because most people cannot be bothered with server installations, I included an ansible playbook to do everything automatically.

The features include:

  • google captcha
  • form validation using jQuery Validation
  • multiple file upload

So if you can be bothered to spend 30min to understand how to configure and deploy ansible playbooks, you can use my solutions. Cloud providers have very competitive prices. (OVH vps starters from 3,50eur/month, netcup below 3eur/month). With the smallest VPS you can handle hundreds of concurrent form submissions for as many GitHub/ GitLab pages as you like. How much would it cost you at formspree?

The code for this solution is open source and hosted on GitLab for anyone to improve or fix any security issues. And because I think it sucks to charge for basic needs software, like a contact form, it will remain open source. Forever.

Solution 8 - Html

I built https://www.formbackend.com for things like these. The only thing you need is to create a form-backend on the website and use the unique URL as the action in your <form action="[FORMBACKEND_UNIQUE_URL]">

The field you add to the form will be submitted to our backend, where you can either view them online - or you can set it up so you receive an email every time someone submits your form! :)

Solution 9 - Html

No this is not supported by any static sites you will build. Yet there are a ton of services that can help you do this. Right now you just need a static form in your website but as time goes on you will want to do more things like:

  • What users are doing on your site
  • email them offers
  • increase engagement and a lot more.

I am trying out a tool Formester.com which will help you do all of this at an affordable price.

Solution 10 - Html

Unfortunately, You can't do via Github pages. You can achieve via a submission tool.

I found an article from Medium.com. In the article, the author mentioned the http://formspree.io/ as a submission tool. In this article author clearly mentioned the steps. I think this link is helpful for you.

Solution 11 - Html

Why don't you create/Use Sendgrid(or anything like that) a smtp api , and use axios to post a request for sending any mail.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionA9S6View Question on Stackoverflow
Solution 1 - HtmlParvez HassanView Answer on Stackoverflow
Solution 2 - HtmlMoshe KatzView Answer on Stackoverflow
Solution 3 - HtmlTonyView Answer on Stackoverflow
Solution 4 - HtmljuzraaiView Answer on Stackoverflow
Solution 5 - HtmlColeView Answer on Stackoverflow
Solution 6 - HtmljandresrodriguezView Answer on Stackoverflow
Solution 7 - HtmlAdamView Answer on Stackoverflow
Solution 8 - HtmlJesperView Answer on Stackoverflow
Solution 9 - HtmlaksView Answer on Stackoverflow
Solution 10 - HtmlSabesanView Answer on Stackoverflow
Solution 11 - HtmlPrakhar VarshneyView Answer on Stackoverflow