Actividad 11: Fundamentos de los formularios. Campos de formulario

Descripción de la actividad
Parte 1.

• Desarrolla un archivo donde se despliegue un formulario con los campos de formulario que hemos visto en el material 17. HTML. Formularios.
• Buscaremos un script php para que recoja los datos del formulario y los envíe al servidor remoto. Este los enviará a la dirección especificada mediante SMTP (protocolo simple de envio de correo) 
• Publica el archivo en el servidor remoto.

Parte 2. Maqueta una página con el acabado del archivo adjunto pag_newsletter.png en WordPress

• Usaremos el plugin WPforms o Contact form 7.

Requerimientos

• Lo desarrollaremos con Visual Code. Se pueden utilizar herramientas como Da
  Button Factory para generar botones o elementos de diseño con CSS

Información y finalidad del formulario

La finalidad del formulario es recoger datos por las preferencias de los usuarios sobre un nuevo newsletter de nuestra galería de arte.
Información a pedir a los usuarios:

• Los datos personales (nombre, apellidos, dirección, email, telf, sexo,
  edad)
• Posibilidad de insertar comentarios y sugerencias
• ¿Qué tipo de  información te gustaría recibir?
  Novedades sobre libros ilustrados
  Información sobre exposiciones
  Nuevas tendencias
  Subastas sobre arte
  Artistas emergentes
  Certámenes artísticos
  Todos
• Indicar, en una lista, con qué periodicidad querrías recibir esta información:

        Semanal
        Quincenal
        Mensual
        Trimestral
        Anual

• Preguntar
  sobre lo máximo que se gastarían en El Magazine que recibirían digitalmente (escoger una, y sólo una de estas opciones)

        5€
        10€
        15€
        18€
        0€

• Acceptar la política de privacidad de la empresa

UPDATE!!
Mejoremos la usabilidad para este formulario modificando su presentación. Opciones:

• Dentro de un modal box
• Mediante un accordion, sección a sección
• Mediante un popup
• Usando un flip box

2. Aplica las reglas de estilo que consideres necesarias para que tenga una legibilidad lo más óptima posible.

• Jerarquía tipográfica (font-size, font-weight, text-align, color, font-style)
• Armonía de colores (color, background-color)
• Espacios (margin y padding)
• Separadores (border, background-image)
• Iconos y media (::after, ::before)