Este artículo explica cómo puedes usar las herramientas de diseño en Capture Forms para personalizar tus formularios.
Paso 1: Accede a "Capture Forms"
Empieza iniciando sesión en tu cuenta de Pabau con tus credenciales de acceso. Luego, ve a la sección Marketing ubicada en el menú lateral izquierdo y haz clic para expandirla. Aparecerá la pestaña "Capture Forms".
Paso 2: Accede al creador de formularios
Para acceder al creador de formularios, puedes crear un nuevo formulario o editar uno existente. En este caso, vamos a editar un formulario existente navegando a la pestaña "Forms" en la esquina superior izquierda.
Selecciona la opción "Update" para continuar editando tu formulario.
Paso 3: Diseña tu formulario
Usa el panel del lado derecho para acceder y ajustar las opciones de diseño del formulario.
Paso 4: Usa las herramientas de diseño
Las principales herramientas que ofrece Capture Forms son:
- Google Fonts - Selecciona fuentes de Google con vista previa en vivo desde una lista desplegable.
- Imágenes de stock - Añade imágenes de stock a tu formulario.
- Selector de degradado web - Puedes encontrar el selector de degradado para crear tu propio degradado (lineal, radial, elegir tus colores y puntos de parada y más) o elegir entre más de 100 degradados web listos para usar.
- Patrones sutiles - Elige entre cientos de Subtle Patterns seleccionados para ti por Toptal, texturas bonitas para tus formularios.
Paso 5: Componentes de diseño
El panel "Design" te permite personalizar la apariencia de tu formulario aplicando estilos a las diferentes partes del mismo. Cada sección corresponde a un componente específico del formulario o a un grupo de componentes:
-
Global: Se refiere al contenedor general del formulario. Esto controla el espaciado, el fondo y el diseño de toda el área del formulario.
-
Form: Este es el elemento del formulario en sí. Por defecto, no tiene relleno (padding) para asegurar que encaje bien cuando se incorpore a sitios web externos.
-
Form Group: Un grupo que incluye la etiqueta, el campo de entrada, el texto de ayuda y el mensaje de validación. Al aplicar estilos a esta sección se afecta el diseño y el espaciado de estos elementos en conjunto.
-
Form Control: Se refiere a los campos de entrada (por ejemplo, cuadros de texto, menús desplegables, etc.) donde los usuarios introducen información.
-
Button: Se refiere al botón de envío del formulario. Por defecto, sigue el estilo del botón primario de Bootstrap, pero puedes personalizar su apariencia aquí.
-
Label: Aplica estilos a las etiquetas junto a los campos de entrada. Normalmente están alineadas con los campos de formulario y usan las clases control label de Bootstrap.
-
Placeholder: Te permite personalizar el estilo del texto de marcador de posición dentro de los campos de entrada.
-
Heading: Se usa para dar estilo a cualquier encabezado que hayas añadido a tu formulario para la jerarquía visual o la organización por secciones.
-
Paragraph: Aplica estilos a cualquier texto de párrafo que hayas añadido para dar contexto o explicaciones dentro de tu formulario.
-
Help Text: Controla la apariencia del texto de ayuda que ofrece orientación para completar campos específicos.
-
Form Steps: Esta sección aparece cuando has añadido un campo de salto de página, habilitando formularios de varios pasos. Puedes personalizar la apariencia de cada indicador de paso.
-
Form Alerts: Aplica estilos a los mensajes de éxito o error que aparecen después de enviar un formulario.
-
Field Validation: Personaliza cómo se muestran los estados de error (como una entrada no válida) en los campos de tu formulario.
-
Other Components: Ofrece opciones de estilo para casillas de verificación personalizadas, botones de opción personalizados, reCAPTCHA, panel de firma y barra de progreso, mejorando tanto la funcionalidad como el atractivo visual.
Para editar los detalles, haz clic en cada pestaña para expandirla. Esto mostrará las opciones de diseño correspondientes descritas anteriormente.
Paso 6: Copiar y pegar diseño
Si ya has creado un formulario antes, las funciones "Copy Design" y "Paste Design" te permiten transferir rápidamente los estilos CSS de un formulario a otro haciendo clic en los tres puntos de la esquina superior derecha del panel de diseño. También puedes restablecer el diseño a los estilos predeterminados en cualquier momento con un solo clic.
Paso 7: Guarda los cambios
Una vez que hayas personalizado tu formulario, haz clic en el botón "Save Form" ubicado en la parte inferior de la página para finalizar.
Después de seleccionar "Save Form", aparecerá una ventana modal con 4 opciones:
- Continuar editando el formulario
- Ir a la configuración avanzada del formulario
- Compartir el formulario
- Ir al gestor de formularios
En este caso, selecciona la 4ª opción para finalizar.
NOTA: Si cierras la ventana modal sin elegir una de estas tres opciones, cuando vuelvas a hacer clic en "Save" crearás otro formulario en lugar de editar el que ya creaste. Esta opción puede ser útil si quieres crear varios formularios similares rápidamente.
Siguiendo estos pasos, puedes diseñar tus formularios para que coincidan con tu marca.
Para más guías, consulta los artículos relacionados a continuación, selecciona guías adicionales o usa la barra de búsqueda en la parte superior de la página. Estas guías te ayudarán a aprovechar al máximo tu cuenta de Pabau.
Además, para ayudarte a utilizar y comprender completamente tu cuenta de Pabau, te recomendamos explorar las guías y recursos adicionales que ofrece la Pabau Academy. Ofrece tutoriales en vídeo detallados y lecciones, brindando una experiencia de aprendizaje integral que puede dotarte de las habilidades esenciales para lograr el éxito con Pabau.