88

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?

Rubén
  • 34,714
  • 9
  • 70
  • 166
A9S6
  • 6,575
  • 10
  • 50
  • 82
  • 1
    Probably the only way would be to post to another hosted file (PHP or other technology on another server). You can probably look in Google Forms or something like that. – Alexandre Lavoie Jun 22 '14 at 04:51

11 Answers11

108

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/you@email.com"><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 your@email.com with your own email.

http://formspree.io/your@email.com

  1. 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.

  1. All set, receive emails

From now on, when someone submits that form, we'll forward you the data as email.

juzraai
  • 5,693
  • 8
  • 33
  • 47
Parvez Hassan
  • 1,717
  • 2
  • 14
  • 10
  • Question for you: what happens if you use the AJAX Post Request method instead of just using the action attribute on the form tag? Will that send an e-mail without taking the user to Formspree's Thank You page? – Gregory Desrosiers Feb 24 '16 at 03:40
  • 1
    Although I haven't tried it. But there is way to that. You can use Formspree via AJAX. This even works cross-origin. The trick is to set the Accept header to application/json. If you're using jQuery this can be done like so: $.ajax({     url: "//formspree.io/you@email.com",      method: "POST",     data: {message: "hello!"},     dataType: "json" }); – Parvez Hassan Feb 24 '16 at 15:27
  • A heads up: it appears the AJAX method can only be used for gold-paying customers. – rideron89 Apr 02 '18 at 02:19
  • 2
    AJAX is supported for free again. See my longer update here: https://stackoverflow.com/a/58721654/866413 – Cole Nov 06 '19 at 01:06
  • 1
    Doesn't this expose your email address to spammers? – kojow7 May 19 '20 at 16:53
  • formspree.io now (updated 4 months ago) encourages you to use a unique URL after you register and set up your email once there. In this way, you can then replace your email with a unique token at the "action" form, which is given by the formspree.io settings of your project. Details: https://help.formspree.io/hc/en-us/articles/360056076314 – dimi_fn Mar 31 '21 at 15:06
43

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.

Moshe Katz
  • 15,992
  • 7
  • 69
  • 116
36

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

Tony
  • 361
  • 4
  • 3
25

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.

juzraai
  • 5,693
  • 8
  • 33
  • 47
13

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!

Cole
  • 2,933
  • 2
  • 18
  • 10
  • 1
    Are forms set up with Formspree more likely to be filtered as spam compared to regular emails sent from an email client? Does formspree set all the available security headers like the SPF and DKIM stuff? (you can tell I don't know anything about email security protocols) – V. Rubinetti Jul 15 '20 at 06:35
  • 1
    @V.Rubinetti oops missed this. Hope you've been well for the last 2 years. Yes Formspree sets DKIM and SPF headers, and we work hard to ensure our email notifications have excellent delivery stats. :D – Cole Jun 06 '22 at 20:39
  • 1
    Formspree no longer supports the email urls, largely due to browser changes to the "referer" field. – Cole Jun 06 '22 at 20:41
5

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 !

jandresrodriguez
  • 794
  • 7
  • 18
5

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.

Adam
  • 2,800
  • 1
  • 13
  • 15
0

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! :)

Jesper
  • 19
  • 1
0

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.

aks
  • 8,796
  • 11
  • 50
  • 78
0

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.

Sabesan
  • 654
  • 1
  • 10
  • 17
-1

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.

Prakhar Varshney
  • 247
  • 1
  • 6