Create template for application form and form details pages

[stmcpeters]

Description

This PR addresses issue #389 that aims to create a user-friendly, responsive form for applicants to apply directly on techtonica.org.

Objective

These changes are important because:

• A custom form allows for a seamless, branded experience that aligns with the rest of the site, making it feel more professional and cohesive.
• A website-integrated form allows better accessibility customization, ensuring that applicants of all abilities can apply smoothly.
• You can design the form to collect exactly the information needed, with better input validation, conditional logic, and interactive elements that Google Forms may not support.

Demo

Screen.Recording.2025-01-31.at.12.17.55.PM.mov

Changes Made

• Creates new route(s) to view for the application form and form details
• Before entering the form, there is some descriptive information about the following headings: The Program, Pre-Req and Form Deadline, Eligibility, etc. (/app-form-details) using placeholder text and/or current text used on Techtonica's website (this will be changed by program staff later).
• Implement all necessary questions and fields.
• Apply basic styling to form and form details pages that follow Techtonica's branding guidelines.
• Ensure fields use appropriate input types (e.g., <input type="email">, <input type="tel">).
• Basic client-side validation is implemented (e.g., required fields, email format)
• Ensure form elements have clear labels for accessibility.

Next Steps

• Reviewers: @derekhouck, @daaimah123 and @ChasVanDav
• Review the changes made in app-form-details.html and app-form.html
• Ensure both pages have all needed information and fields, and all fields have basic client-side validation and use appropriate input types

Additional Notes

• This sub-issue is part of Techtonica Application Form implementation (Implement basic HTML/CSS layout for the application form #389).
• Further refinements, including responsiveness and multi-step functionality, will be handled in separate issues.
• JS scripts for the application form have been added to the bottom app-form.html while still in review stage, rather than being added directly to the project's JS files.
• CSS styling as been added to the bottom of each respective HTML page (app-form-details.html and app-form.html), while the project's issues with the SASS and CSS files are being investigated in #554.

Chances for Improvement/Questions

• There was a note to implement carriage returns in very long tooltips for various questions such as, for the applicant's household's complete net worth. I utilized white-space: pre-wrap; to preserve whitespace and line breaks, but commented this out due to readability issues. Below, the left screenshot displays the tooltips with the carriage returns and the right screenshot does not utilize white-space: pre-wrap;

• Due to the above issue, instead of using tooltips to inform users of the 1-4 scale options, i've labeled each radio button with the corresponding 1-4 ratings. Below is a screenshot of the radio buttons with labels.

[stmcpeters]

this PR is now ready for review 🎉 @derekhouck @ChasVanDav @daaimah123

[ChasVanDav]

Steph, as always your code is clean as a whistle with easy-to-follow naming choices on those routes. Double check my comments on the content and then you shall be g2g!

[derekhouck]

This is an excellent start, but I want this to be followed up by several other PRs addressing things like adding the Javascript to the page instead of an external script, add styles to the page instead of an external SASS file, and adding conditional logic throughout so that you don't have to front-load all the requirements language. I encourage you and anyone else involved with this form project to read through UK's documentation on Structuring forms. In particular, pay attention to their "one thing per page" philosophy. We want to guide potential participants through the process as much as possible and not overwhelm them with text or fields.

[derekhouck]

This is an excellent opportunity to implement some conditional logic and cut down on the walls of eligibility text and form fields. A gender identity question can be used to quickly disqualify anyone whose gender identity does not line up with the eligibility requirements, saving them an immense amount of time on a form they do not need to fill out. If they answer with an eligible value, move them onto the rest of the form. If they answer with a non-eligible value, show them copy similar to this and send them off on their way.

[daaimah123]

Hey @derekhouck fantastic suggestions. We have some issues dependent upon this work (#555, #556, #557, #558, & #559) and I'd love to see this iterated on in another PR. Created #567 to tackle your last comments, feel free to add to the issue as it was a quick spin up.

@stmcpeters I have some incoming style change suggestions...

[daaimah123]

@stmcpeters, @mai-repo is handling many of the style concerns I had, go ahead and merge this in

text requesting review is placeholder text

[stmcpeters]

Changes in this PR have successfully been merged into mvp branch in PR #576