Personalizar el código de incrustación del formulario de opt-in
Cuando incrusta un formulario de opt-in de Flexmail en su sitio web, este incluye un estilo predeterminado. Si ese estilo no coincide con el diseño de su sitio web, puede anularlo usando CSS. Este artículo explica cómo funciona el código de incrustación y cómo aplicar estilos personalizados de forma segura.
Cómo funciona el código de incrustación
Cuando genera el código de incrustación para un formulario de opt-in en Flexmail, recibirá tres partes:
- Un fragmento de JavaScript que pasa sus estilos personalizados al formulario una vez que se ha cargado.
- Un iframe que carga el formulario desde https://return.flexmail.eu.
- Un bloque
**<style id="flx-styles">**vacío donde puede añadir su propio CSS.
Pega las tres partes en el HTML de su sitio web donde desea que aparezca el formulario. Cuando se carga la página, el iframe obtiene el formulario y el JavaScript añade el contenido de su bloque de estilos al formulario para que se aplique su estilo.
Para obtener el código de incrustación:
- Vaya a Formularios > Formularios de opt-in.
- Abra el formulario que desea incrustar.
- Haga clic en el botón Incrustar su formulario.
- Copie el código de incrustación de la ventana emergente.
Consejo de soporte Copie el código de incrustación de nuevo cada vez que realice cambios estructurales en el formulario en Flexmail (como añadir o eliminar campos). Su estilo puede permanecer igual siempre que mantenga los mismos selectores.
Añadir CSS personalizado a su sitio web
Los estilos personalizados van dentro del bloque <style id="flx-styles">. El bloque está vacío de forma predeterminada y contiene marcadores de posición comentados para los selectores más comunes:
#flxml_frm > table > tbody > tr > td:nth-child(1)— las etiquetas de campo.#flxml_frm input[type="text"]— los campos de texto.#flxml_frm button[type="submit"]— el botón de envío.
Puede ampliar esto con selectores para otros elementos, como #flxml_frm select para listas desplegables, #flxml_frm input[type="checkbox"] para casillas de verificación, o #flxml_frm input[type="number"] para campos numéricos. Siempre anteponga el prefijo #flxml_frm a sus selectores para que sus estilos solo se apliquen al formulario.
Este es un pequeño ejemplo que hace que el formulario sea transparente, responsivo en móvil y da al botón de envío un aspecto personalizado:
El indicador !important a veces es necesario porque los estilos predeterminados del formulario usan valores de ancho en línea. A partir de aquí puede ampliar el resto: ajuste fuentes, colores, estilo de etiquetas, etc. añadiendo más reglas con el mismo prefijo #flxml_frm.
Atención El formulario se carga dentro de un iframe, lo que significa que el CSS de su sitio web principal no se aplica automáticamente a él. Por eso los estilos deben pasarse a través del bloque <style id="flx-styles">: el fragmento de JavaScript se encarga de esa parte por usted.
Consejo de soporte Use las herramientas de desarrollo de su navegador (clic derecho > Inspeccionar) para identificar los nombres de clase exactos en su formulario en vivo antes de escribir su CSS. Los nombres de clase pueden variar ligeramente dependiendo de la configuración de su formulario y la versión de Flexmail.
Qué puede cambiar
Puede aplicar estilos de forma segura a cualquier propiedad visual de los elementos del formulario: colores, fuentes, espaciado, bordes, radio de borde, ancho y fondo.
Qué no debe cambiar
No modifique ni elimine lo siguiente del código de incrustación:
- La URL src del iframe. Esto carga el formulario desde los servidores de Flexmail. Cambiarla romperá el formulario.
- El id del iframe (iframe_flxml_form) y el id del bloque