WDD 231: Web Frontend Development I

W04: Chamber Membership 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

Setup

1. Create a new file named join.html in your chamber folder that uses your chamber template. The header, navigation, and footer will be common to all pages of the site.

Requirements

The form page must contain the following form elements, types, and attributes. Both the "title" and "label" attributes are helpful for assistive technology.

1. Use a form with a get method and action that points to a confirmation page named "thankyou.html".
2. Form fields:
   • applicant's first name, text type, required, name, title, and correct autocomplete value so this field autofills with the first name
   • applicant's last name, text type, required, name, title, and correct autocomplete value so this field autofills with the last name
   • applicant's organizational title within their organization, text type, name, title, autocomplete value of "organization-title", 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, title, correct autocomplete value, and placeholder which contains an example email input.
   • a mobile phone number, telephone type, required, name, title, and correct autocomplete value
   • the business/organization's name, text type, required, name, title, and correct autocomplete value of "organization".
   • 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, title, and name
   • 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.
3. Each field element, including the textarea, should be encased in a label tag to support accessibility.
4. Build 4 different cards to display the membership level titles and a link to get additional information. On small screens these are displayed below the form and on larger screens these are displayed to the right of the form.
   Use four HTML modals to display the benefits of each membership level. The modals should display when the user clicks the link on each card (example small screen - example large screen).
   • 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.
5. Ensure that the design meets standards such as favorable eye tracking and proper keyboard progression (tabs) for accessibility. 📃 Designing more Efficient Forms
6. Incorporate animation/transition into the initial display of 4 different membership level cards or buttons. (This is different than using a transition on mouse hover.) For example, you could change the color over time, change the opacity, change the margin, etc. Try to draw attention to these membership cards without being overly distracting. Example of animation on initial page load
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.
8. On the "thankyou.html" page, you will display the form information entered by the user for all "required" form fields (first name, last name, email, mobile number, business name, and current date timestamp from the hidden field). Style and display the information as you practiced when you completed the "Advanced Forms" learning activity.

Testing

1. Continue to improve each page of the chamber site project that you have worked on so far in the course by fixing development standard issues.
2. Make sure all the links are working between the existing pages.
3. Continuously check your work by rendering locally in your browser using the Live Server tool in VS Code.
4. Work to meet the Development Standards for the course.
5. Use the browser's DevTools to check for JavaScript runtime errors in the console or click the red, error icon in the upper right corner of DevTools.
6. Use DevTools CSS Overview to check your color contrast.
7. Generate a DevTools Lighthouse report in the Performance, Accessibility, Best Practices, and SEO categories for both the mobile and Desktop views.

Audit and Submission

1. Commit your local repository and push or upload your work to your GitHub Pages enabled wdd231 repository on GitHub.
2. Use this ☑️ audit tool to check some your page against the standards and some requirements.
3. Share your URL to your group's channel and review your group member's submissions.
4. Return to I-Learn and submit your the correct GitHub Pages enabled URL.

   https://your-github-username.github.io/wdd231/chamber/join.html