Github Pages has been around for a long time, offering static site hosting for free. But with “static” (as opposed to “dynamic”) comes limitations that ordinarily wouldn’t make GitHub Pages a good choice for a website that has to do stuff-- not unless you’re a programmer who can write web services for your GitHub Pages site to allow them to process data externally. Even then, you’d still need to purchase application and database hosting for the web services.
ActionEquals.com which provides Forms-As-A-Service, can bridge the gab and provide the functionality you need without any programming. Now, you can upload your form to GitHubPages or any other static web hosting service and make a few small changes to the HTML and ActionEquals will provide the Forms processing functionality you need to meet your needs.
Let’s say you want to set up an online survey on a static hosting service. Firstly, there are many such services to choose from besides GitHubPages-- GoDaddy, BlueHost, Amazon S3, Google Firebase, and many others which are either free or almost free. This article will demo a free GitHub Pages solution with ActionEquals.com providing form processing because it has tens of millions of users.
Use Case: Brochure Site
Sometimes, you just want to set up a simple website to display information about your company-- its location, business hours, phone number, etc. If you look at some example GitHub Pages sites, you’ll notice mostly sites for software libraries which are also just static content that doesn’t do anything. There’s no interaction. No ability to login or even submit a simple Contact Us form.
In this article, we’ll set up a website for a fake company called “United Pest.” It’s a static site-- almost.
If we could simply provide the ability for users to submit their contact info or feedback in the form of a survey, etc., all of a sudden, a “static” website will be fine to meet our needs. That’s where ActionEquals.com comes in.
Users who are already familiar with git, github, and github pages can skip the minutia that follows.
In order to create a new GitHub Pages (https://pages.github.com) site, we created a new GitHub user account which is a prerequisite for creating the GitHub repository to contain the website. We created a new account, and a new empty repository according to the instructions. It ended up being actionequals/actionequals.github.io. We also downloaded the GitHub Desktop application which, as it turns out, is very easy to use. You can use GitHub Desktop to clone the repository, that is-- create a folder on your local machine to contain the files, make changes to them, and send these changes to the remotely stored GitHub repository. Cloning the repository is a necessary step.
Now, we needed a way to quickly build the demo site. We used a free design tool provided by https://www.nicepage.com/. Another downloadable desktop application, Nicepage can be used to visually design the pages and layout of a simple site. It generates the html and css from your design which you can “export” (i.e. save) to your machine. This worked pretty well-- we generated the main page with an image and a menu linking to a Contact page with a prebuilt form and a Survey page. We didn't find an easy way to create a custom form within Nicepage, so we created a blank page and used another tool. We didn't spend a lot of time researching form builders, so we decided to try out the online Bulma Form Builder. Coincidentally, this site is itself a GitHub Pages site. Anyway, that utility lets you generate HTML forms that work with a CSS library at https://bulma.io/
To add and commit the site file, we just moved them from the folder downloaded from Nicepage into the local Git repository folder. The GitHub Desktop application will them show them as added, and ready to commit to the Git repository, which we then did by adding a comment and pressing the “commit” button. Then we published the repository using GitHub Desktop by pressing the "Publish" tab. Finally, navigating a browser to https://actionequals.github.io displays the site:
To make the forms work, we first need to create a free trial account at http://www.actionequals.com/ to obtain an API Key. No credit card is necessary to sign up, and the free trial account provides full functionality for a 30-day period that doesn't start until the first form is submitted, so you can sign up even before you start working on your site. The registration process was easy, and we received an API Key-- "X80Dk1C"-- that will be used for both the contact and survey forms.
Next, we change the <form> tag in each of these forms. The original tag:
<form method="POST">is changed to
<form action="https://www.actionequals.com/X80Dk1C?f=Contacts" method="POST">on the Contact page, and
<form action="https://www.actionequals.com/X80Dk1C?f=Survey" method="POST">on the Survey page.
Next, we change the name attributes on the <input> elements of the forms because of how we want to view all the submitted forms in the ActionEquals Dashboard. The Dashboard lets you select a form by name-- in this case either Contacts or Survey, and view the data that your users submitted in a table format. If we do nothing-- if we don't change the names of certain fields, all the data on the form will get stored in a single "Miscellaneous" column for each row (that is, form submission). For the Contacts form, we want this grid to have distinct Email and Name columns. Therefore, we name the <input> elements "Email" and "Name" because a name starting with a capital letter is a naming convention that directs ActionEquals to store the data in the element, in its own column.
We made similar minor changes to the <input> elements in Survey.html. In this case, we want to prevent a person from submitting more than one survey, so we named the email field on the form "_SubmissionKey" which will accomplish that goal.
<input id="_SubmissionKey" name="_SubmissionKey" type="email" class="input" required>
Adding a CAPTCHA
Those who have set up websites before know that if you publish a Contact form, you will get many, many spam submissions from robots. In order to prevent this, we want to put a CAPTCHA challenge on the Contacts form. This displays an image that appears to be text, containing a different combination of letters and numbers, generated every time the page is viewed, and asks the user to enter the letters and numbers displayed in that image. This is supposed to prevent robots from posting form submissions, and it actually works pretty well in practice. ActionEquals makes it easy to add a simple CAPTCHA like this to a form with one line of script without any additional signup or registration, configuration, etc.
<script src="https://actionequals.com/getCaptcha/X80Dk1C"></script>
With a few lines of CSS and a few more lines of Javascript to adjust the visual layout of the form, the Contacts form ended up looking like
As your visitors submit contact and survey forms, the data they submitted can be viewed on the ActionEquals Dashboard. This data can even be queried, sorted, or exported to a spreadsheet.
Conclusion
Whether you are sitting up a website on a static hosting service, or just prototyping a new page or form, you can leverage the capabilities of ActionEquals Forms-as-a-Service to quickly achieve your goal without programming. ActionEquals has many other features including a REST API, and built-in solutions for Login and Registration forms. Our next article will have a look at the features of the Dashboard.
Every time you type action=, type ActionEquals.com!
