Los formularios son herramientas esenciales para la interacción con tus usuarios. Desde recolectar información hasta gestionar solicitudes, un formulario bien diseñado puede marcar la diferencia. En este tutorial, aprenderás paso a paso cómo crear y personalizar campos en tus formularios para adaptarlos a las necesidades de tu sitio web, manteniendo siempre la flexibilidad y el control sobre su apariencia y funcionalidad.
Paso 1: Crea o selecciona un menú de tipo formulario
Si aún no has creado un menú de tipo formulario, consulta nuestra guía para crear menús antes de continuar.
Si ya tienes un menú de formulario creado, identifícalo en la lista de menús y selecciona su nombre o haz clic en el botón verde con un ícono de barras y un símbolo de más, ubicado en la fila correspondiente.
Paso 2: Accede a la pestaña de edición del formulario
Tras seleccionar el menú de formulario, serás redirigido a la vista principal. Desde aquí, busca la pestaña llamada «Campos del formulario» en la parte superior del contenedor principal. Al hacer clic, ingresarás a la sección donde podrás gestionar los campos asociados al formulario.
Paso 3: Crea un nuevo campo de formulario
En la pestaña «Campos del formulario«, se mostrarán los campos existentes en la parte superior. Para añadir un nuevo campo, utiliza el botón superior izquierdo o desplázate hacia abajo hasta llegar al formulario de creación. Completa la información requerida para configurar el nuevo campo de acuerdo con tus necesidades.
Paso 4: Configura los detalles de tu campo de formulario
Completa los campos requeridos para personalizar tu nuevo elemento. Aquí tienes las opciones principales y avanzadas:
Opciones Básicas:
Tipo: Selecciona el tipo de campo (por ejemplo: texto, selector, fecha, etc.). Si tienes dudas, consulta nuestro FAQ sobre tipos de campos para formularios.
Nombre del campo: Nombre visible asociado al campo. Este puede mostrarse arriba, al lado o no mostrarse, dependiendo de la configuración seleccionada.
Marcador de posición (Placeholder): (Opcional) Texto dentro del campo que guía al usuario sobre qué información debe ingresar.
Visible: Define si el campo será visible o estará oculto temporalmente.
Obligatorio: Indica si el campo debe ser llenado antes de enviar el formulario.
Mostrar placeholder: Decide si el texto del marcador de posición será visible dentro del campo.
Mostrar nombre del campo: Controla si el nombre del campo aparece en el formulario.
Opciones Avanzadas:
Slug: (Opcional) Identificador único del campo. Si no lo defines, el sistema generará uno automáticamente.
Tamaño del campo según dispositivo: Ajusta el tamaño del campo en función del dispositivo:
- Grandes (pantallas mayores a 992px): Ejemplo, laptops.
- Medianos (pantallas entre 768px y 992px): Ejemplo, tablets.
- Pequeños (pantallas menores a 768px): Ejemplo, smartphones.
Estilo de las opciones del selector: Posición del nombre del campo respecto al formulario:
- Horizontal: El nombre está al lado del campo.
- Vertical: El nombre aparece arriba del campo.
Campos especiales para selectores (único, múltiple, etc.):
Si seleccionas un tipo de campo de tipo selector:
- Una tabla adicional aparecerá para definir las opciones.
-
Completa las columnas:
- Texto: Nombre visible de la opción.
- Valor: Dato que se enviará al seleccionar esta opción.
- Preseleccionada: Marca las opciones que deberían estar seleccionadas por defecto (si aplica).
- Utiliza los botones disponibles para agregar o limpiar opciones según sea necesario.
Paso 5: Guarda tus cambios
Después de configurar tu nuevo campo:
- Revisa todos los datos ingresados para asegurarte de que todo esté en orden.
- Haz clic en el botón «Guardar» para aplicar los cambios.
Un formulario bien configurado puede mejorar significativamente la experiencia de usuario en tu sitio web, facilitando la interacción y la recopilación de información importante. Asegúrate de revisar cada detalle y personalizar cada campo según las necesidades específicas de tus usuarios.