RegisterForm Project

Descripción

El RegisterForm Project es una página web diseñada para ofrecer un formulario de registro interactivo, con varias validaciones en tiempo real, efectos visuales y una interfaz moderna. El proyecto utiliza tecnologías web actuales como HTML5, CSS3, Bootstrap, JavaScript y JQuery para proporcionar una experiencia de usuario fluida y atractiva.

Este formulario de contacto es ideal para ser integrado en proyectos donde se requiera una forma eficiente de capturar datos de los usuarios, como registros, suscripciones o cualquier otro tipo de interacción.

Características:

• Formulario de contacto completo: Incluye los campos esenciales como correo electrónico, contraseña, nombre, apellido, DNI, fecha de nacimiento y sexo.
• Validaciones en tiempo real: Asegura que los usuarios ingresen la información correctamente antes de enviar el formulario, minimizando errores y mejorando la calidad de los datos.
• Interactividad y efectos visuales: El fondo de la página es dinámico, gracias a Particles.js, y las interacciones de usuario se mejoran con alertas visuales mediante SweetAlert2.
• Interfaz responsive: La página se adapta perfectamente a cualquier tamaño de pantalla, ofreciendo una experiencia consistente en dispositivos móviles, tabletas y escritorios.

Tecnologías utilizadas

• HTML5: Se utiliza para estructurar el contenido de la página y los elementos del formulario.
• CSS3: Estilos visuales que aseguran una presentación moderna y adaptativa.
• Bootstrap: Framework que facilita la creación de una interfaz responsive y profesional, optimizando el diseño en diferentes dispositivos.
• JavaScript: Para las validaciones y funciones interactivas del formulario, mejorando la experiencia del usuario.
• JQuery: Simplifica la manipulación del DOM y la gestión de eventos en el formulario.
• FontAwesome: Librería de iconos que mejora la estética y funcionalidad del formulario y la página en general.
• Particles.js: Efectos visuales en el fondo con partículas animadas, agregando dinamismo a la página.
• SweetAlert2: Notificaciones emergentes para proporcionar mensajes visuales claros y atractivos, como confirmaciones o alertas de error.

Instalación

Paso 1: Clonar el repositorio

Si deseas trabajar localmente con este proyecto, primero clona el repositorio usando Git:

git clone https://github.com/MiguelSJimenezV/ContactFormProject.git

Paso 2: Acceder al directorio del proyecto

Una vez que el repositorio se haya clonado en tu máquina local, ingresa al directorio del proyecto:

cd ContactForm-Project

Paso 3: Abre el archivo en tu navegador

Para ver el formulario de contacto en acción, simplemente abre el archivo index.html en tu navegador web favorito.

# En la terminal puedes usar un servidor local, como Live Server en VSCode, o abrir el archivo directamente:
open index.html

Estructura de Archivos

La estructura de archivos del proyecto es la siguiente:

ContactForm-Project/
│
├── index.html
├── assets/
│   ├── css/
│   │   └── form.css
│   ├── js/
│   │   ├── fondo.js
│   │   ├── formValid.js
│   │   └── jquery.min.js
├── README.md
└── LICENSE

Contribución

Si deseas contribuir al proyecto:

1. Realiza un fork del repositorio.
2. Crea una rama nueva para tu funcionalidad o corrección de errores:

   git checkout -b mi-nueva-funcionalidad

3. Realiza tus cambios y haz commit de ellos:

   git commit -m "Agrega nueva funcionalidad"

4. Envía tus cambios mediante un pull request.

Autor

Miguel Jimenez
DWN2AP | Turno Noche | Año 2023