Los formularios de propform ya tienen un aspecto impecable tal y como vienen de fábrica, pero si los integras en tu sitio web o los utilizas en tu propio dominio, querrás adaptarlos a la identidad corporativa. Estas son las opciones disponibles.
Todos los ajustes de diseño se pueden configurar en dos niveles:
| Nivel | Dónde | Cuándo |
|---|---|---|
| Para toda la cuenta | Ajustes de la cuenta → Estilo predeterminado del formulario | Valores predeterminados, se aplican a todos los formularios en los que está activada la opción «Usar estilo predeterminado» |
| Por formulario | Ajustes del formulario → Estilo | Anula el valor de la cuenta para este formulario en concreto |
| > 💡 Recomendación: configura el logotipo, los colores y la fuente una sola vez en la configuración de la cuenta. Solo en casos especiales (marca compartida, promociones especiales) se pueden modificar por formulario. |
Aparece encima de tus formularios.
Pequeño logotipo en la pestaña del navegador.
Tres opciones para alojar las imágenes del logotipo y el favicon:
https://meinmaklerbüro.de/wp-content/uploads/logo.png)mcms.onoffice.de/...)> 💡 Consejo para el logotipo del correo electrónico: Si tu logotipo ya está incrustado en una plantilla de correo de onOffice, puedes copiar allí la dirección de la imagen y utilizarla en propform — normalmente también como PNG transparente.
Introducción como código hexadecimal (p. ej., #FF6B35 para naranja) o mediante el selector de colores.
> 💡 Consejo de identidad corporativa: Elige un color de acento idéntico al color principal de tu sitio web; así, el formulario incrustado se integrará perfectamente en la página.
La tipografía se selecciona en la configuración de la cuenta/del formulario a partir de una selección de fuentes de Google alojadas.
> 🔒 Alojamos todas las fuentes de Google en nuestros servidores; al abrir tu formulario, no se establece ninguna conexión con Google. De este modo, evitas los problemas relacionados con el RGPD derivados de las advertencias sobre las fuentes de Google.
Si la fuente de tu identidad corporativa no está en la selección:
En lugar de un simple color de fondo, puedes añadir una imagen como fondo; por ejemplo, una foto evocadora de estilo de vida para un formulario de captación de clientes.
Configuración: Ajustes de la cuenta/del formulario → Estilo → Imagen de fondo → Introducir la URL de la imagen.
En la configuración del formulario → Estilo → Tipo de diseño, puedes elegir el aspecto de los botones y los campos de entrada:
| Tipo de diseño | Aspecto | Ideal para |
|---|---|---|
Angular (rounded-0) |
esquinas marcadas de 90° | sitios web técnicos / clásicos |
Redondeado (rounded) |
ligero redondeo | sitios web modernos (estándar) |
Redondeado (rounded-pill) |
completamente redondeado | sitios web amigables / divertidos |
> 💡 Elige el tipo de diseño que mejor se adapte al estilo de tu sitio web principal, para que los formularios incrustados parezcan una parte natural del mismo.
propform ofrece cuatro variantes de incrustación diferentes (incrustación con JavaScript, componente web, iFrame con altura automática, iFrame simple), además de ajustes adicionales como el destino de la página de agradecimiento, la versión del script y el comportamiento del consentimiento de cookies.
📖 Guía completa con las cuatro opciones y las opciones adicionales: Configuración del formulario → Incrustación en iFrame
<script> externas, pero deja pasar el iFrameform-id debe ser el slug del sistema, no la ruta de la URL personalizadaLos formularios propform son automáticamente adaptativos: los campos, los botones y el diseño se ajustan al ancho de la pantalla.
<head>: <meta name="viewport" content="width=device-width, initial-scale=1.0"> (estándar, pero a veces se olvida en plantillas muy antiguas)100% (no en px)min-widthTrampa del iPhone: con «Hacer foto» solo se puede subir una imagen. Para la carga de varias fotos hay que seleccionar «Biblioteca»; véase Fallo en la carga de archivos → Varias fotos en iPhone.
## CSS personalizado (en la hoja de ruta)
Actualmente no es posible utilizar CSS personalizado por formulario; el diseño se limita a las opciones anteriores.
En la hoja de ruta: un campo de entrada por formulario para CSS y clases CSS personalizados, con los que podrás seguir personalizando el estilo de los elementos existentes (p. ej., efectos al pasar el cursor por los botones, iconos propios en las etiquetas, espaciado personalizado). Si te gustaría disponer de esta función y tienes un caso de uso concreto, escríbenos brevemente; los casos de uso nos ayudan a establecer prioridades.
Mientras tanto: si necesitas CSS personalizado de forma imperativa (por ejemplo, debido a directrices de marca muy específicas), puedes resolverlo alrededor del iFrame en el CSS de tu sitio web — por ejemplo, un marco de color, sombras o un contenedor con relleno.