Contents >

If you have not already downloaded the HTML, CSS and image template files for use with this and your other projects, you can find the instructions at the link below.

Templates Download

About HTML forms and GitHub

What are called forms in HTML enable users to submit information to websites for processing. A typical example of a form is shown below.

It includes three entry areas or form fields into which a user can input information: Name, Email and Message. At the bottom of the form is a submit button named Send. When clicked or tapped, this button submits the information entered in the form fields to the website.

Your web hosting account on GitHub cannot run the type of server-side program that is needed to process information entered by users into HTML forms. As a result, you need to use an external online service to collect the information entered to an HTML form by users of your website.

Two such popular email-processing services that offer a free tier are the following:

Registering with Formspree

For your website to use Formspree, you first need to register with this free online service and receive a unique code for adding to your HTML forms.

Here are the steps:

In your web browser, visit the formspree.io website. At the top-right of the home page, click the Get Started button.
On the ‘Register for Formspree’ screen now displayed, enter the Email address you want to use with Formspree. With Formspree, information entered to your website forms will be forwarded to you by email. The free plan available with Formspree gives you the option to use up two email addresses. The email you enter here will become one of those two addresess to which you can choose form-entered information to be forwarded. Next, choose a Password for your Formspree account, accept the Terms of Service and Privacy Policy, and click the Register button.

That’s it. You are now registered with Formspree. In future, you can sign into Formspree by clicking the Sign In button on the home page, and entering your Email and Password.

Creating a Project and Form in Formspree

In Formspree, a Project is a way of organising different forms – located on the same or different websites – together in a single group. So, before you can create a form, you must first create a Project to store that form. Follow these steps:

Sign in to Formspree, and, on the so-called Dashboard screen, click the + New Project button.
You are now shown a pop-up-window in which you can enter the following details:
- Project name: Enter the name you want to give to your project. This is for your own information only. It will not be displayed on the web page of your website that will contain your HTML form.
- Project type: Accept the default option of ‘Dashboard Project’.
When finished, click the Create Project button.
You are returned to the Formspree Dashboard screen. Click the + New Form button.
In the pop-up-window displayed, enter the Form Name. As with the Project Name, the Form Name is for your own information only. It will not be displayed on the web page of your website that will contain your HTML form. If you have created more than one Project in Formspree, the Project option becomes a drop-down list from which you can select the Project in which you want your new form to be grouped. When finished, click the Create Form button.
You are now shown the ‘Form Details’ screen. You can see an example below. It displays the so-called endpoint – the value you will enter in the action attribute of the form you want to create in a web page or pages of your website.

You will copy-and-paste this endpoint in the Updating the HTML of your form section below.

In Formspree, if you click the Forms option near the top-right of the screen you will be returned to the ‘Forms’ screen where you can see your new form listed along with any others you have may have created.

You do not need to create more than one form endpoint for the various forms you will create on your personal portfolio website. You can simply re-use the same endpoint on every form.

In future, when you want to access your endpoint details from to use in your forms:

Sign in to your account on Formspree.
On the ‘Your Forms’ screen, click the name of the form whose endpoint code you want to use.
On the ‘Forms Details’ screen now displayed, click the Integration tab.
You can now view the endpoint you need to copy-and-paste into any forms on the web pages of your website.

Working with your two HTML files

You will begin by working with two HTML files:

The template file you will copy from and
The web page you will copy to.

In Visual Studio Code, from your websites/templates folder, open the following HTML file: email-signup-form-template.html
From your websites/portfolio/smoothies folder, open the web page named index.html.

If you have any other files open in Visual Studio Code, you may wish to close them.

This will help you to focus only on the two HTML files you will be working with.

Adding the <head> link for the Font Awesome icons

Your Email Sign-up Form will use a Font Awesome 5 icon. So you need to include a link to the Font Awesome stylesheet CSS file.

In the <head> of the index.html web page, just before the closing </head> tag, copy-and-paste the following comment line and code.

<!-- Link to icons for Font Awesome 5 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">

The pasted comment and Font Awesome link should now look as follows. fa-icons-copy

When finished, save your index.html web page.

Copying-and-pasting the form HTML

Your next step is to copy content from the template file into your index.html web page.

In the email-signup-form-template.html file, select and copy the form HTML.
In your index.html web page, scroll down to near the end of the web page, to just before the closing </body> tag.
Press the ENTER key a few times to open up some new lines of blank space.
Paste the copied form HTML.
When finished, save your index.html web page.

You can now close the email-signup-form-template.html file.

Working with your two CSS files

Your next task is to work with two CSS files:

The template CSS file you will copy from and
The stylesheet you will copy to.

In Visual Studio Code, from your websites/templates folder, open the following CSS file: email-sign-up-form-template.css
From your websites/portfolio/smoothies/assets/css folder, open your stylesheet named style.css.

If you have any other files open in Visual Studio Code, you may wish to close them.

This will help you to focus only on the two CSS files you will be working with.

Copying-and-pasting the form CSS

Your next step is to copy content from the template CSS file into your style.css stylesheet.

In the email-sign-up-form-template.css file, select and copy the form styles.
In your style.css file, scroll down to the end of the stylesheet and click on the last empty line.
Press the ENTER key a few times to open up some new lines of blank space.
On the new last line, paste the copied form CSS.
When finished, save your style.css stylesheet.

You can now close the email-sign-up-form-template.css file.

In your web browser, the Email Sign-up Form should now look as shown below.

Updating the HTML of your form

Your next step is to edit the text of the Email Sign-up Form you copied from the template file.

In VS Code, display your index.html web page.

Scroll down to the form, and edit the <h3> sub-heading and <p> text of the form as follows.

<h3>Join our email list</h3>
<p>Keep me up-to-date with your latest healthy smoothie recipes and special offers.</p>

Edit the text of the form submit button from ‘Sign Up‘ to ‘Subscribe’ and change the Font Awesome icon.

<button id="btn-submit" type="submit" class="btn-submit">Subscribe <i class="fas fa-envelope"></i></button>

Finally, update the form’s action value by copying-and-pasting the endpoint value from Formspree. See the example shown below.
You can now save and close the index.html web page. You have finished updating it.

Updating the CSS of your form

Now you will update the styles of the Email Sign-up Form to match the remainder of the web page.

In the style.css file, scroll down to the styles for the form and remove the border styles.
For the <h3> sub-heading of the form, add a new font-family, and change the colour and font-size as shown below.
For the <p> paragraph text of the form, also add a new font-family, and change the colour and font-size as shown below.
For the ‘Email’ label of the form, change the font and increase the font-size.
Change the colour of the border around the form field as follows.

Update the styles for the form submit button as follows.

#email-signup-form #btn-submit {
   color: #fff;
   border: none;
   padding: 12px 22px;
   background-color: #d1274b;
   border-radius: 50px;
}

#email-signup-form #btn-submit:focus,
#email-signup-form #btn-submit:hover {
   background-color: #733fc0;
}

Save your style.css file.

You can display a finished version of the project web page by clicking the image below.

In later Tutorials for this portfolio project you will add a footer and menus.

Uploading your project to GitHub

All the files you have updated for this project are in the smoothies sub-folder of your websites/portfolio folder.

So the easiest option is simply to upload the entire smoothies sub-folder to your account on GitHub.

If you are not already signed in to your GitHub account, sign in now.
On the left of your GitHub home page, click the name of the repository that holds your web pages.
On the next GitHub screen displayed, click the portfolio folder.
GitHub should now display your portfolio folder.
With the portfolio folder displayed on your GitHub screen, click the Add file button and, from the dropdown list displayed, choose the option Upload files.
In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the smoothies folder to the GitHub tab in your web browser.
After uploading the smoothies folder, scroll down to the bottom of the GitHub screen, enter a short message in the Commit changes box, click the Commit changes button, and wait for the upload to complete.

Your updated ‘Smoothies’ project web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/portfolio/smoothies/index.html

or, simply:

https://username.github.io/portfolio/smoothies

It may take a few minutes for your uploaded files to appear on GitHub.

Activating your form on Formspree

Your final step is to activate your Formspree-processed form. Here's how.

In your web browser, go to the uploaded Smoothie project web page on your website.
Test your form by clicking (or, on a mobile phone, tapping) the Subscribe button without entering any details in the form field. You should see an error message such as that below.
Follow the instruction in the error message until clicking/tapping the Subscribe button successfully submits the form.
Your form is now passed to the Formspree service and you will be presented with an “I am not a robot” test. This is to protect your form against spam.
After you have proved you are not a robot, you are next shown a screen similar to the following. This message is only shown the first time a new form is submitted from a particular web address.
The activation message is sent by Formspree to the email address you entered in the opening <form...> tag in the index.html file. Go to your email account, open the email sent to you by Formspree, and click the Activate Form button.
You will next see a message telling you that your form is now active.
In future, when a user enters their details to the contact form on your website, they will see the following confirmation message after they click/tap the Send button and pass the “I am not a robot” test. Formspree will immediately forward the submitted information to your email account. See the example below.