WDD 130: Web Fundamentals

W05 Rafting Project: Contact Us Page

Overview

A new page will be added to the rafting site. This page will include contact information and a contact form which the user can submit to ask questions about the company and its services.

Instructions

File Setup / Copy

1. Right mouse click the about.html page which is located in the wwr directory and select Copy to copy that file to memory.
2. Right mouse click on the wwr directory and then select Paste which will copy it into the wwr directory with a name of "about copy.html".
3. Right click on this new file and select Rename which will highlight the file name only. Rename it "contact.html".

Prep the New Page

1. Change the relevant information on this page in the head section including the title and meta description.
   Do not overlook the title and description. What content should they include? Think about the purpose of the page and how it will appear to users when used as an entry point to the site.
2. Use the same header, navigation, and footer.
   Why should we leave the header, navigation, and footer the same?
3. Remove the non-relevant content within the main element.

Design

1. The Contact Us page must have the following content at a minimum:
   1. The header, navigation, and footer layout and content should be the same as other pages on the rafting site.
   2. Company information including:
      • address
      • phone number(s)
      • email
      • small embedded google map
        Video Demonstration: ▶️ Embedding a Google Map

        Be sure to remove the supplied inline CSS style="border:0" that is automatically inserted into the Google Map iframe code. If you want to style the iframe, do so in your CSS file.

        The Google Map does not count when measuring page weight total transferred kilobytes per page in the final evaluation.

   3. Employee profile images with captions that include the titles of at least three, happy-looking employees.
   4. An HTML form that asks for the following:
      • the user's name
      • the user's email address
      • the purpose of the message, which allows the user to pick from the options listed below.
        Use radio <input type="radio"> buttons for this form input requirement.
        • General Inquiry
        • Reservation Question
        • Website Suggestion
      • the message
      • a checkbox labeled "Please subscribe me to the monthly newsletter"
      • a properly styled, and labeled submission button

        Using clear, descriptive text on submission buttons can help users understand the purpose of the form and what they need to do to complete it. It also ensures that users with screen readers or other assistive technologies can easily understand the function of the button.

        In addition to using usable text on submission buttons, it's also important to ensure that the button is visually distinguishable from other elements on the page and that it is easy to locate and interact with. This can be done by using clear visual cues such as color, size, and placement to make the button stand out.

2. Create a wireframe design image sketch of the Contact Us page layout and general content.
   • There are no required layout specifications except that you follow designs principles of uniform layout, alignment and proximity.
   • Use moqups.com or an equivalent wireframing tool to create a wireframe design. Alternatively, drawing the wireframe or using another tool to produce the wireframe image/file is allowed.
   If you are using Moqups, be sure to set the Sharing settings to Anyone with the link can view:

   

Build

1. Using the wireframe as a guide, build the structure of the contact.html page using HTML.
2. Add the required content which includes:
   • the common header, navigation, and footer
   • the employee profile images with captions
   • the user comment form
3. Using the same rafting.css file, make necessary additions to the CSS by adding or editing selector rules to support this pages additions. Be careful to not repeat anything unnecessarily and consider reusing declarations that are common between selectors in a new class rule, if needed.
4. Create a link to the Contact Us wireframe image in the footer of the contact.html page only.

Testing

1. Test the page continuously in the local browser using Live Server.
2. Every page in this course will be expected to pass the development standards checklist.
3. Check for color contrast violations at the AA level. Use the DevTools CSS Overview to test.
4. Commit the changes and sync/push them to the wdd130 GitHub Pages enabled repository.
5. Enter your GitHub username into this evaluation tool to get an basic evaluation of your HTML and CSS.

Submission

1. Submit the GitHub pages URL in I-Learn. Example URL:

   https://githubusername.github.io/wdd130/wwr/contact.html