WDD 230 - Web Frontend Development I

08: 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.
      • The applicant's first name, text type, required, name, and id.
      • The applicant's last name, text type, required, name, and id.
      • The applicant's title or position within their organization, text type, name, id, required, and pattern to only accept alpha characters, hyphens, and spaces with a minimum of seven characters using a regular expression.
      • An contact 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.
      • An input element of type (hidden) with a name and id. This field contains the current date/time in millisecond format Date.now(), which records the date and time that the form was loaded by the user. You must use JavaScript to set the value of this field.

        🚑 Hint: What property do you need to use to set the value of that hidden input element?

      • A form submission button with type submit that is properly labeled in the content area of the button.

        An <input type="submit"> could be use here. In terms of functionality, they both trigger the form submission when clicked. The choice between them often comes down to personal preference, styling requirements, and whether you need to include additional content within the button. If you need more flexibility and consistent styling, the <button> element might be a better choice.

  5. Membership level benefits should be displayed to the side of the form in larger views. For example, a two column layout may be appropriate. Try to keep things uniform and visually appealing.
    • 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.
    🤖 This might be a good place to use an AI tool to help you generate some membership level descriptions or features for the content.
  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 the design your own.

Testing & Submission

  1. Commit and push your work to your wdd230 GitHub Pages enabled repository.
  2. Test the page using the course development standards including ensuring HTML and CSS validation and responsiveness in all viewport sizes.
  3. Test your page with this audit tool.
  4. Return to I-learn to submit your home page URL.