Ir al contenido principal

Personalización de un formulario en línea

Actualizado hace más de un mes

Form by Gigz te permite añadir un formulario de registro a tu sitio web para que tus visitantes puedan suscribirse a tu boletín informativo. Para activarlo, sigue los pasos a continuación.

Guía del usuario

Antes de implementar Form en tu sitio web, comparte tu URL con nuestro equipo.

Copia el código de integración disponible en la aplicación Gigz; para ello, accede a la página "Conectar" en la sección "Formulario". Luego, haz clic en el botón "Copiar el script".

Agrega el código al archivo HTML de la página correspondiente.

Personalización

Para personalizar la apariencia de tu formulario, puedes aplicar propiedades de estilo a los siguientes elementos. Los valores deben ir entre comillas.

Contenedor (Formulario):

form-flex-direction: Cambia la orientación del contenido ("fila" o "columna")

form-gap: Establece el espaciado entre campos (p. ej., "8px")

form-background-color: Cambia el color de fondo del formulario (p. ej., "azul")

form-border-style: Cambia el estilo del borde (p. ej., "punteado")

form-border-width: Cambia el grosor del borde (p. ej., "2px")

form-border-color: Cambia el color del borde (p. ej., "verde")

form-border-radius: Redondea las esquinas del formulario (p. ej., "8px")

form-padding: Establece el espaciado interno del formulario (p. ej., "12px")

form-max-width: Establece el ancho máximo del formulario (p. ej., "400px")

Campos y menú desplegable:

input-border-style: Establece el estilo del borde (p. ej., "sólido", "discontinuo", "punteado")

input-border-color: Cambia el color del borde (p. ej., "#000", "rojo")

input-border-width: Establece el grosor del borde (p. ej., "1px", "2px")

input-border-radius: Crea esquinas redondeadas en los campos (p. ej., "5px", "24px")

input-font-size: Controla el tamaño de la fuente (p. ej., "16px", "24px")

input-padding: Establece el espaciado interno del campo (p. ej., "8px", "12px")

input-background-color: Cambia el color de fondo del campo (p. ej., "blanco", "#f0f0f0")

Button:

button-background-color: cambia el color de fondo del botón (p. ej., "azul", "#0032FA")

button-color: cambia el color del texto del botón (p. ej., "blanco", "#FFF")

button-border: establece el estilo y el color del borde del botón (p. ej., "ninguno", "1px rojo sólido")

button-border-radius: crea esquinas redondeadas en el botón (p. ej., "6px", "12px")

button-padding: establece el espaciado interior del botón (p. ej., "10px 12px", "8px 16px")

button-font-size: controla el tamaño de la fuente del texto del botón (p. ej., "14px", "18px")

button-width: establece el ancho del botón (p. ej., "100%", "200px")

button-height: establece la altura del botón (p. ej., "auto", "40px")

¿Ha quedado contestada tu pregunta?