Personalitzar el codi d'incrustació del formulari d'alta

Quan incrusteu un formulari d'alta de Flexmail al vostre lloc web, inclou un estil predeterminat. Si aquest estil no coincideix amb el disseny del vostre lloc web, podeu substituir-lo amb CSS. Aquest article explica com funciona el codi d'incrustació i com aplicar estils personalitzats de manera segura.

Com funciona el codi d'incrustació

Quan genereu el codi d'incrustació per a un formulari d'alta a Flexmail, rebreu tres parts:

• Un fragment de JavaScript que passa els vostres estils personalitzats al formulari un cop s'ha carregat.
• Un iframe que carrega el formulari des de https://return.flexmail.eu.
• Un bloc **<style id="flx-styles">** buit on podeu afegir el vostre propi CSS.

Enganxeu les tres parts al HTML del vostre lloc web on voleu que aparegui el formulari. Quan es carrega la pàgina, l'iframe obté el formulari i el JavaScript afegeix el contingut del vostre bloc d'estils al formulari perquè s'apliqui el vostre estil.

Per obtenir el codi d'incrustació:

1. Aneu a Formularis > Formularis d'alta.
2. Obriu el formulari que voleu incrustar.
3. Feu clic al botó Incrustar el vostre formulari.
4. Copieu el codi d'incrustació de la finestra emergent.

Consell de suport Copieu el codi d'incrustació de nou cada cop que feu canvis estructurals al formulari a Flexmail (com ara afegir o eliminar camps). El vostre estil pot mantenir-se igual sempre que conserveu els mateixos selectors.

Afegir CSS personalitzat al vostre lloc web

Els estils personalitzats van dins del bloc <style id="flx-styles">. El bloc és buit per defecte i conté marcadors de posició comentats per als selectors més habituals:

• #flxml_frm > table > tbody > tr > td:nth-child(1) — les etiquetes de camp.
• #flxml_frm input[type="text"] — els camps d'entrada de text.
• #flxml_frm button[type="submit"] — el botó d'enviament.

Podeu ampliar això amb selectors per a altres elements, com ara #flxml_frm select per a desplegables, #flxml_frm input[type="checkbox"] per a caselles de selecció, o #flxml_frm input[type="number"] per a camps numèrics. Sempre poseu el prefix #flxml_frm als vostres selectors perquè els vostres estils tan sols s'apliquin al formulari.

Aquí teniu un petit exemple que fa el formulari transparent, adaptatiu en mòbil i dóna al botó d'enviament un aspecte personalitzat:

La marca !important de vegades és necessària perquè els estils predeterminats del formulari usen valors d'amplada en línia. A partir d'aquí podeu elaborar la resta: ajusteu les fonts, els colors, l'estil de les etiquetes, etc. afegint més regles amb el mateix prefix #flxml_frm.

Atenció El formulari es carrega dins d'un iframe, la qual cosa significa que el CSS del vostre lloc web principal no s'aplica automàticament. Per això els estils s'han de passar a través del bloc <style id="flx-styles"> — el fragment de JavaScript s'encarrega d'aquesta part.

Consell de suport Feu servir les eines de desenvolupador del navegador (clic dret > Inspeccionar) per identificar els noms de classe exactes del vostre formulari en directe abans d'escriure el vostre CSS. Els noms de classe poden variar lleugerament depenent de la configuració del vostre formulari i la versió de Flexmail.

Què podeu canviar

Podeu aplicar estil de manera segura a qualsevol propietat visual dels elements del formulari: colors, fonts, espaiat, vores, radi de vora, amplada i fons.

Què no heu de canviar

No modifiqueu ni elimineu el següent del codi d'incrustació:

• L'URL src de l'iframe. Carrega el formulari des dels servidors de Flexmail. Canviar-lo trencarà el formulari.
• L'id de l'iframe (iframe_flxml_form) i l'id del bloc