Resumen de IA
¿Te gustaría tener opciones fáciles de usar para personalizar los campos de tu formulario? Cada campo de WPForms viene con un montón de formas integradas para que puedas crear formularios que satisfagan tus necesidades específicas.
Este tutorial discutirá las muchas opciones disponibles para personalizar los campos en tus formularios.
Antes de empezar, asegúrate de que WPForms esté instalado y activado en tu sitio. Luego, necesitarás crear un nuevo formulario o editar uno existente.
Opciones generales del campo
Una vez que el constructor de formularios esté abierto, puedes añadir, eliminar y editar campos. Para abrir las opciones de un campo, simplemente haz clic en él en el área de vista previa.
Cambiar el texto de la etiqueta del campo
Cuando añades un campo a tu formulario por primera vez, la etiqueta coincidirá con el tipo de campo (por ejemplo, "Casillas de verificación" o "Elementos múltiples"). Sin embargo, puedes editar el texto de la Etiqueta y hacerlo como desees.
Añadir texto de descripción
También puedes elegir añadir texto de Descripción a los campos de tu formulario.
Este texto se mostrará debajo del área de entrada.
Para más detalles, por favor consulta nuestro tutorial sobre cómo añadir texto adicional a tus formularios.
Requerir un campo
Debajo de la opción Descripción, puedes activar la opción Requerido para hacer que un campo sea obligatorio.
Si un usuario omite un campo requerido e intenta enviar el formulario, se mostrará un mensaje de validación, recordándole que complete ese campo.
Nota: ¿Sabías que puedes personalizar el texto del mensaje de validación? Para más detalles, por favor consulta nuestro tutorial sobre mensajes de validación.
Opciones avanzadas del campo
Las Opciones avanzadas de campo ofrecen aún más configuraciones de personalización para tus campos. Para localizarlas, necesitarás hacer clic en la pestaña Avanzado.
Seleccionar el tamaño de un campo
La mayoría de los campos incluirán una opción para cambiar el tamaño del campo, lo cual puede ser muy útil al personalizar la apariencia de tus formularios.
Si esta opción está disponible para el tipo de campo que estás editando, verás un menú desplegable de Tamaño del campo. Las opciones incluirán Pequeño, Mediano y Grande.
En la mayoría de los casos, el Tamaño del campo determinará el ancho del campo dentro de tu formulario.
Sin embargo, hay una excepción para 2 campos. Para los campos de Texto de Párrafo y Texto Enriquecido, el Tamaño del campo establecerá la altura del área de entrada.
Nota: Si deseas colocar más de un campo en la misma fila, por favor consulta nuestro tutorial sobre diseños de formularios multicolumna.
Añadir texto de marcador de posición
Muchos campos te permitirán añadir Texto de marcador de posición, que se muestra hasta que el usuario comienza a escribir su propio texto.
Puedes usar texto de marcador de posición para proporcionar instrucciones o incluso para cambiar el diseño de un formulario. Si deseas saber más, hemos compartido detalles y ejemplos adicionales en nuestro tutorial sobre texto de marcador de posición.
Establecer un valor predeterminado
En algunos casos, es posible que desee que partes de un formulario se rellenen previamente para los usuarios. De esta manera, puede ahorrarles un poco de esfuerzo, pero aún pueden cambiar la entrada o la selección si es necesario.
Si esta opción está disponible para el tipo de campo que está editando, verá un campo Valor predeterminado en la pestaña Avanzado.
Para obtener más detalles y ejemplos, incluidos los valores predeterminados para los campos de casillas de verificación y opción múltiple, asegúrese de consultar nuestra guía sobre cómo agregar valores predeterminados a los campos.
Nota: ¿Desea incluir datos de usuario o información de su sitio en sus formularios como valores predeterminados? Consulte nuestro tutorial sobre cómo usar etiquetas inteligentes para obtener más información.
Añadir clases CSS personalizadas
Puede personalizar fácilmente la apariencia de los campos de su formulario para que se vean como desee. Para ello, simplemente introduzca los nombres de las clases CSS del campo del formulario en el campo de texto Clases CSS. Para varias clases, separe los nombres de las clases con espacios.
Para obtener una guía más detallada, asegúrese de consultar nuestro tutorial sobre cómo usar sus propias clases CSS personalizadas.
Nota: Recomendamos usar el campo Diseño para un enfoque más sencillo de arrastrar y soltar para crear diseños avanzados de varias columnas. Sin embargo, las clases CSS de diseño tratadas en este tutorial todavía son compatibles.
Ocultar la etiqueta de un campo
Si desea un formulario más compacto o simplificado, puede considerar ocultar las etiquetas de sus campos.
Para hacer esto, deberá activar la opción Ocultar etiqueta.
Nota: Si elige ocultar las etiquetas de los campos, asegúrese de introducir un nombre relevante en la etiqueta del campo. Dado que la etiqueta seguirá apareciendo en los detalles de la entrada, esto le ayudará a identificar cada campo.
Establecer un campo como de solo lectura
Si desea mostrar información en su formulario sin permitir que los usuarios la editen, puede hacer que el campo sea de solo lectura. Esta opción está disponible para la mayoría de los campos en WPForms.
Para habilitarla, active la opción Solo lectura.
Cuando esta opción esté activada, el campo permanecerá visible en su formulario, pero los usuarios no podrán cambiar su valor. Los datos seguirán incluyéndose en la entrada del formulario cuando se envíe.
Para obtener más detalles y casos de uso adicionales, consulte nuestro tutorial sobre cómo establecer campos como de solo lectura.
Nota: Los campos de solo lectura son especialmente útiles para mostrar valores predeterminados, como detalles del usuario añadidos con etiquetas inteligentes, o para mostrar totales y otra información que no debe cambiarse.
Opciones especiales para casillas de verificación y campos de opción múltiple
A continuación, analizaremos algunas opciones adicionales disponibles específicamente para los campos de casillas de verificación y opción múltiple.
Añadir opciones con imágenes
Puede añadir fácilmente imágenes a cualquier campo de casillas de verificación, opción múltiple, elementos de casilla de verificación o elementos múltiples. Para ello, solo tiene que activar la opción Usar imágenes como opciones.
Una vez activada esta configuración, podrá cargar imágenes para cada opción dentro de su campo.
Para obtener más detalles, consulte nuestro tutorial sobre cómo añadir opciones de imagen a sus formularios.
Añadir opciones de iconos
También puedes añadir iconos a cualquiera de las opciones de un campo de Casillas de verificación, Opción múltiple, Elementos de casilla de verificación o Elementos múltiples. Para habilitar esta función, activa la opción Usar opciones de iconos.
Una vez que hayas habilitado las opciones de iconos, verás iconos predeterminados añadidos a cada opción en tu campo de Opción múltiple. Cuando hagas clic en el icono predeterminado, aparecerá un selector de iconos donde podrás elegir entre más de 2000 iconos.
Para obtener más información sobre las opciones de iconos, asegúrate de consultar nuestro tutorial sobre cómo usar opciones de iconos en WPForms.
Aleatorizar opciones
Aleatorizar las opciones que proporcionas puede ayudar a evitar sesgos de orden, lo cual es especialmente beneficioso si estás utilizando nuestro complemento de Encuestas y Sondeos.
En la pestaña Avanzado de cualquier campo de Casillas de verificación o Opción múltiple, puedes activar la opción Aleatorizar opciones .
Mostrar opciones dinámicas
La opción Opciones dinámicas es muy útil si deseas que las opciones de un campo de Casillas de verificación, Opción múltiple o Desplegable sean los nombres de páginas, publicaciones, categorías o etiquetas de tu sitio. Cuando se habilita, esta opción rellenará automáticamente las opciones del campo (y las mantendrá actualizadas si añades o eliminas contenido o taxonomías).
Para configurar esta opción, abre la pestaña Avanzado y selecciona opciones de los menús desplegables Opciones dinámicas y Fuente dinámica.
Para más detalles, por favor consulta nuestro tutorial sobre cómo configurar opciones dinámicas.
¡Eso es todo! Ahora puedes personalizar tus campos de formulario con toneladas de opciones integradas en WPForms.
¿A continuación, te gustaría añadir lógica inteligente para personalizar aún más tus formularios? Asegúrate de consultar nuestro tutorial sobre lógica condicional para obtener detalles y muchos ejemplos.