Con ActiveCampaign, puede personalizar formularios para que coincidan con los colores de su personalización, agregar imágenes, cambiar la fuente y mucho más.
Ver un video
Vea este vídeo para aprender a crear y personalizar su formulario.
Acceder a las opciones de personalización del formulario
Las opciones de personalización de un formulario se encuentran en el " Estilo" en el generador de formularios.
Para acceder a esta pestaña para cualquier formulario:
- Haga clic en "Sitio web" "Formularios" en el menú de la izquierda.
- Editar o crear un nuevo formulario.
- El generador de formularios se cargará. Todas las opciones de edición y estilo aparecerán en el panel derecho. Haga clic en la pestaña "Estilo" ubicada en el panel derecho.
Personalizar un formulario en línea
Con el formulario en línea, puede elegir un diseño y personalizar el estilo para el formulario y el botón de envío.
General
El "Estilo de barra" cuadro le permite personalizar cómo se mostrará el formulario a los visitantes de su sitio web. A continuación se muestra una tabla que muestra todas las opciones de estilo de formulario.
| Opciones generales de personalización | Descripción |
|---|---|
| Diseño | Haga clic en cualquiera de las opciones para elegir un diseño horizontal o vertical para el formulario. |
| Anchura máxima | Utilice esta opción para ajustar el ancho del formulario. Ancho se establece como un valor de píxel. |
| Fondo | Cambie el color de fondo de su formulario o hálo transparente. Este tipo de formulario no admite imágenes de fondo. |
| Fronteras | Utilice esta opción para agregar un borde al formulario. Los bordes se establecen como un valor de píxel. Puede aumentar o disminuir el borde, cambiar el color del borde y seleccionar entre cuatro tipos de borde: Sólido, Punteado, Discontinuo y Doble. |
| Esquinas | Utilice esta opción para redondear o cuadrar las esquinas del formulario. El radio de la esquina se establece como un valor de píxel. |
| Mostrar la personalización de ActiveCampaign | Utilice esta opción para activar o desactivar la personalización ActiveCampaign. |
Mensaje de texto
El cuadro "Texto" te permite personalizar el aspecto del texto de tu formulario. A continuación se muestra una tabla que muestra todas las opciones de personalización de texto.
| Opciones de personalización de texto | Descripción |
| Fuente | Puede elegir entre unas 1.500 fuentes en su formulario para que se adapte a su personalización. La fuente seleccionada aquí se aplicará al bloque Cabecera, al bloque Código HTML, a los campos y al botón. |
| Encabezado |
El encabezado aparecerá inicialmente en la parte superior de su formulario. Puede ajustar lo siguiente para este bloque:
*La posibilidad de poner texto en negrita dependerá de la fuente seleccionada. |
| Párrafo (Código HTML) |
Este bloque aparece inicialmente debajo del Encabezado y actúa como texto de "Párrafo" en su formulario. Puede ajustar lo siguiente para este bloque:
*La posibilidad de poner texto en negrita dependerá de la fuente seleccionada. |
Botón
El " Botón" cuadro le permite personalizar el aspecto del botón de envío de su formulario. A continuación se muestra una tabla que muestra todas las opciones de personalización de botones.
| Opciones de personalización de botones | Descripción |
|---|---|
| Fondo | Cambiar el color de fondo del botón "Enviar". |
| Mensaje de texto | Cambie el color del texto del botón. |
| Frontera | Utilice esta opción para agregar un borde al botón. Los bordes se establecen como un valor de píxel. Puede aumentar o disminuir el borde, cambiar el color del borde y seleccionar entre cuatro tipos de borde: Sólido, Punteado, Discontinuo y Doble. |
| Radio de esquina | Utilice esta opción para hacer que las esquinas de su botón se redondeen o cuadradas. El radio de la esquina se establece como un valor de píxel. |
| Relleno | El relleno es el espacio alrededor del botón. Puede utilizar esta opción para aumentar o disminuir el relleno. Esto se establece como un valor de píxel. |
Tenga en cuenta que no podrá ajustar la altura o anchura del botón aquí. Usted necesitará utilizar el CSS personalizado para hacer estos ajustes.
Personalizar un formulario emergente modal
Con el formulario emergente modal, puede elegir un diseño y personalizar el estilo para el formulario, los campos de entrada y el botón enviar.
Diseño
Hay cuatro opciones que puede elegir para su formulario: sin imagen, imagen a la izquierda, imagen en la parte superior o imagen en el centro.
Estilo Modal
El " Estilo Modal" cuadro le permite personalizar cómo se mostrará el formulario a los visitantes de su sitio web. A continuación se muestra una tabla que muestra todas las opciones de personalización modal:
| Opciones de personalización de estilo modal | Descripción |
|---|---|
| Fondo | Haga clic en el selector de color para cambiar el color del formulario o agregar una imagen de fondo. |
| Fondo | Haga clic en el selector de color para cambiar el color del formulario o agregar una imagen de fondo. |
| Fuente | Cambie el tipo de fuente en el formulario para que coincida con su personalización. |
| Ancho | Utilice esta opción para ajustar el ancho del formulario. Ancho se establece como un valor de píxel. |
| Relleno | El relleno es el espacio alrededor de su forma. Puede utilizar esta opción para aumentar o disminuir el relleno. Esto se establece como un valor de píxel. |
| Radio de esquina | Utilice esta opción para redondear o cuadrar las esquinas del formulario. El radio de la esquina se establece como un valor de píxel. |
| Sombra | Utilice esta opción para agregar una sombra al formulario. Hacerlo le ayudará a destacar. Puede elegir entre las siguientes opciones: Ninguna, Ligera, Media y Pesada. |
Entradas
Las entradas se refieren a los campos que los visitantes del sitio web utilizarán para enviarle su información personal. Las opciones de personalización de entrada incluyen:
| Opciones de personalización de entrada | Descripción |
|---|---|
| Fondo | Haga clic en el selector de color para cambiar el color de los campos de entrada. |
| Color de fuente | Haga clic en el selector de color para cambiar el color del texto del campo de entrada. |
| Radio de esquina | Utilice esta opción para redondear o cuadrar las esquinas de los campos de entrada. El radio de la esquina se establece como un valor de píxel. |
Botón
El " Botón" cuadro le permite personalizar el aspecto del botón de envío de su formulario. Las opciones de personalización de botones incluyen:
| Opciones de personalización de botones | Descripción |
|---|---|
| Fondo | Cambie el color de fondo del botón Enviar. |
| Mensaje de texto | Cambie el color del texto del botón. |
| Frontera | Utilice esta opción para agregar un borde al botón. Los bordes se establecen como un valor de píxel. Puede aumentar o disminuir el borde, cambiar el color del borde y seleccionar entre cuatro tipos de borde diferentes: sólido, punteado, discontinuo y doble. |
| Radio de esquina | Utilice esta opción para hacer que las esquinas de su botón se redondeen o cuadradas. El radio de la esquina se establece como un valor de píxel. |
| Relleno | Utilice esta opción para ajustar el relleno del botón. El relleno se establece como un valor de píxel. |
Tenga en cuenta que no podrá ajustar la altura o anchura del botón aquí. Usted necesitará utilizar el CSS personalizado para hacer estos ajustes.
Personalizar un formulario de casilla flotante
Con el formulario de casilla flotante, puede elegir un diseño y personalizar el estilo para el formulario, los campos de entrada y el botón enviar.
Diseño
Hay cuatro opciones que puede elegir para su formulario: sin imagen, imagen a la izquierda, imagen en la parte superior o imagen en el centro.
Estilo de caja
El " Estilo de formulario" cuadro le permite personalizar cómo se mostrará el formulario a los visitantes de su sitio web. Las opciones de personalización de estilo de formulario incluyen:
| Opciones de personalización de estilo de caja | Descripción |
|---|---|
| Fondo | Haga clic en el selector de color para cambiar el color del formulario o agregar una imagen de fondo. |
| Color de fuente | Cambie el color del texto que aparece en el formulario. |
| Fuente | Cambie el tipo de fuente en el formulario para que coincida con su personalización. |
| Ancho | Utilice esta opción para ajustar el ancho del formulario. Ancho se establece como un valor de píxel. |
| Relleno | El relleno es el espacio alrededor de su forma. Puede utilizar esta opción para aumentar o disminuir el relleno. Esto se establece como un valor de píxel. |
| Radio de esquina | Utilice esta opción para redondear o cuadrar las esquinas del formulario. El radio de la esquina se establece como un valor de píxel. |
| Sombra | Utilice esta opción para agregar una sombra al formulario. Hacerlo le ayudará a destacar. Puede elegir entre las siguientes opciones: Ninguna, Ligera, Media y Pesada. |
Entradas
Las entradas se refieren a los campos que los visitantes del sitio web utilizarán para enviarle su información personal. Las opciones de personalización de entrada incluyen:
| Opciones de personalización de entrada | Descripción |
|---|---|
| Fondo | Haga clic en el selector de color para cambiar el color de los campos de entrada. |
| Color de fuente | Haga clic en el selector de color para cambiar el color del texto del campo de entrada. |
| Radio de esquina | Utilice esta opción para redondear o cuadrar las esquinas de los campos de entrada. El radio de la esquina se establece como un valor de píxel. |
Botón
El " Botón" cuadro le permite personalizar el aspecto del botón de envío de su formulario. Las opciones de personalización de botones incluyen:
| Opciones de personalización de botones | Descripción |
|---|---|
| Fondo | Cambie el color de fondo del botón Enviar. |
| Mensaje de texto | Cambie el color del texto del botón. |
| Frontera | Utilice esta opción para agregar un borde al botón. Los bordes se establecen como un valor de píxel. Puede aumentar o disminuir el borde, cambiar el color del borde y seleccionar entre cuatro tipos de borde diferentes: sólido, punteado, discontinuo y doble. |
| Radio de esquina | Utilice esta opción para hacer que las esquinas de su botón se redondeen o cuadradas. El radio de la esquina se establece como un valor de píxel. |
| Relleno | Utilice esta opción para ajustar el relleno del botón. El relleno se establece como un valor de píxel. |
Tenga en cuenta que no podrá ajustar la altura o anchura del botón aquí. Usted necesitará utilizar el CSS personalizado para hacer estos ajustes.
Personalizar un formulario de barra flotante
Con el formulario de barra flotante, puede personalizar el estilo de formulario y el botón Enviar. Las opciones de diseño no están disponibles con este tipo de formulario.
Estilo de barra
El " Estilo de barra" cuadro le permite personalizar cómo se mostrará el formulario a los visitantes de su sitio web. Las opciones de personalización de estilo de barra incluyen:
| Opciones de personalización de estilo de barra | Descripción |
|---|---|
| Fondo | Cambie el color de fondo del formulario. Este tipo de formulario no admite imágenes de fondo. |
| Color de fuente | Cambie el color del texto que aparece en el formulario. |
| Fuente | Cambie el tipo de fuente en el formulario para que coincida con su personalización. |
Botón
El " Botón" cuadro le permite personalizar el aspecto del botón de envío de su formulario. Las opciones de personalización de botones incluyen:
| Opciones de personalización de botones | Descripción |
|---|---|
| Fondo | Cambie el color de fondo del botón Enviar. |
| Mensaje de texto | Cambie el color del texto del botón. |
| Frontera | Utilice esta opción para agregar un borde al botón. Los bordes se establecen como un valor de píxel. Puede aumentar o disminuir el borde, cambiar el color del borde y seleccionar entre cuatro tipos de borde diferentes: sólido, punteado, discontinuo y doble. |
| Radio de esquina | Utilice esta opción para hacer que las esquinas de su botón se redondeen o cuadradas. El radio de la esquina se establece como un valor de píxel. |
| Relleno | Utilice esta opción para ajustar el relleno del botón. El relleno se establece como un valor de píxel. |
Tenga en cuenta que no podrá ajustar la altura o anchura del botón aquí. Usted necesitará utilizar el CSS personalizado para hacer estos ajustes.
Cambiar el texto del botón "Enviar"
Puede cambiar el texto del " Enviar" para cualquier formulario.
- Desde página Formularios, haga clic en el botón "Editar" para el formulario que desea actualizar.
- Haga clic en el botón "Enviar" en el creador de formularios.
- El menú de la derecha mostrará la etiqueta del botón y un campo. Escriba el texto que desea utilizar para el botón.
El nuevo texto del botón se guardará automáticamente.
Personalización avanzada
Cada tipo de formulario en ActiveCampaign tiene una opción CSS personalizada disponible. Esto es para usuarios avanzados que están familiarizados con CSS y se sienten cómodos con su uso. La opción CSS personalizada se encuentra bajo el " Estilo" pestaña para cada formulario y se puede utilizar para agregar más modificaciones a cualquier elemento de formulario. Por ejemplo, puede utilizar esta opción para:
- Ajuste la anchura y la altura de los campos de entrada
- Ajuste la anchura y la altura del botón enviar
- Ajustar el tamaño de fuente
- Ajuste el tipo de fuente para los elementos singulares. Por ejemplo, puede usar esto para hacer que la fuente de texto del botón sea diferente del resto del formulario
Si desea obtener más información sobre el uso de CSS, consulte este tutorial de CSS de w3schools.com.
Para utilizar la opción CSS personalizada:
- Desde el Generador de formularios, haga clic en la pestaña "Estilo".
- Desplácese hacia abajo hasta que vea el cuadro "CSS personalizado".
- Haga clic en el botón "Inspector" y luego haga clic en el elemento del formulario que desea modificar.
- Una vez que haga clic en el elemento que desea personalizar, aparecerá en el cuadro CSS personalizado. Escriba el CSS en este cuadro.
El CSS que agregue al elemento de formulario se guardará automáticamente.
Desactivar la personalización ActiveCampaign
Si está en un plan Plus, Professional o Enterprise, puede eliminar la personalización ActiveCampaign de su formulario. Los usuarios del plan Lite no pueden desactivar la personalización.
desactivar la personalización ActiveCampaign
- Desde el Generador de formularios, haga clic en la pestaña "Estilo".
- Desplázate hacia abajo hasta la parte inferior de la sección "General".
- Haga clic en el interruptor de personalización AC para establecerlo en la posición "Desactivado".
Este ajuste se guardará automáticamente.