Con ActiveCampaign, puede personalizar formularios para que coincidan con los colores de su marca, agregar imágenes, cambiar la fuente y mucho más.
Obtenga más información sobre los tipos de formularios que puede crear con ActiveCampaign.
En este artículo:
- Acceder a las opciones de personalización del formulario
- Personalizar un formulario en línea
- Personalizar un formulario emergente modal
- Personalizar un formulario de caja flotante
- Personalizar un formulario de barra flotante
- Cambiar el texto del botón "Enviar"
- Personalización avanzada
- Desactivar la marca ActiveCampaign
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:
1. Haga clic en "Sitio" en el menú izquierdo de su cuenta.
2. Haga clic en el " Formularios" en el menú Sitio.
3. Localice el formulario con el que desea trabajar y, a continuación, haga clic en el " Editar" botón.
4. 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" situada 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.
Diseño
Haga clic en cualquiera de las opciones para elegir un diseño horizontal o vertical para el formulario.
Estilo de forma
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 formulario | Descripción |
|---|---|
| Fondo | Cambie el color de fondo de su formulario o hálo transparente. 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 marca. |
| Frontera | 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 bordes diferentes: Sólido, Punteado, Dashed y Doble. |
| 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. |
| Ancho | Utilice esta opción para ajustar el ancho del formulario. Ancho 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 bordes diferentes: Sólido, Punteado, Dashed 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. Las opciones de personalización de estilo modal incluyen:
| 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. |
| 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 marca. |
| 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: Ninguno, Ligero, Medio y Pesado. |
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 bordes diferentes: Sólido, Punteado, Dashed 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 caja flotante
Con el formulario de cuadro 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 marca. |
| 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: Ninguno, Ligero, Medio y Pesado. |
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 bordes diferentes: Sólido, Punteado, Dashed 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 marca. |
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 bordes diferentes: Sólido, Punteado, Dashed 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.
1. En la página Información general de formularios, haga clic en el botón "Editar" del formulario con el que desea trabajar.
2. Haga clic en el botón "Enviar" en el generador de formularios.
3. 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:
1. En el creador de formularios, haga clic en la pestaña "Estilo".
2. Desplácese hacia abajo hasta que vea el cuadro "Custom CSS".
3. Haga clic en el botón "Inspector" y, a continuación, haga clic en el elemento de formulario que desea modificar.
4. 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 marca ActiveCampaign
Si está en un plan Plus, Professional o Enterprise, puede eliminar la marca ActiveCampaign de su formulario.
Los usuarios del plan Lite no pueden desactivar la personalización de marca.
Desactivar la marca ActiveCampaign
1. En el creador de formularios, haga clic en la pestaña "Estilo".
2. Desplácese hacia abajo hasta que vea el cuadro "Varios".
3. Haga clic en el conmutador de marca DEC para establecerlo en la posición "Off".
Este ajuste se guardará automáticamente.