Esta puede ser una buena forma de personalizar tus formularios de Active Campaign directamente —sin necesidad de utilizar ningún plugin—, pero ten en cuenta que para hacerlo es necesario tener unos conocimientos básicos sobre código HTML y CSS, o de lo contrario podría no funcionarte lo que aquí vamos a compartir. ¡Vamos allá!
Contenidos
Cómo añadir código HTML a un formulario de Active Campaign
Puedes añadir un bloque de código únicamente en los formularios de suscripción en línea o alineados (inline forms), pero no podrás hacerlo en los formularios de tipo caja flotante, barra flotante y formularios modales. Puede ser útil para insertar cualquier recurso externo como un vídeo o un audio, entre otras cosas. Para insertarlo en tu formulario de suscripción tendrás que irte al apartado Formularios > Editar (en el formulario que quieras modificar) y a continuación, en la columna derecha, marcar la opción “Estándar” y ahí podrás ver y arrastrar el apartado Código HTML para soltar en el centro:
Para insertar tu código, haz clic en el bloque y mételo en el campo que se te abrirá en la columna derecha de la pantalla.
Ejemplos de códigos de HTML básicos para tus formularios
- Centrar texto:
<center>Texto centrado</center> - Poner una frase en negrita:
Esta es una frase normal. <b>Esta está en negrita</b>. - Poner una palabra en cursiva:
Donde ponga <i>cursiva</i> se verá la <i>cursiva</i>. - Subrayar una palabra:
Palabra <u>subrayada</u> - Crear saltos de párrafo:
<p>Este es un párrafo.</p> <p>Este ya es otro párrafo.</p> - Añadir un enlace:
<a href="https://mundofunnel.pro">Texto con enlace</a> - Añadir una línea separadora de color negro:
<div style="height: 2px; border-bottom: 1px solid #000"></div> - Crear una lista con viñetas:
<ul><li>Primera frase de la lista.</li><li>Segunda frase de la lista.</li><li>Tercera frase de la lista.</li></ul> - Poner un texto de color rojo:
<p style="color: #ff0000;">Párrafo de texto de color rojo.</p>
Cómo añadir código CSS a un formulario de Active Campaign
Puedes utilizar la caja de CSS personalizado o el inspector para modificar visualmente algunas configuraciones de tu formulario, como ajustar el ancho del botón de envío, el tamaño de letra, la alineación del texto, su color, etc. Esta opción se encuentra ubicada en la pestaña Diseño, y está disponible para todos los tipos de formularios:
Cómo utilizar el Inspector para aplicar CSS personalizado a los formularios de Active Campaign
Selecciona el Inspector y acto seguido haz clic en el elemento del formulario que quieras manipular. Lo que eso hará, será identificar automáticamente la clase del elemento y aparecerá en la caja de CSS Personalizado, teniendo únicamente por tu parte que aplicar los estilos que quieras asignarle:
Ejemplo de código CSS para aplicar en un formulario de Active Campaign
._x94837548 ._form-title {
text-align: center;
font-weight: 700;
color: #ee6616;
}
._x13590652 input, ._x23862150 input {
border: 1px solid #ee6616;
}
._submit {
width: 200px;
background-color: #ee6616 !important;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
font-weight: 600;
}Cómo ocultar el logotipo de Active Campaign en tus formularios
Por defecto, Active Campaign únicamente te permitirá ocultar su logotipo si utilizas una cuenta X o superior. Si utilizas algún plugin en tu web para darle forma a sus formularios, lo más probable es que no te salga y por lo tanto no tienes que preocuparte por esto. Pero si por lo contrario quieres embeber directamente el formulario de Active Campaign en tu web, es posible que el siguiente código CSS lo encuentres de utilidad. Con este código de CSS obligas a que esa marca no se muestre, forzando un display: none. Si deseas aplicar esto, ten en cuenta que será bajo tu responsabilidad y que podrías estar violando alguna norma de uso de la compañía:
._form._dark ._form-branding {
display: none !important;
}
(2 votos, promedio: 5,00 de 5)
