Antes de recurrir a CSS, revisa si lo que quieres ya existe en Estilos y opciones. Por ejemplo, el espacio sobre el formulario se ajusta con el margen superior en Estilos → Diseño. Deja el CSS para los ajustes que no ofrece el editor.
Dónde agregar el CSS
Opción 1: dentro del formulario (recomendada)
Es la única forma de cambiar el aspecto de los campos y los botones del formulario.1
Abre el editor
Ve a Sitios → Formularios (o Encuestas o Cuestionarios) y abre el que quieres personalizar.
2
Ve a CSS personalizado
Haz clic en Estilos y opciones, abre la pestaña Avanzado y busca la sección CSS personalizado.
3
Pega tu código
Pega tus reglas CSS.
4
Guarda y publica
Haz clic en Guardar y después en Publicar.
Opción 2: en la página del embudo o sitio web
Si el formulario está dentro de una página de Chateea, puedes ir a Configuración → CSS personalizado de esa página o embudo. Desde ahí solo das estilo al contenedor que rodea el formulario (márgenes, relleno, color de fondo).Opción 3: en un sitio externo
En sitios como WordPress también puedes dar estilo al contenedor del formulario, pero no a los campos de dentro.Ejemplos básicos
Campos de entrada
Botón de envío
Etiquetas
Ajustes para celulares
Botones de navegación, mensajes de error y barra de progreso
Los botones Anterior, Siguiente y Enviar del pie de las encuestas, los mensajes de error y la barra de progreso usan sus propias clases. Para encontrarlas:- Abre la vista previa del formulario o la encuesta en el navegador.
- Haz clic derecho sobre el elemento y elige Inspeccionar.
- Copia el nombre de la clase y úsalo en tu regla CSS.
!important, pero úsalo solo cuando sea necesario.
Plantilla lista para copiar
Pega esto en el CSS personalizado de tu formulario y ajusta los colores:Si el CSS no funciona
- Comprueba que lo pegaste en el CSS personalizado del formulario, no en el de la página.
- Haz clic en Publicar y recarga la página, o ábrela en una ventana de incógnito para evitar la caché.
- Si el formulario está insertado, recuerda que el CSS de la página no afecta su interior.
- Recuerda que el CSS personalizado tiene prioridad sobre los estilos y los temas: si cambias de tema y algo no se ve como esperas, revisa tu CSS.
Buenas prácticas
- Guarda y publica siempre después de editar.
- Usa Inspeccionar para encontrar los nombres de las clases.
- Evita abusar de
!important. - Revisa el resultado en escritorio y en celular.
Artículos relacionados
Barra lateral del editor de formularios
Estilos, temas y opciones avanzadas sin código.
Color primario en formularios
Aplica tu color de marca a las interacciones.