Aparte del diseñador de formularios integrado, también puede personalizar sus formularios usando CSS en el Creador de Formularios. Esta guía contiene algunos ejemplos de códigos CSS que puede probar o utilizar en sus formularios. Para aplicar CSS a su formulario, consulte cómo insertar Códigos CSS personalizados.
Añadir un fondo de imagen a la página
El siguiente código CSS permite añadir un fondo personalizado a su formulario.
![Cómo personalizar su formulario utilizando códigos CSS Image-1](https://jotform.claystructures.co/blog/wp-content/uploads/2023/11/Monosnap-Formulario-de-Contacto-Jotform-Form-Builder-2023-11-17-09-21-12.png)
.supernova {
background-image: url('{image_url}');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}
body {
background: none;
}
Reemplace la {image_url} con su URL de imagen de fondo.
Nota
Utilice una dirección de HTTPS segura para la URL de la imagen para evitar el bloqueo de contenido mixto.
Poner el fondo de la página transparente
Útil en formularios integrados, puede utilizar el siguiente código si necesita que su formulario utilice el fondo de su página web.
![Cómo personalizar su formulario utilizando códigos CSS Image-2](https://jotform.claystructures.co/blog/wp-content/uploads/2023/11/Monosnap-Formulario-de-Contacto-Jotform-Form-Builder-2023-11-17-09-27-28.png)
.supernova, body {
background: none;
}
Hacer transparente el fondo del formulario
El siguiente código elimina el fondo y la sombra de su formulario, haciéndolo plano y transparente.
![Cómo personalizar su formulario utilizando códigos CSS Image-3](https://jotform.claystructures.co/blog/wp-content/uploads/2023/11/Monosnap-Formulario-de-Contacto-Jotform-Form-Builder-2023-11-17-09-28-46.png)
.form-all {
background: none !important;
box-shadow: none;
}
Eliminar el espacio encima del formulario
Este paso es útil para formularios que están insertados, el siguiente código elimina el espacio adicional encima de su formulario.
![Cómo personalizar su formulario utilizando códigos CSS Image-4](https://jotform.claystructures.co/blog/wp-content/uploads/2023/11/Monosnap-Monosnap-Formulario-de-Contacto-Jotform-Form-Builder-2023-11-17-09-28-46.png-2023-11-17-09-46-34.png)
body, .form-all {
margin-top: 0;
}
Cambiar el color de fondo del cabezal
Utilice el siguiente código para modificar el color de fondo del formulario de todos los elementos de la parte superior de vuestro formulario.
![Cómo personalizar su formulario utilizando códigos CSS Image-5](https://jotform.claystructures.co/blog/wp-content/uploads/2023/11/Monosnap-Formulario-de-Contacto-Jotform-Form-Builder-2023-11-17-09-59-44-1.png)
.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}
Consejo Profesional
Para lo relacionado con las propiedades de los colores de todos vuestros elementos de Cabecera y Sub cabecera, puede utilizar el selector de color para generar su valor hexadecimal (e.g., #a1b2c3).
Cambiar el color del Subtítulo
El siguiente código modifica el color del texto de todos los subtítulos del cabezal.
![Cómo personalizar su formulario utilizando códigos CSS Image-6](https://jotform.claystructures.co/blog/wp-content/uploads/2023/11/Monosnap-Formulario-de-Contacto-Jotform-Form-Builder-2023-11-17-10-04-21.png)
.form-subHeader {
color: #00b000 !important;
}
Cambiar todas las sub etiquetas de color
Utilice el siguiente código CSS para cambiar el color de todas las sub etiquetas, en su formulario.
![Cómo personalizar su formulario utilizando códigos CSS Image-7](https://jotform.claystructures.co/blog/wp-content/uploads/2023/11/Monosnap-Formulario-de-Contacto-Jotform-Form-Builder-2023-11-17-10-06-11.png)
.form-sub-label {
color: #ffb21d;
}
Cambiar el color del efecto sobresaltado
Puede utilizar el siguiente código para cambiar el fondo de los campos a rellenar.
![Cómo personalizar su formulario utilizando códigos CSS Image-8](https://jotform.claystructures.co/blog/wp-content/uploads/2023/11/Monosnap-Formulario-de-Contacto-Jotform-Form-Builder-2023-11-17-10-24-44.png)
.form-line-active {
background: #ccffcc;
}
Cambiar el color de la estrella de requerido
Está en rojo por defecto, el código a continuación cambiar el indicador de que el campo se requiere.
![Cómo personalizar su formulario utilizando códigos CSS Image-9](https://jotform.claystructures.co/blog/wp-content/uploads/2023/11/Monosnap-Formulario-de-Contacto-Jotform-Form-Builder-2023-11-17-10-29-30.png)
.form-required {
color: cyan !important;
}
Alinear el formulario a la izquierda
Es útil para formularios que están insertados, puede utilizar el siguiente código para mover el formulario a la izquierda.
![Cómo personalizar su formulario utilizando códigos CSS Image-10](https://jotform.claystructures.co/blog/wp-content/uploads/2023/11/Monosnap-Formulario-de-Contacto-Jotform-Form-Builder-2023-11-17-10-31-09.png)
.form-all {
margin: 0;
}
Si necesita ayuda personalizando el formulario, contacte con el Soporte de Jotform.
Enviar Comentario: