In this project you will create a contact form on your website. This will enable people to send you short messages that will appear in your email inbox. Your messages will be forwarded to you using the free online service provided by Formspree.
You can display a finished version of this project on GitHub by clicking the image below.
Your first step is to create a folder to hold the contact page for your website.
Follow these steps to download the template HTML file to your contact sub-folder.
Right-click anywhere on the page and choose View page source (Chrome or Mozilla Firefox).
Your next step is to download the CSS file of the template contact form.
The CSS file now opens in a new tab of your web browser.
Your websites\contact sub-folder should now contain the two files named index.html and contact.css as shown below.
Now you can begin to work with the files you have downloaded.
You can close any other files you may have open in your text editor.
In the <head> section of the index.html file you can see that the web page links to a stylesheet named contact-form-template.css. But your stylesheet is now named style.css.
So, in Visual Studio, edit the stylesheet link to style.css as shown below, and then save the index.htmlfile.
As you work with the HTML and CSS files, you will want to be able to display in your web browser the results of the changes you will be making.
If not, right-click the file and, from the pop-up menu displayed, choose Open with and then select either Firefox Developer Edition or Google Chrome to open it.
The contact form web page should look as shown below.
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:
In the next section you will review an example of using the free version of the Formspree service in a contact form on your website.
Follow these steps to customise the HTML form in the index.html file.
In the <head> of your index.html web page, you can see meta tags with the following values.
Replace the name 'Mary Smith' with your own name, and replace the text in the <title> and <description> tags with something similar to the following.
<title>Contact Form | Mary Smith | Web Design and Development Portfolio</title>
<meta name="description" content="Contact form for my personal portfolio website.">
<meta name="author" content="Mary Smith">
Save the index.html file.
In the <head> of your index.html web page, under the link to the contact.css stylesheet, is the link to another stylesheet: the CSS file for the Font Awesome 5 icon collection. You need not make any changes to this.
This CSS file is required to create the icons in the contact form.
You can see a full list of Font Awesome icons at the web address below:
You can find some guidance on using Font Awesome icons below:
As with any Google Fonts you may use in your web pages, the Font Awesome icons will display on your computer only when you are connected to the Internet.
In the <head> section of the index.html web page, just before the closing </head> tag, add the following Google Analytics Tracking Code.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-122243940-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-122243940-1');
</script>
When finished, save the index.html file.
In the <head> section of the index.html web page, just before the Google Analytics Tracking Code, add the following link to the stylesheet for the privacy pop-up message.
<!-- Styles for Cookie Consent Popup Message -->
<link href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" rel="stylesheet">
Next, scroll down to the bottom of the web page and, just before the closing </body> tag, add the followng JavaScript code.
<!-- JavaScript for Cookie Consent Popup Message -->
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#000"
},
"button": {
"background": "#f1d600"
}
},
"content": {
"href": "https://ibat-web-dev.github.io/privacy.html"
}
});
</script>
When finished, save the index.html file.
To check your HTML is correct, use the official W3C Markup Validation Service. Follow these steps.
To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.
The next step is to upload your contact form to GitHub.
The two files named index.html contact.css are in a sub-folder named contact of your websites folder.
So you will need to upload this contact sub-folder to your account on GitHub.
Your contact form 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/contact/index.html
or, simply:
https://username.github.io/contact
It may take a few minutes for your uploaded files to appear on GitHub.
Your final step is to activate your Formspree-processed form. Here's how.
This message is only shown the first time a new form is submitted from a particular web address.
Go to your email account, open the email sent to you by Formspree, and click the Activate Form button.
Formspree will immediately forward the submitted information to your email account. See the example below.
That's it. You now have a working contact form on your website.
Return to Contents.