Editar diseño de formularios en el editor de landing pages

Editar diseño de formularios en el editor de landing pages

Usuarios autorizados: Administradores y editores.
La misión: Edita el diseño de tus formularios con estas 4 acciones.



En Escala es posible personalizar los formularios de tu landing page y configurar su funcionamiento cuando tus leads envíen sus datos. Ahora puedes elegir entre redirigirlos a un sitio externo, otra landing page o mantenerlos en la misma página aunque se registren en el formulario. Aprende cómo realizar esta configuración según los objetivos de tu empresa.

1. Edita el contenido y acción de tu formulario 

1.1 Para editar el contenido de tus formularios, haz clic sobre el formulario en el page builder y encontrarás las herramientas de edición en la columna izquierda de la pantalla, bajo la pestaña Contenido. Así, podrás editar el Título del formulario, el Texto del botón y la Acción del formulario luego de que los visitantes de tu landing page lo envíen.


1.2 Al configurar la Acción del formulario, debes indicar lo que quieres que suceda luego de que tus leads hagan clic en el botón. Puedes elegir una de las siguientes:
  1. Redirigir a una de mis páginas, con la que debes indicar que sea la próxima página de tu pipeline o cualquiera de tus landing pages.
  2. Redirigir a una URL, donde debes especificar la URL a la que irán tus leads.
  3. No redigirir y mostrar mensaje de agradecimiento, donde debes escribir un mensaje de agradecimiento para que tus leads sepan que el formulario se envió correctamente y se queden en la misma landing page.

 
1.3 Para editar la fuente, el tamaño, el color, el tipo de letra, el espaciado y la alineación del texto, haz clic en la pestaña de Diseño y configura los datos en la sección de Texto del título
1.4 En la opción de Espacio del título puedes modificar el espacio exterior correspondiente al margen, de manera uniforme o personalizada. Para esto, haz clic en la tuerca y luego en el ícono de vinculación, para modificar el espacio de manera independiente.


2. Edita estilos de campo y el contenido de los placeholders

2.1 En Estilos de los campos, encontrarás la opción de cambiar el color del fondo, el grosor del borde, el color, el radio del borde y el estilo del texto, como el Label, el Input y el Placeholder.
  1. Label corresponde a las etiquetas o texto guía que se ubica en la parte externa de los campos. En esta pestaña, podrás editar la fuente, tamaño, color, el tipo de letra, el espaciado y la alineación del texto. En caso de que desees ocultarlas, haz clic en el ícono de edición de formulario y luego selecciona la opción de Ocultar etiquetas.
  2. Input corresponde al texto que ingresan tus visitantes en el formulario.
  3. Placeholder hace referencia a la etiqueta de texto colocada dentro del campo de un formulario. 


2.2 En caso de que desees editar el contenido de los placeholders sólo debes hacer clic en el ícono de edición de formularios y, en la sección de Campos, ubica el campo que deseas editar y haz clic en el ícono de lápiz.


2.3 Luego, selecciona la opción de Avanzada en la ventana emergente. Allí, podrás editar el contenido del placeholder y, por último, haz clic en Actualizar y Guardar.


3. Edita el texto y estilo de botón

3.1 A continuación, en Texto del botón, podrás modificar la fuente, tamaño, color, el tipo de letra, el espaciado y la alineación del texto. Por otra parte, en Estilos del botón puedes cambiar el ancho y el alto del botón, el color, colocar una imagen de fondo, modificar el Hover agregándole un nuevo color de fondo, color del texto, grosor del borde, radio del borde, sombra, margen o padding y alineación del texto.
 Nota: El Hover corresponde al efecto o alteración del aspecto del botón cuando se sitúa el cursor sobre el mismo, pero no se ha seleccionado aún.


 Importante: Si se coloca una imagen para el botón, no se modificará el Hover. Lo único que se podrá modificar, en ese caso, es el color del botón.

4. Edita el texto del mensaje y estilo de fondo

4.1 En Texto del mensaje, puedes editar el mensaje de éxito de tu formulario cambiando la fuente, tamaño, color, el tipo de letra, el espaciado y la alineación del texto. 


4.2 Para modificar el ancho, el grosor y el radio del borde del formulario, haz clic en la sección de Estilo del marco donde también podrás agregar sombra e imagen de fondo.
4.3 En la opción siguiente, Espacio del marco, podrás alterar el margen y el padding del formulario. 
4.4 Por último, en Alineación del marco, podrás modificar la alineación del marco del formulario.
4.5 Al finalizar la edición, no olvides hacer clic en Guardar para confirmar los cambios.


¿Estás listo para completar la misión en Escala?

    • Related Articles

    • Editar landing pages publicadas

      Usuarios autorizados: Administradores y editores. La misión: Edita páginas publicadas con estas 4 acciones. 1. Cambia el diseño y contenido 1.1 Para editar una landing page que hayas publicado en Escala, haz clic en la sección Landing Pages ubicada ...
    • Editar imágenes que se insertan en landing pages

      Usuarios autorizados: Administradores y editores. La misión: Edita las imágenes de tus landing pages con estas 3 acciones. En Escala puedes editar las imágenes que necesitas insertar en tus landing pages creadas en la plataforma. 1. Agrega una imagen ...
    • Editar contenido y diseño de un pop-up

      Usuarios autorizados: Administradores y editores. La misión: Edita el contenido y diseño de un pop up con estas 2 acciones. 1. Configura el texto y diseño de un pop up 1.1 Cada botón en Escala puede ser configurado para realizar una acción ...
    • Editar landing page responsive

      Usuarios autorizados: Administradores y editores. La misión: Edita la vista por dispositivos de tu landing page responsive con estas 3 acciones. 1. Cambia tu plantilla a visualización mobile 1.1 Primero, haz clic en los íconos de dispositivos que se ...
    • Guardar secciones de landing pages como plantillas

      Usuarios autorizados: Administradores y editores. La misión: Guarda las secciones de tu landing page como plantillas con estas 4 acciones. 1. Visualiza el listado de secciones de tu landing page 1.1 En Escala, puedes guardar las secciones de tus ...