Project Smoothies - Email Sign Up Form | IBAT Web Design Portfolio Project

Introduction

In this task you will use template content to add an email sign-up form to the single-web page 'Smoothies' project you created earlier.

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

Learning Goals

At the end of this Tutorial you will be able to:

Copy selected HTML with text content from a template file to a sample web page.
Copy selected CSS from a template file to a stylesheet for a sample web page.
Edit the copied HTML and CSS as required.

Downloading the Templates Folder and Files

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:

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

Add the <head> link for the Font Awesome icons

Your email sign-up form will use a Font Awesome 5 icon. So you need to copy and paste the link to the Font Awesome stylesheet CSS file from the <head> section of the email sign-up form template file to the <head> section your index.html web page.

In the email-signup-form-template.html file, select the Font Awesome link from the <head> section and copy it.
In your index.html web page, paste the copied Font Awesome link in the <head> section, just after the link to Google Fonts as shown below.
When finished, save your index.html web page.

Copy-and-paste the form HTML

Your next step is to copy content from the email sign-up form template file into your index.html web page.

In the email-signup-form-template.html file, select and copy the form section.
In your index.html web page
- Scroll down to near the end of the web page, to just before the JavaScript for Cookie Consent Popup Message.
- Press the ENTER key a few times to open up some new lines of blank space.
- Paste the copied form content.
When finished, save your index.html web page.

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

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

Copy-and-paste the form CSS

Your next step is to copy content from the email sign-up form template CSS file into your style.css web page.

In the email-sign-up-form-template.css file, select and copy the form section.
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.

Update your form HTML and CSS

Here are the final steps to updating your email sign up form.

In Visual Studio Code, open your index.html web page and the style.css file.

In the index.html file, scroll down to the form section, and change 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">Try it free <i class="fas fa-envelope"></i></button>

Ensure that you have changed the email address in the form from myname@gmail.com to your own email address. You can now save the index.html web page. You have finished updating it.
In the style.css file, scroll down to the /* == Email sign up form container == */ section and remove the border styles.
For the form, change the <h3> sub-heading and <p> paragraph text font, font-size and colour as shown below.
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:hover {
   background-color: #733fc0;
}

Save your style.css files.

View your web page in your web browser. The email sign up form should look as below.

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

Validate your CSS file

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

Go to this web page: https://jigsaw.w3.org/css-validator.
Click the By direct input tab.
Copy and paste your CSS file into the box named Enter the CSS you would like validated.
Click the Check button.
If you see any errors (other than those related to the fluid typographic equation, as shown below), return to your style.css file in Visual Studio Code, fix the errors, save the file, and copy the entire file again.
In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Upload your project to GitHub

The final step is to upload your project to GitHub.

All the files for this project are in a sub-folder named smoothies of your websites/portfolio folder.

So you will need to upload this smoothies sub-folder, which contains both files and other sub-folders, to your account on GitHub.

Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now.
On your GitHub home page, click the name of the repository ('repo') that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub. username.github.io
The next GitHub screen displayed should look as follows. Click on the portfolio folder.
On the next screen displayed, click the Upload files button.
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 'Smoothies' project web page with the email sign-up form 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.

Activate your contact form

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

Go to the Smoothie portfolio project page on your website. It will have 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
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 that 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.