Skip to content

Formularios Pardot: Personalizar casillas de verificación y botones de radio

Estilo Casillas, pardot
Share on facebook
Share on linkedin
Share on twitter
Share on email
Share on whatsapp

Conseguir que los formularios en Pardot no sean aburridos es algo sencillo añadiendo código CSS. Veamos cómo personalizar las casillas de verificación y botones de radio en nuestros formularios de Pardot.

Antes de empezar, recordemos...
¿Cómo agregamos CSS personalizados en nuestros formularios?

Vamos al menú lateral izquierdo: MARKETING / FORMS / LAYOUT TEMPLATES y seleccionamos el diseño para agregar los estilos de formulario.Una vez seleccionado le damos EDIT LAYOUT TEMPLATE, y pegamos el CSS encima del código ya existente den la pestalla Form, y guardamos.
Form CSS, Pardot

Recordado esto, empezamos con los estilos para las casillas de verificación o checkboxes. 

¿Cómo dar estilo a las checkbox o casillas de verificación?

Una de las desventajas del uso de formularios Pardot es la incapacidad de modificar la estructura HTML del formulario, por lo que tenemos que aprovechar el HTML Pardot estándar para diseñar las casillas de verificación.

HTML ESTANDAR

Como vemos en el código HTML, todas las checkbox/casillas de verificación están envueltas en una etiqueta de párrafo, con la clase pd-checkbox. Así es como lo nombraremos en el CSS.

See the Pen zYYeqoe by carla (@carla-rodriguez) on CodePen.

ESTILOS CSS

La casilla de verificación o checkbox predeterminada estará oculta y el selector :before se usará para diseñar la nueva casilla de verificación, con los estilos deseados.

(.pd-checkbox : before)


Los iconos de verificación de dentro de las casillas se cargarán desde FontAwesome, por lo que hay que insertar el link de la biblioteca para visualizar los iconos. El link se inserta dentro de head en la estructura HTML.

EL RESULTADO

Las casillas de verificación se verán así una vez agregado el CSS al formulario en Pardot.

Como podéis observar, también dentro del CSS hemos llamado a la biblioteca FontAwesome. @import url(‘https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’) Añadiendo la biblioteca cargan los iconos de verificación. En los estilos CSS, en ‘content’ se pone la clase de fontAwesome del icono deseado.

Botones de radio ¿Cómo le damos estilo?

Los botones de radio son bastante similares a las casillas de verificación, pero con un poco de CSS adicional para que se vean como un botón de radio. Al igual que las casillas de verificación, aprovecharemos el HTML que proporciona Pardot, por lo que todo lo que tenemos que hacer para personalizarlos es añadir CSS.

HTML ESTANDAR

Como vemos, todas los botones de radio en Pardot están envueltos de en una etiqueta de párrafo , con la clase pd-radio. Así es como lo nombraremos en el CSS.

See the Pen yLLZMBO by carla (@carla-rodriguez) on CodePen.

ESTILOS CSS

Al igual que el CSS para las checkbox, la biblioteca FontAwesome se cargará para mostrar el icono de verificación del botón de opción, mientras el botón de opción predeterminado estará oculto.

See the Pen Css, botones de radio by carla (@carla-rodriguez) on CodePen.

¿Cómo integrar el marketing intelligence sobre Salesforce?

¡En nuestro paper te lo contamos todo!

cta contacto