El objeto styling
Las catorce propiedades del objeto styling que aplica el formulario insertado, con sus valores por defecto, y los textos que van en la raíz del formulario.
Actualizado el . 4 min de lectura
Incluido en los planes Profesional y Avanzado. Ver precios
styling es el objeto que guarda el aspecto de un formulario de captación: colores, tipografía, medidas y si se ven el título y la descripción. Lo envías al crear o editar el formulario por la API de formularios, y el panel lo rellena desde la pestaña «Estilo» del constructor. La guía de uso es Personalización y estilos.
El formulario insertado aplica exactamente las catorce propiedades de esta página. Cualquier otra clave dentro de styling se guarda, pero no se valida ni tiene ningún efecto: si un ajuste no se ve en tu web, comprueba primero que su nombre está aquí.
Propiedades
- primaryColorstringPor defecto:
#3b82f6 - Botón de envío, borde del campo activo, enlaces del consentimiento y botón flotante.
- backgroundColorstringPor defecto:
#ffffff - Fondo del formulario.
- textColorstringPor defecto:
#1f2937 - Etiquetas, valores y títulos.
- borderColorstringPor defecto:
#e5e7eb - Borde de los campos y de los separadores.
- buttonTextColorstringPor defecto:
#ffffff - Texto del botón de envío e icono del botón flotante.
- fontFamilystring
- Familia de Google Fonts ('Inter', 'Roboto'...). Se carga a través de UTILIA OS, nunca desde Google en el navegador del visitante. Sin ella, hereda la de tu página.
- fontSizenumberPor defecto:
14 - Tamaño base del texto en píxeles; títulos y textos de apoyo se calculan a partir de él.
- borderRadiusnumberPor defecto:
8 - Radio de los campos en píxeles. La tarjeta del formulario usa este valor más 4.
- borderWidthnumberPor defecto:
1 - Grosor del borde de los campos en píxeles.
- buttonBorderRadiusnumberPor defecto:
6 - Radio del botón de envío en píxeles.
- maxWidthnumberPor defecto:
480 - Ancho máximo en píxeles. No se aplica a la barra fija.
- paddingnumberPor defecto:
24 - Espaciado interior en píxeles.
- showTitlebooleanPor defecto:
true - Muestra el nombre del formulario (name) en la cabecera.
- showDescriptionbooleanPor defecto:
true - Muestra su descripción (description) bajo el nombre.
Lo que no se puede cambiar: el fondo oscuro detrás de la ventana emergente (negro al 40 %) y el botón flotante, que es redondo, lleva un icono de sobre y toma su esquina de widgetPosition, no de styling. Cuida el contraste entre textColor y backgroundColor: para una lectura cómoda, al menos 4,5 a 1.
Textos: en la raíz, no en styling
Los textos del formulario son propiedades de la raíz, al mismo nivel que styling:
- namestringobligatorio
- Nombre del formulario; es el título de la cabecera.
- descriptionstring
- Descripción bajo el título.
- submitButtonTextstringPor defecto:
Enviar - Botón de envío. Hasta 100 caracteres.
- successTitlestringPor defecto:
Gracias - Título tras un envío correcto. Hasta 200 caracteres.
- successMessagestring
- Mensaje tras un envío correcto. Por defecto, «Hemos recibido tu información correctamente.»
- privacyTextstring
- Si lo pones, el formulario añade una casilla obligatoria con este texto.
- privacyUrlstring
- Si es una dirección completa (https://...), la casilla de privacyText lleva el enlace «Ver privacidad». Hasta 500 caracteres.
- showBrandingbooleanPor defecto:
true - Muestra «Powered by UTILIA OS» al pie.
Ejemplo
{
"styling": {
"primaryColor": "#2563EB",
"backgroundColor": "#FFFFFF",
"textColor": "#111827",
"borderColor": "#E5E7EB",
"buttonTextColor": "#FFFFFF",
"fontFamily": "Inter",
"fontSize": 14,
"borderRadius": 8,
"borderWidth": 1,
"buttonBorderRadius": 6,
"maxWidth": 480,
"padding": 24,
"showTitle": true,
"showDescription": true
},
"submitButtonText": "Enviar solicitud",
"successTitle": "Solicitud recibida",
"successMessage": "Te escribimos en menos de un día laborable.",
"showBranding": false
}Un cambio de estilo puede tardar hasta 5 minutos en verse en tu web, porque la configuración pública del formulario se guarda ese tiempo.
Siguiente paso
Con los campos y el estilo listos, publica el formulario e insértalo en tu web.
Ponlo en práctica
Lo encontrarás en Formularios de captación. Para abrirlo, entra con tu cuenta de UTILIA OS.