Contents  >

Web Agency Project:
Contact Form

Introduction

In this task you will use template content to add a Contact Form page to the ‘Web Agency’ website project you created earlier.

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

Web Design Project: Web Agency 2n2l.com Brendan Munnelly

Learning Goals

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

Contents

Introduction

Downloading the new hero image

Creating your Contact Form web page

Editing your Contact Form web page

Working with the template HTML file

Adding the <head> link for the Font Awesome icons

Copying-and-pasting the Contact Form HTML

Working with the template CSS file

Copying-and-pasting the Contact Form CSS

Updating your web page and stylesheet

Editing the text of your Contact Form

Linking to your Contact Form

Updating the visual style of your Contact Form

Uploading your project to GitHub

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

Downloading the new hero image

Your first step is to download the image file for the new ‘Contact Form’ web page you will create.

  1. Right-click the image below and, from the context menu displayed, choose Save Image As Contact hero image
  2. Download the image file to your websites\portfolio\web-agency\assets\img sub-folder: file-explorer-full

Creating your Contact Form web page

Your new Contact Form web page will be similar in design to the already existing three pages in your sample ‘Web Agency’ website and will use the same stylesheet.

So you can use the current home page index.html file as the basis for creating the new page.

Start Visual Studio Code and follow these steps.

  1. From your websites\portfolio\web-agency folder, open the web page named index.html. fa-icons-copy
  2. From the File menu, choose the Save As command. fa-icons-copy
  3. Save the HTML file in the same folder as the project’s three other web pages, and give the new file the following name:   contact.html fa-icons-copy

You are now ready to edit your new contact.html web page.

Editing your Contact Form web page

You need to update the content of your new contact.html web page.

  1. In Visual Studio Code, edit the <h1> and <h2> headings in the hero section by replacing the current text with the following: 
    <h1>Your partner in digital success</h1>
<hr>
<h2>Working with clients to build digital campaigns rich in vision, meaning and creativity.</h2>
  2. Replace the image file used in the hero section with this one. 
    <img src="../assets/img/project-web-agency-form/hero-contact-page.png" alt="contact page hero image">
  3. After the end of the hero block, you can delete the rest of the HTML and text on this page.   Remove everything all the way down to the closing </body> tag. fa-icons-copy
  4. When finished, save your contact.html web page.

In your web browser, the contact.html web page should now look as shown below.

fa-icons-copy

Working with the template HTML file

In this next step, you will work with two HTML files:

  1. In Visual Studio Code, from your websites\templates folder, open the following HTML file:   contact-form-template.html
  2. From your websites\portfolio\web-agency folder, open the web page named contact.html.

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

fa-icons-copy

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 contact form will use a Font Awesome 5 icon. So you need to include a link to the Font Awesome stylesheet CSS file.

  1. In the <head> of the contact.html the 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 contact.html web page.

Copying-and-pasting the Contact Form HTML

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

  1. In the contact-form-template.html file, select and copy the contact form content. fa-icons-copy
  2. In your contact.html web page, scroll down to near the end of the web page, to just before the closing </body> tag. fa-icons-copy
  3. Press the ENTER key a few times to open up some new lines of blank space.
  4. Paste the copied contact form content.
  5. When finished, save your contact.html web page.

You can now close the contact-form-template.html file. You are finished working with it.

Working with the template CSS file

In your next step you will work with two CSS files:

  1. In Visual Studio Code, from your websites\templates folder, open the following CSS file:   contact-form-template.css
  2. From your websites\portfolio\web-agency\assets\css folder, open your stylesheet named style.css.

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

fa-icons-copy

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

Copying-and-pasting the Contact Form CSS

In this step you will copy from the contact form template CSS file into your style.css file.

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

You can now close the contact-form-template.css file. You are finished working with it.

In your web browser, the contact-us.html web page should now look as shown below.

fa-icons-copy

Updating your form content and appearance

You have now successfully added a fourth page containing a functional Contact Form to your portfolio website. All that remains is to:

Editing the text of your Contact Form

Here are the final steps to editing the text content of your Contact Form web page.

  1. In the contact.html file, replace the <h3> sub-heading and the <p> paragraph text as follows. 
    <h3>Let's talk</h3>
<p>Do you have a project you'd like to discuss with us. If so, please complete and submit this form.</p>
  2. Update the form’s action value by copying-and-pasting the endpoint value from Formspree. See the example shown below. fa-icons-copy
  3. You can now save and close the contact.html web page.

Now that you hve added a Contact Form web page to your project, let’s add some hyperlinks to the Contact Form page from the website’s three other pages.

  1. In the index.html file, scroll down to the end of the web page.   You will see the following final sentence. fa-icons-copy
  2. Enclose this sentence within a hyperlink as shown below. 
    <a class="fancy-link" href="contact.html">Get in touch for a quick quote</a>
  3. Open the services.html web page, and add a hyperlink with a class of fancy-link that links to the contact.html page to the “Let’s chat” text near the bottom of the page. 
    <a class="fancy-link" href="contact.html">Let's chat</a>.
  4. Open the team.html web page of this project, and add a hyperlink with a class of fancy-link that links to the contact.html page to the “Get in touch” text near the bottom of the page. 
    <a class="fancy-link" href="contact.html">Get in touch</a>.
  5. In your web browser, display the web pages and click the hyperlinks to verify they work correctly. fa-icons-copy

Updating the visual style of your Contact Form

Your final step is to update the visual appearance of the Contact Form.

  1. In the style.css file, change the font colours of the form’s <h3> sub-heading as shown below. fa-icons-copy
  2. Change the colour of the <p> paragraph text as shown below. fa-icons-copy
  3. Change the background colour value for the .container-contact-form style as shown below. fa-icons-copy
  4. Change the background and border colours of the form fields as shown below. fa-icons-copy
  5. Change the background-color value for the ‘Submit’ button as shown below. fa-icons-copy
  6. Save and close your style.css file.

That’s it. You are now finished working with your Contact Form page.

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

Web Design Project: Web Agency 2n2l.com Brendan Munnelly

Uploading your project to GitHub

The final step is to upload your project to GitHub.

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

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

  1. If you are not already signed in to your GitHub account, sign in now.
  2. On the left of your GitHub home page, click the name of the repository that holds your web pages.
  3. On the next GitHub screen displayed, click the portfolio folder. GitHub Upload
  4. GitHub should now display your portfolio folder. github-upload-portfolio
  5. 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. Project Animation Google Fonts
  6. In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the web-agency folder to the GitHub tab in your web browser. github-upload-drag-drop
  7. After uploading the web-agency 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. github-upload-progress

Your updated ‘Web Agency’ project 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/web-agency/index.html

or, simply:

https://username.github.io/portfolio/web-agency

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



Return to Contents.