Responsive Contact Form using Next.js, Zod and Tailwind CSS

What are you most proud of, and what would you do differently next time?

Creating a functional model that accurately reflects the contact form can be tricky at times. In addition, the various states of input fields (active, focused, etc.) present some interesting challenges when designing with Tailwind CSS.

What challenges did you encounter, and how did you overcome them?

I had trouble figuring out how to allow the checkbox to be set to both true and false. However, when I saw that Zod provides the 'refine()' method specifically for this purpose, it all became clear. This allowed me to accept both values, but ensured that the checkbox had to be checked when the form was submitted.

What specific areas of your project would you like help with?

General advice and tips are always welcome!