Resumen de IA
¿Te gustaría hacer cambios en la apariencia del campo Fecha / Hora en tus formularios de WordPress? El campo Fecha / Hora es una forma fácil e intuitiva para que tus usuarios programen citas y mucho más.
Este tutorial te mostrará cómo personalizar este campo en WPForms.
Antes de sumergirte en el tutorial a continuación, asegúrate de que WPForms esté instalado y activado en tu sitio. Luego verifica tu licencia si aún no lo has hecho.
También necesitarás crear un nuevo formulario o abrir uno existente para editar y agregarle un campo de Fecha / Hora. Una vez que lo hayas hecho, haz clic en el campo en el área de vista previa del constructor para abrir su panel de Opciones de Campo.
Edición de la etiqueta y la descripción del campo
En las opciones del campo Fecha / Hora, puedes personalizar las etiquetas del campo y su visibilidad, así como agregar una descripción.
Personalizar la etiqueta del campo y las subetiquetas
Por defecto, la etiqueta del campo será Fecha / Hora. Además, si tienes los subcampos de Fecha y Hora visibles, también habrá una subetiqueta debajo de cada campo.
Puedes personalizar la etiqueta del campo introduciendo tu texto en el campo proporcionado.
Las subetiquetas de Fecha y Hora no son personalizables.
Ocultar la etiqueta del campo y las subetiquetas
Puedes eliminar cualquiera de las etiquetas de tu campo Fecha / Hora desde el panel Opciones de Campo. Para hacerlo, haz clic en Avanzado, luego desplázate hasta la parte inferior del panel y activa las configuraciones Ocultar etiqueta y Ocultar subetiquetas.
Agregar una descripción
También puedes agregar una descripción a tu campo Fecha / Hora para proporcionar más contexto o información a tus usuarios. Simplemente introduce el texto deseado en el campo proporcionado en las opciones generales del campo.
Esta descripción aparecerá directamente debajo de los cuadros de entrada en el frontend de tu sitio.
Mostrar la fecha, la hora o ambas
Dentro del campo Fecha / Hora, tienes la opción de mostrar solo el subcampo de Fecha, solo el subcampo de Hora, o ambos subcampos.
Puedes cambiar qué subcampo(s) deseas mostrar usando el menú desplegable Formato en el panel Opciones de Campo.
Dentro de este menú desplegable, puedes elegir entre las siguientes opciones:
- Fecha y Hora
- Fecha
- Hora
Requerir el campo
Para asegurarse de que sus usuarios deben seleccionar una fecha u hora antes de enviar su formulario, active la configuración Requerido en las opciones del campo.
Seleccionar el tamaño de un campo
La opción Tamaño del campo se encuentra en la pestaña Avanzado del panel Opciones del campo. Determina el ancho de los subcampos de Fecha y Hora. Puede seleccionar entre Pequeño, Mediano o Grande.
Esta opción es especialmente útil al configurar un formulario de varias columnas.
Cambiar la visualización de la fecha
Hay varias opciones de visualización que puede personalizar para el subcampo Fecha: Tipo, Marcador de posición y Formato. Para acceder a estas opciones, abra la pestaña Avanzado en el panel Opciones del campo.
Tipo
El subcampo Fecha tiene dos tipos de visualización diferentes entre los que puede elegir: Selector de fecha o Desplegable de fecha.
Selector de fecha
La opción Selector de fecha creará una ventana emergente de calendario desde la cual sus usuarios podrán seleccionar una fecha.
Desplegable de fecha
La opción Desplegable de fecha mostrará 3 menús desplegables desde los cuales los usuarios podrán seleccionar valores para el mes, el día y el año.
Marcador de posición
La opción Marcador de posición le permite establecer texto de marcador de posición que se mostrará en el campo Fecha / Hora si utiliza el tipo Selector de fecha.
Puede personalizar este texto para agregar mayor claridad a sus formularios, como indicar a los usuarios que seleccionen una fecha. Simplemente ingrese su marcador de posición en el campo provisto en la pestaña Avanzado del panel Opciones del campo.
Formato
Por defecto, el subcampo Fecha tiene varias opciones integradas sobre cómo puede formatear una fecha. Estas incluyen:
- M/D/A: Formatea la fecha numéricamente por Mes/Día/Año.
- D/M/A: Formatea la fecha numéricamente por Día/Mes/Año.
- A/M/D: Formatea la fecha numéricamente por Año/Mes/Día.
- M.D.A, D.M.A, A.M.D: Los mismos formatos que los anteriores, pero usando puntos en lugar de barras como separador.
- Mes, Día, Año: Formatea la fecha en una cadena que contiene el Mes, Día y Año completos.
Seleccione su formato preferido en el menú desplegable.
Cambiar la visualización de la hora
El subcampo Hora también tiene opciones que puede personalizar, como Intervalo, Marcador de posición y Formato.
Intervalo
Esta configuración le permite elegir en qué intervalos aparecen las opciones de hora. Las opciones integradas para esta configuración permiten que las horas se muestren en incrementos de 15, 30 o 60 minutos.
Por defecto, el intervalo se establecerá en 30 minutos. Utilice el menú desplegable en la pestaña Avanzado del panel Opciones del campo para cambiarlo si lo desea.
Marcador de posición
La opción Marcador de posición le permite establecer texto de marcador de posición que aparecerá en el subcampo Hora cuando sus usuarios abran su formulario. Por ejemplo, puede usar esta configuración para indicar a sus usuarios que seleccionen una hora.
Para personalizar el marcador de posición de Hora, simplemente ingrese el texto deseado en el campo proporcionado en la pestaña Avanzado del panel Opciones de campo.
Formato
El subcampo Hora tiene dos opciones diferentes para el formato de la hora: 12 horas o 24 horas.
Formato 12h
Elegir un formato de 12 horas mostrará las horas disponibles de 12:00 a. m. a 12:00 p. m.
Formato 24h
El formato de 24 horas mostrará las horas disponibles de 0:00 a 23:00.
Limitar las fechas y horas disponibles
Si desea un mayor control sobre las fechas que sus usuarios pueden elegir, puede personalizar las opciones disponibles de varias maneras, incluido limitar los días disponibles, deshabilitar fechas pasadas y limitar las horas disponibles. Todas estas configuraciones están disponibles en las opciones de campo Avanzado.
Limitar días disponibles
Para poder elegir qué días de la semana están disponibles para que sus usuarios seleccionen, active la configuración Limitar días.
Esto mostrará un conjunto de casillas de verificación para los días de la semana. Si desea evitar que los usuarios elijan un día específico de la semana, simplemente desmarque su casilla para deshabilitarlo.
Deshabilitar fechas pasadas
Además de limitar los días disponibles, también puede evitar que los usuarios seleccionen fechas pasadas en sus formularios. Para hacer esto, active la configuración etiquetada como Deshabilitar fechas pasadas.
Cuando una fecha está deshabilitada, aparecerá en gris en su sitio y no se podrá hacer clic en ella.
Limitar horas disponibles
Si lo desea, puede personalizar las horas que sus usuarios pueden seleccionar en sus formularios. Para hacer esto, active la opción Limitar horas.
Esto mostrará menús desplegables para la Hora de inicio y la Hora de fin de sus horas disponibles. Elija sus horas preferidas para establecer el rango disponible.
En el frontend de su sitio, solo las horas entre su Hora de inicio y Hora de fin seleccionadas estarán disponibles para que sus usuarios las elijan.
¡Eso es todo! Ahora puedes personalizar el campo Fecha / Hora para todos tus formularios.
¿Te gustaría aprender sobre las opciones de personalización avanzada disponibles para otros tipos de campos en WPForms? ¡Consulta nuestros tutoriales sobre los campos Desplegable, Casillas de verificación y Opción múltiple para obtener todos los detalles!