Processing Forms

February 1, 2024

Most coding bootcamps feature a project to Process Forms. In this case I have completed a Interactive Checkout Form example with validation. This is the React version with Tailwind CSS and deployed to Next.js. I have made use of the new React hooks useFormState and useFormStatus. The jquery version can be found on in my old portfolio (Static React & Express App Project) and code on Github.
Short Form
This form features validation. Try it out!
Personal Information
The form requires name and email (at minimum) and email must include @.
Name
Email address
Success? No
Please enter a name
Name:
Email:
Long Form
This form features validation. Try it out!
Personal Information
The form requires name and email (at minimum) and email must include @.
Name
Email address
Job Role
Tshirt Info
Use a permanent address where you can receive mail.
Size
Design
Register for Activities
More validation.
Select activity
Main Conference
Tuesday & Wednesday, $200
JavaScript Frameworks Workshop
Tuesday 9am-12pm, $100
JavaScript Libraries Workshop
Tuesday 1pm-4pm, $100
Express Workshop
Tuesday 9am-12pm, $100
Node.js Workshop
Tuesday 1pm-4pm, $100
Build tools Workshop
Wednesday 9am-12pm, $100
npm Workshop
Wednesday 1pm-4pm, $100
Payment Info
Use a permanent address where you can receive mail.
I'm going to pay with
Card number
Name on card
Expiration date (MM/YY)
CVC
Success? No
Please enter a name
Recorded input:
Name:
Email:
Tshirt:
Activities:
Payment method:
Card Number:
Name On Card:
Expiration Date:
CVC:

Short Form

Personal Information

Long Form

Personal Information

Tshirt Info

Register for Activities

Payment Info