Submitted 7 months ago

Contact Form Validation With ReactJS, and TailwindCSS

react, tailwind-css, vite

Kareem Ayman•270

@kareemayman

A solution to the Contact form challenge

Preview Code

Solution retrospective

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

It was my first time using Tailwind, ReactJS, React-Hook-Form

Despite The project being very simple, It took my few days to finish, It was a good learning experience, I had fun applying What I've learned recently.

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

Problem 1: After Submitting the data, I need to press on consent checkbox 3 times to toggle it again

Problem 2: Pressing tab doesn't focus on queries section

Any feedback would be appreciated.

Code

Please log in to post a comment

Community feedback

markus•2,720

@markuslewin

Posted 7 months ago

Hi!

I think your consent checkbox counts as a controlled component, since you rely on the value to render the component. This means you have to provide defaultValues for it to reset properly:

export function Form() {
  const { watch, reset } = useForm({
    defaultValues: {
      consent: false,
    },
  });
  return <></>;
}

Pressing tab does focus the queries section, but it doesn't check the radio buttons. That's how native radio buttons work, so I actually don't think that's a bug. You could add some focus styles for the radio buttons to make it clearer what's happening:

export function Query({ enquiry, value }) {
  return (
    <label
      className={`
        has-[:focus-visible]:outline has-[:focus-visible]:outline-offset-2
        ${
          enquiry === value
            ? "bg-green-100 border-green-700 before:bg-green-600"
            : ""
        }`}
    >
      <input type="radio" />
    </label>
  );
}

Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord