For this Challenge, the form is designed to imitate a user's experience of completing a paper form, the form completion top to bottom experience.

What it does

This form is designed and created to be interactive as certain sections are made available based on the user's response or answer's to form-questions. This means that certain sections of the form may be expanded and/or hidden based on the user's answer to particular questions.

How I built it

This form was created with the following web languages; HTML, Javascript/JQuery, PHP, CSS along with use of the PHPExcel library.

Because this is a User-Experience challenge, HTML, CSS, and Javascipt/JQuery were used to build the form. HTML is used to build the form structure or skeleton. The use of Javascript/JQuery allows for the seamlessly handling of any crossbrowser issues. Javascript/JQuery also add the benefit of "doing the heavy lifting" with regard to processing user-inputs and form interactivity. CSS is used in the design of the form's layout, look-and-feel, font, styling, and color choices. PHP is used to process the form and load the submitted form-values into the database. The PHPExcel library is used to generate Excel spreadsheets populated with form-data from the database. The PHPExcel library also allows for the spreadsheets to be customized (e.g. color, column width, column color, font styles, etc.).

The approach used in this challenge was to have the processing completed on the front-end or in the browser. For example, on the form depending on the child's status, the form prompts the user with the option to enter more children. Later there is also a prompt to enter more adults. Also, the processing for the "number of household individuals" is executed in the front-end, before the form is submitted. Additionally, "tool-tips" are used throughout the form in areas where user's may have questions. "Tool-tips" may be highlighted to display F.A.Q. answers in pop-up windows. The use of "tool-tips" helps with saving screen real estate. Another "hidden" form feature is the generation of a "File number" for each form. This is done using the Javascript Date() object as a number, down to the millisecond. The Date() object also auto-populates the date-field on the form.

Challenges I ran into

The biggest challenge was getting an understanding of the child/student circumstances for which the user would skip sections of the form. There needs to be a bit more clarity for these situations. The fear is that too many circumstances would or will result in one too many "if-then" statements.

Accomplishments that I'm proud of

I'm proud that I was able to complete this challenge and meet the requirements by creating a web-application that is cross-browser compatible and allows for form processing on the front-end, eliminating any potential strain on a web-server.

This form was created using existing web-technologies that take advantage of the average web-browser and allow for the user to flow through the form with ease, in addition to an Admin page that allows for the data to be displayed in HTML, MS-Word .doc format, and MS-Excel .xls format.

What I learned

I learned that there is a need for web-forms to be more interactive and to mimic the user-experience of traditional paper forms. From my experience, most web-forms are top-down, but this challenge makes me think more about complex forms.

What's next for USDA Lunch UX Form

For this particular form, I would be interested in USDA's ideas on color schemes and expanding the form to be responsive as more and more individuals are using cell phones and tablet devices.

The link to the form is: The link to the form's admin page is:

Built With

Share this project: