Submitted 4 months ago

Form-UX

Junior Duque•140

@juniorjavierduquevalera

Preview site View code

This is a solution for...Contact form

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

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

Estoy más orgulloso de haber implementado un formulario de contacto completamente funcional con validación en tiempo real, mensajes de éxito y error, y un diseño accesible y atractivo. Este proyecto me permitió profundizar en el manejo de formularios en React, mejorar mis habilidades en Tailwind CSS y asegurarme de que la experiencia del usuario sea fluida y sin inconvenientes.

Lo que haría diferente la próxima vez sería optimizar la gestión del estado y la validación de los formularios. Me gustaría explorar el uso de librerías como Formik o React Hook Form, que podrían simplificar el manejo de formularios complejos y mejorar aún más la claridad y mantenibilidad del código.

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

Lo más complicado fue personalizar el CSS de los campos de entrada del formulario. Para superar esto, utilicé Tailwind CSS, aplicando clases específicas para manejar estados de enfoque y errores. Esto aseguró consistencia y mejoró la usabilidad y estética del formulario.

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

Me gustaría usar server actions como una mejora para mi proyecto. Invito a que me compartan sugerencias sobre cómo implementar esta funcionalidad para manejar la lógica de envío del formulario en el servidor, mejorando la seguridad y eficiencia. Cualquier consejo sobre mejores prácticas y ejemplos específicos sería muy útil.

Community feedback

solvman•1,650

@solvmanPosted 4 months ago

Good job completing the project!

I've noticed that your radio buttons need to be styled. Using Tailwind CSS could be tricky for styling form elements. There is an official Tailwind CSS plugin to style forms @tailwindcss/forms. After installing this plugin, you could add styles to form elements to your global.css file and apply it globally, overwriting the base layer as so:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  [type="checkbox"],
  [type="radio"] {
    @apply h-5 w-5 border-2 border-secondary-500/50 text-primary-600 focus:shadow-none focus:outline-none focus:ring-transparent;
  }
  [type="radio"] {
    @apply text-white checked:bg-radio;
  }
  [type="checkbox"] {
    @apply text-white checked:bg-checkbox;
  }
}

You might have noticed that SVG files are provided for the radio buttons and checkboxes. The styles above checked:bg-radio and checked:bg-checkbox use a custom background, which should be defined in your tailwind.config.ts file like so:

...  

theme: {
    extend: {
      backgroundImage: {
        radio: "url(/images/icon-radio-selected.svg)",
        checkbox: "url(/images/icon-checkbox-check.svg)",
      },

...

You might also want to style your other form elements through global.css; that way, you do not have to repeat yourself on every input element. There is a great video that goes over the details of how to use `@tailwindcss/forms Styling Forms with Tailwind CSS

I hope you find my comments useful!

Please log in to post a comment

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