WDD 230: Web Frontend Development I

W04: Project Milestone - The Chamber Join Page

Overview

The purpose of this page is for a prospective member to apply to join the chamber of commerce through a membership application form. The instructions provide the specific form input and functional requirements.

Instructions

1. Copy your latest home page (index.html) and rename it "join.html" in the chamber folder.
2. Preserve the header, navigation, and footer content, and erase the content in the main area of the page.
3. Do not add new CSS files to support this page. Use your existing CSS and add or modify rules and declarations as needed.
4. The form page must contain the following form elements, types, and attributes.
   • Use a form with a get method and action that points to a confirmation page named "thankyou.html".
   • Form input fields:
     REMEMBER: Each field element, including the textarea, should be encased in a <label> tag to support accessibility.
     • applicant's first name, text type, required, name, and id
     • applicant's last name, text type, required, name, and id
     • applicant's title or position within their organization, text type, name, id, and pattern to only accept alpha characters, hyphens, and spaces with a minimum of seven characters using a regular expression
     • an email address, email type, required, name, id, and placeholder which contains an example email input.
     • a mobile phone number, telephone type, required, name, and id
     • the business/organization's name, text type, required, name, and id.
     • a membership level selection using an appropriate form field of your choosing to allow the user to select a membership level. There are four membership levels.
       • NP Membership is for non profit organizations and there is no fee.
       • Bronze Membership
       • Silver Membership
       • Gold Membership
     • a business/organization's description, text area, name, and id
     • the timestamp, hidden type, name, and id. This field contains the current date and time that the form was loaded by the user.
     • A form submission button using input of type submit that is properly labeled in the text node of the button.
5. Membership level benefits should be displayed to the side of the form in larger views. For example, two columns are appropriate.
   • These membership levels have increasing costs as well as increased benefits per level. Benefits might include special events, training, advertising (like spotlight positions on the home page), event discounts, etc.
6. Ensure that the design meets standards such as eye tracking in a straight line and proper keyboard progression (tabs) for accessibility. 📃 Designing more Efficient Forms
7. Create a new page named "thankyou.html" that expresses gratitude for filling out the form. This page should load when the user has successfully submitted the form. The design should follow your site pattern and does not need to have a lot of actual content.
8. The design should deviate from the learning activity's example of styling and design. Make it your own.
9. As always, web pages need to meet all the development standards of valid, standards-based, semantic markup, and be responsive in all viewports.

Submission

1. Commit and push your work to your wdd230 GitHub Pages repository.
2. Return to I-learn to submit your home page URL.