Este artículo te muestra cómo personalizar tus formularios de ActiveCampaign. Vas a aprender a cambiar colores, fuentes y diseños para que coincidan con tu marca. También incluye opciones avanzadas como usar CSS personalizado y quitar la marca de ActiveCampaign.
Toma nota
Te recomendamos usar HTML y CSS con tu formulario solo si eres un usuario avanzado y te sientes cómodo con estos lenguajes. Si no estás familiarizado con HTML o CSS, te recomendamos trabajar con alguien de tu equipo que sí conozca estos lenguajes, o bien puedes trabajar con uno de nuestros Consultores Certificados.
Nuestro equipo de soporte no puede ayudarte a crear ni a solucionar problemas de HTML o CSS que agregues a tu formulario.
Vea un vídeo
Mira este video para aprender a crear y personalizar tu formulario.
Acceder a las opciones de personalización del formulario
Las opciones de personalización de un formulario se encuentran en la pestaña "Estilo" del creador de formularios.
Para acceder a esta pestaña para cualquier formulario:
- Haz clic en Website > Forms en el menú de la izquierda.
- Haz clic en el botón "Editar formulario" o crea un formulario nuevo.
- El creador de formularios se va a cargar. Todas las opciones de edición y estilo aparecerán en el panel derecho. Haz clic en la pestaña "Style" que está en el panel derecho.
Elegir un diseño
Puedes elegir un diseño para los formularios en línea, modales y de casilla flotante. Las opciones de diseño no están disponibles para los formularios de barra flotante.
Opciones de diseño de formulario en línea
Tienes dos opciones para tu formulario en línea: diseño horizontal o vertical para tu formulario.
Opciones de diseño de formulario emergente y casilla flotante
Tienes cuatro opciones para tu formulario modal o casilla flotante: sin imagen, imagen a la izquierda, imagen en la parte superior o imagen en el centro.
Personalizar un formulario
Las opciones de estilo en "Diseño" te permiten personalizar cómo se mostrará el formulario a las personas que visitan tu sitio web. A continuación, verás tablas con todas las opciones de personalización.
General
| Opciones generales de personalización | Descripción |
|---|---|
| Ancho máximo | Usa esta opción para ajustar el ancho de tu formulario. El ancho se define como un valor en píxeles. |
| Relleno | El relleno es el espacio alrededor de tu formulario. Puedes usar esta opción para aumentar o disminuir el relleno. Esto se establece como un valor de píxel. |
| Fondo del formulario | Haz clic en el selector de color para cambiar el color de tu formulario o agregar una imagen de fondo. |
| Fondo de página | Haz clic en el selector de color para cambiar el color de tu formulario o agregar una imagen de fondo. |
| Color de bordes | Haz clic en el selector de color para cambiar el color de los bordes del formulario. |
| Trazo de bordes |
Usar esta opción para agregar un borde a tu botón. Los bordes se definen con un valor en píxeles. Puedes aumentar o reducir el borde, cambiar el color del borde y elegir entre cuatro tipos de borde diferentes: sólido, punteado, discontinuo y doble. Haz clic en "Personalizado" para elegir un ancho y un estilo diferentes para cada borde del formulario. |
| Bordes esquinas | Usa esta opción para hacer que las esquinas de tu formulario sean redondeadas o cuadradas. El radio de la esquina se configura como un valor en píxeles. |
Entradas
Los campos de entrada son los que las personas que visitan tu sitio web usan para enviarte su información personal. Las opciones para personalizar los campos incluyen:
| Opciones de personalización de campos de entrada | Descripción |
|---|---|
| Fondo de campo | Haz clic en el selector de color para cambiar el color de los campos de entrada. |
| Borde del campo | Haz clic en el selector de color para cambiar el color de los bordes del campo. |
| Esquinas | Usa esta opción para que las esquinas de los campos de entrada sean redondeadas o cuadradas. El radio de la esquina se configura como un valor en píxeles. |
Campos
El cuadro "Campos" te permite personalizar el aspecto de los campos de tu formulario. Las opciones para personalizar los campos incluyen:
| Opciones de personalización de campos | Descripción |
|---|---|
| Color de fuente del encabezado | Haz clic en el selector de color para cambiar el color de la fuente del encabezado. |
| Estilo de texto del encabezado | Selecciona un estilo de fuente para el encabezado, un tamaño y si quieres que el texto sea en negrita, cursiva o subrayado. |
| Color de párrafo | Haz clic en el selector de color para cambiar el color de la fuente del párrafo. |
| Estilo de texto de párrafo | Selecciona un estilo y tamaño de fuente para el párrafo y si quieres que el texto esté en negrita, cursiva o subrayado. |
Botón
El cuadro "Botón" te permite personalizar el aspecto del botón de envío de tu formulario. Las opciones para personalizar el botón incluyen:
| Opciones de personalización del botón | Descripción |
|---|---|
| Fondo del diseño | Cambiar el color de fondo del botón de envío. |
| Texto de diseño | Cambiar el color del texto del botón. |
| Relleno del diseño | Usa esta opción para ajustar el relleno de tu botón. El relleno se configura con un valor en píxeles. |
| Ancho del diseño | Cambiar el ancho del botón de envío. |
| Color de bordes | Haz clic en el selector de color para cambiar el color del borde del botón. |
| Trazo-bordes |
Usar esta opción para agregar un borde a tu botón. Los bordes se configuran con un valor en píxeles. Puedes aumentar o reducir el borde, cambiar el color del borde y elegir entre cuatro tipos de borde diferentes: sólido, punteado, discontinuo y doble. Haz clic en personalizado para elegir un ancho y un estilo diferentes para cada borde en el formulario. |
| Esquinas de bordes | Usa esta opción para que las esquinas de tu botón sean redondeadas o cuadradas. El radio de la esquina se establece como un valor en píxeles. |
Cambiar el texto del botón "Enviar"
Puedes cambiar el texto del botón "Enviar" para cualquier formulario.
- En la página de formularios, haz clic en el botón "Editar diseño" del formulario que deseas actualizar.
- Haz clic en el botón "Enviar" en el creador de formularios.
- El menú derecho mostrará la categoría del botón y un campo. Escribe el texto que quieres usar para el botón.
El nuevo texto del botón se guardará automáticamente.
Personalización de estilo Avanzado
Cada tipo de formulario en ActiveCampaign tiene disponible una opción de CSS personalizado. Esto es para usuarios avanzados que conocen CSS y se sienten cómodos usándolo.
Ten en cuenta que CSS implica una implementación Avanzado que puede resultar compleja si no estás familiarizado con la programación. El equipo de Experiencia del cliente no podrá solucionar problemas de código relacionados con CSS, así que te recomendamos contactar a una persona desarrolladora para que te ayude con la implementación.
La opción de CSS personalizado está en la pestaña "Estilo" de cada formulario y puedes usarla para añadir más modificaciones a cualquier elemento del formulario. Por ejemplo, puedes usar esta opción para:
- Ajustar el ancho y el alto de los campos de entrada
- Ajustar el ancho y el alto del botón de envío
- Ajustar tamaño de fuente
- Ajustar el tipo de fuente para elementos individuales. Por ejemplo, puedes usar esta opción para que la fuente del texto del botón sea diferente al resto del formulario.
Para usar la opción de CSS personalizado:
- En el creador de formularios, en la parte superior derecha, haz clic en el interruptor "Code Editor" para activarlo.
- El editor HTML aparecerá en la parte inferior del creador de formularios. Escribe el CSS en este cuadro.
El CSS que agregues al formulario se guarda de forma automática.
Desactivar la marca de ActiveCampaign
Si tienes un plan Plus, Professional o Enterprise, puedes quitar la marca de ActiveCampaign de tu formulario. Los usuarios del plan Starter no pueden desactivar la marca.
Para desactivar la marca de ActiveCampaign:
- Desde el creador de formularios, haz clic en la pestaña "Style".
- Desplázate hacia abajo hasta el final de la sección "General".
- Haz clic en el interruptor de marca de AC para ponerlo en la posición "Off".
Esta configuración se guardará automáticamente.
Más información sobre la marca de ActiveCampaign en los formularios.
Opciones adicionales de personalización
Las opciones de personalización en "Opciones" te permiten elegir cuándo aparecen los formularios Modal, en casilla-flotante y flotantes en tu sitio web, cómo se muestra el mensaje después de enviar el formulario, las acciones de formulario y la configuración de formulario. En esta sección se explica cómo usar las opciones de personalización en la pestaña "Opciones".
Si necesitas actualizar el tamaño de un formulario en un dispositivo móvil, puedes hacerlo con CSS y consultas de medios.
Ten en cuenta que CSS implica una implementación Avanzado que puede ser compleja si no estás familiarizado con la programación. El equipo de Experiencia del cliente no podrá solucionar problemas de código relacionados con CSS, así que te recomendamos contactar a una persona desarrolladora para que te ayude con la implementación.
Personalización adicional para formularios Modal, casilla flotante y barra flotante
Estos tipos de formulario ofrecen opciones adicionales de personalización que determinan cuándo y cómo aparece el formulario a las personas que visitan el sitio. Esta configuración se encuentra en "Opciones" > "Efecto emergente" en el menú derecho del creador de formularios.
| Tipo de formulario | Opciones |
| Ventana modal |
|
| Casilla flotante |
|
| Barra flotante |
|
Recursos adicionales para la pestaña "Opciones":
- Más información sobre "Al enviar"
- Más información sobre "Acción de formulario"
- Más información sobre "Configuración del formulario"