Cómo crear un formulario de WordPress con un selector de fechas (forma fácil)

Las entradas de fechas inconsistentes pueden convertir un simple formulario de WordPress en un lío frustrante. Barras, guiones, nombres completos de meses: cuando los usuarios ingresan fechas como quieren, es inevitable lidiar con una pesadilla de datos desordenados que lleva horas limpiar.

Es por eso que agregar un selector de fechas a tus formularios es una decisión tan inteligente.

En lugar de dejar el formato en manos del usuario, un selector de fechas les proporciona una interfaz de calendario limpia, haciendo que cada entrada sea uniforme y fácil de administrar.

En esta guía, compartiremos la forma más sencilla de crear un formulario de WordPress con un selector de fechas. Ya sea que estés creando formularios de reserva, registros de eventos o programadores de citas, esta pequeña mejora puede ayudarte a ti y a los visitantes de tu sitio. 🙌

¿Por qué crear un formulario de WordPress con un selector de fechas?

Después de administrar miles de formularios en línea en WordPress, hemos notado que los campos de formulario relacionados con fechas son a menudo donde las cosas salen mal. De hecho, los formatos de fecha incorrectos son una de las principales razones por las que vemos que los envíos de formularios fallan o crean confusión.

Un campo de selector de fechas resuelve estas frustraciones comunes y mejora la experiencia de tu usuario. Lo hemos visto funcionar eficazmente para:

• Formularios de registro que piden a los usuarios que ingresen sus fechas de nacimiento.
• Formularios de pedido para elegir una fecha y hora de entrega para un pedido.
• Formularios de artículos de alquiler para seleccionar una fecha de recogida o devolución de un artículo de alquiler.
• Formularios de solicitud de devolución de llamada para permitir que los usuarios le hagan saber cuándo desean ser contactados sobre sus productos o servicios.
• Formularios de solicitud de ausencia para permitir que los empleados ingresen las fechas de inicio y fin de su tiempo libre.
• Formularios de cita o reserva para sitios web de alojamiento o servicios.

¿La mejor parte? Un selector de fecha garantiza la coherencia en todas las presentaciones. Ya no tendrá que preguntarse si 03/04/2024 significa 4 de marzo o 3 de abril, un dolor de cabeza que hemos encontrado con demasiada frecuencia con la entrada manual de datos.

Dicho esto, le mostraremos cómo crear fácilmente un formulario de WordPress con un selector de fecha. Aquí están los pasos que cubriremos, y puede usar los enlaces rápidos a continuación para navegar a través de ellos:

• Paso 1: Instala el plugin WPForms
• Paso 2: Elegir una plantilla de formulario
• Paso 3: Agregar el campo Selector de fecha a su formulario de WordPress
• Paso 4: Configurar los ajustes del selector de fecha y hora
• Paso 5: Incrustar el formulario de WordPress en su sitio web
• 🎁 Paso adicional: Habilitar recordatorios de citas
• Preguntas frecuentes: Cómo crear un formulario de WordPress con un selector de fecha
• Consejos definitivos para optimizar su formulario de WordPress

Empecemos.

Paso 1: Instala el plugin WPForms

Hemos probado docenas de complementos de formularios y selectores de fecha a lo largo de los años, incluidas opciones populares como Ninja Forms y Gravity Forms.

Pero para agregar selectores de fecha, hemos descubierto que WPForms es la solución más fácil de usar, especialmente para principiantes que desean crear formularios de aspecto profesional sin tocar ningún código.

Además de un selector de fecha, WPForms viene con funciones premium como lógica condicional para mostrar u ocultar campos según las selecciones del usuario y calculadoras inteligentes para manejar automáticamente las estimaciones de precios.

En WPBeginner, de hecho usamos WPForms para crear la mayoría de nuestros formularios, y no podemos recomendarlo lo suficiente. Puedes ver nuestra reseña completa de WPForms para más detalles.

Primero, tienes que instalar WPForms en tu sitio web. Para obtener instrucciones detalladas, puedes consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Paso 2: Elegir una plantilla de formulario

Al activarlo, dirígete a la página WPForms » Agregar Nuevo desde tu panel de WordPress.

Esto te dirigirá a la página ‘Seleccionar una plantilla’.

Antes de elegir una plantilla, es una buena idea nombrar tu formulario de WordPress para que puedas identificarlo fácilmente más tarde.

A continuación, elegirás cómo construirás tu formulario: usando WPForms AI, una plantilla predeterminada o desde cero.

Si quieres usar el constructor de formularios con IA, todo lo que tienes que hacer es escribir una indicación simple. La IA generará el formulario para ti al instante.

Para este ejemplo, usaremos la plantilla de Formulario de Contacto Simple y luego le agregaremos el campo selector de fecha. Pero siéntete libre de elegir una plantilla que te convenga más.

Al desplazarte hacia abajo en la página de Configuración, verás más de 2,000 plantillas de formularios predeterminadas disponibles aquí. Puedes usar la barra de búsqueda para acotar la elección.

Una vez que hayas tomado tu decisión, simplemente haz clic en el botón ‘Usar plantilla’.

Paso 3: Agregar el campo Selector de fecha a su formulario de WordPress

Ahora, llegarás al constructor de formularios de WPForms. Notarás las opciones de campo en la columna izquierda y una vista previa del formulario en el lado derecho de la pantalla.

Por defecto, la plantilla de Formulario de Contacto Sencillo solo tiene los campos de nombre, dirección de correo electrónico y comentarios añadidos al formulario.

Para demostración, te mostraremos cómo añadir un campo de fecha a tu formulario de WordPress. Pero si tu plantilla ya lo tiene, entonces puedes saltar a la parte de edición de este paso.

Lo que necesitas hacer es desplazarte hacia abajo hasta la sección de Campos Elegantes en la columna izquierda, donde verás el campo 'Fecha / Hora'.

Simplemente arrastra y suelta ese campo donde lo quieras en tu formulario. En este tutorial, lo hemos colocado justo debajo del campo de Correo Electrónico.

Una vez que lo hayas hecho, haz clic en el campo 'Fecha/Hora' para editarlo. Esto abrirá la pestaña 'Opciones del Campo' en el lado izquierdo de tu pantalla.

Desde aquí, puedes cambiar la etiqueta del campo, que por defecto es 'Fecha / Hora'. Nosotros usaremos 'Hora preferida para llamada telefónica' para nuestro campo.

También puedes cambiar el formato de fecha del campo usando el menú desplegable Formato desplegable. Las opciones son Fecha y Hora, Fecha o Solo Hora. Esto puede ser útil si solo quieres usar una fecha sin un campo de hora para recopilar las fechas de nacimiento de los usuarios.

Aparte de eso, puedes completar el texto de la descripción para dar más contexto sobre lo que el usuario necesita ingresar en el campo.

Finalmente, puedes marcar la casilla 'Requerido' si quieres que este sea un campo obligatorio. Esto significa que el usuario tendrá que seleccionar una fecha y hora antes de poder enviar el formulario.

Una vez que hayas hecho eso, simplemente haz clic en el botón 'Guardar' en la parte superior para almacenar la configuración de tu formulario.

Paso 4: Configurar los ajustes del selector de fecha y hora

Por defecto, el campo selector de rango de fechas en tu formulario de WordPress será un calendario con un menú desplegable de hora al lado.

La fecha actual estará seleccionada, pero el usuario puede cambiarla para elegir una fecha diferente. El formato de fecha es mes/día/año.

Mientras tanto, el menú desplegable de hora se establece por defecto en un reloj de 12 horas con intervalos de 30 minutos.

Los usuarios pueden entonces elegir una franja horaria que les funcione mejor.

En algunos casos, es posible que desees cambiar la configuración del selector de fechas. Por ejemplo, tal vez tu país siga el formato día/mes/año o el formato de fecha y hora de 24 horas en lugar de los predeterminados.

Para hacer esto, tendrás que cambiar a la pestaña 'Avanzado' en la parte superior del panel lateral izquierdo.

Aquí, puedes ajustar el tamaño del campo del selector de fechas. Luego, en la sección 'Fecha', puedes cambiar el rango de fechas de un calendario a un menú desplegable de fechas.

Cambiar el selector de calendario de fechas a un menú desplegable de fechas es una buena idea si el formulario tiene espacio limitado y el calendario se ve bastante pequeño.

Así es como se ve el menú desplegable de fechas:

Debajo de eso, puedes cambiar el formato de fecha de mes/día/año (1/31/2024) a día/mes/año (31/1/2024) o Mes Día, Año (31 de enero de 2024).

Si eliges el selector de fechas de calendario, también puedes insertar texto de marcador de posición en el campo 'Fecha'. Puedes rellenarlo con tu formato de fecha para que los usuarios sepan qué formato estás utilizando, para que no se confundan.

Además, puedes habilitar el interruptor 'Limitar días' para ajustar el rango de fechas que se puede seleccionar. Esto será útil si solo ofreces tus servicios entre semana.

Siéntete libre de deshabilitar también las fechas pasadas para evitar que se seleccionen fechas anteriores.

A continuación, pasemos a la sección 'Hora' para cambiar el selector de hora.

Aquí, puedes cambiar el intervalo a 15 minutos o 1 hora en lugar de 30 minutos. También es bueno ingresar texto de marcador de posición aquí para mostrar qué formato de hora estás utilizando.

El selector de hora utiliza por defecto un reloj de 12 horas, pero puedes cambiarlo a un reloj de 24 horas si lo prefieres.

Además, siéntete libre de activar la configuración 'Limitar horas' para especificar las horas de inicio y fin de tus servicios. De esta manera, los usuarios no podrán programar una cita fuera de tu horario comercial.

Aparte de eso, puedes ingresar un nombre de clase CSS para el campo del rango de fechas. Esta es una característica avanzada y opcional, pero puedes usarla para anular el estilo del formulario con código más adelante.

Por último, pero no menos importante, puedes ocultar la etiqueta del campo del formulario y/o la subetiqueta si es necesario.

Una vez que estés satisfecho con tu nuevo formulario, puedes guardarlo haciendo clic en el botón 'Guardar' en la esquina superior derecha de la pantalla.

Paso 5: Incrustar el formulario de WordPress en su sitio web

Ahora estás listo para agregar tu nuevo formulario con el selector de fechas a tu sitio web de WordPress. Para hacer esto, simplemente haz clic en el botón 'Incrustar' en la parte superior del constructor de formularios.

Aparecerá una ventana emergente pidiéndote que selecciones una página existente para agregar el formulario o que crees una nueva página para el formulario desde cero. Ambas opciones utilizan el editor de bloques, por lo que los pasos son bastante similares.

Agregar el bloque WPForms a una página existente o nueva

Para insertar el formulario en una página existente, haz clic en el botón 'Seleccionar página existente'. Después de eso, selecciona una de las páginas que ya tienes en tu blog de WordPress o sitio web y haz clic en '¡Vamos!'

Si deseas agregar el formulario a una nueva página, simplemente haz clic en el botón 'Crear nueva página'.

Luego, dale un nombre a tu nueva página y haz clic en '¡Vamos!'

Ambos métodos te llevarán al editor de bloques, donde verás algunas instrucciones sobre cómo agregar el bloque WPForms.

Primero, haz clic en el botón '+' para agregar un bloque.

Luego, escribe ‘WPForms’ en la barra de búsqueda de bloques.

Simplemente arrastra y suelta el bloque donde mejor se vea en la página.

Todo lo que necesitas hacer ahora es hacer clic en el menú desplegable.

Luego, selecciona el formulario que acabas de crear.

En la barra lateral de configuración de Bloques, puedes personalizar los estilos del campo, la etiqueta y el botón del formulario para que se vean mejor con tu tema de WordPress.

Puedes cambiar el tamaño, el radio del borde y los colores de cada elemento.

Ahora puedes hacer clic en el botón ‘Actualizar’ o ‘Publicar’ para que el formulario esté activo en tu sitio web.

Debería verse algo así en tu sitio web de WordPress:

Si deseas insertar el formulario como widget en una publicación en lugar de una página, puedes crear una nueva publicación o abrir una existente en el editor de bloques.

Después de eso, simplemente sigue los mismos pasos para agregar el bloque WPForms a una página como en este método.

Agregar el bloque WPForms a un área lista para widgets

Si usas un tema de WordPress clásico, es posible que desees mostrar tu formulario en un área de encabezado, pie de página o barra lateral lista para widgets. Esta puede ser una buena idea si tu formulario es bastante corto y no ocupa demasiado espacio.

Para hacer esto, simplemente ve a Apariencia » Widgets desde el área de administración de WordPress. Luego, navega hasta el área deseada lista para widgets y haz clic en el botón blanco ‘+’ para agregar un bloque dentro de ella. Después de eso, puedes buscar el bloque WPForms.

Si ves dos opciones, puedes elegir cualquiera de las dos, ya que ambas hacen lo mismo.

Al igual que en el método anterior, simplemente selecciona el formulario que acabas de crear. En la barra lateral de configuración del bloque, puedes configurar el diseño para que se ajuste mejor a tu tema de WordPress.

Una vez que estés satisfecho con las ediciones, simplemente haz clic en el botón ‘Actualizar’.

¡Eso es todo!

Así es como se ve nuestro formulario en la parte inferior de una publicación de blog de WordPress:

Incrustar tu formulario de WordPress con un shortcode

Si el bloque o widget de WPForms no funciona, también puedes agregar tu formulario de WordPress usando un shortcode.

En la ventana emergente ‘Incrustar en una página’, simplemente haz clic en el enlace ‘usar un código corto’. Luego verás un código corto que puedes copiar y pegar en una página, publicación o área lista para widgets.

Para obtener más información sobre cómo usar códigos cortos, lee nuestro artículo sobre cómo agregar un código corto en WordPress.

🎁 Paso adicional: Habilitar recordatorios de citas

Si estás usando tu formulario para programar citas o reservas, agregar recordatorios automáticos puede marcar una gran diferencia.

Conectar tu formulario a tu servicio de marketing por correo electrónico te permite enviar recordatorios de citas, ayudando a reducir las ausencias y a mantener las cosas organizadas.

También tranquiliza a los usuarios de que su envío fue exitoso y su lugar está confirmado.

Para configurar esto, puedes seguir nuestra guía paso a paso sobre cómo enviar correos electrónicos de confirmación a quienes envían tu formulario. Con solo unos pocos clics, puedes asegurarte de que los usuarios reciban un recordatorio oportuno sobre la fecha u hora seleccionada. ⏰

Preguntas frecuentes: Cómo crear un formulario de WordPress con un selector de fecha

¿Estás pensando en agregar un selector de fechas a tus formularios de WordPress? Aquí tienes algunas preguntas comunes para ayudarte a empezar.

¿Qué es un selector de fechas en los formularios de WordPress?

Un selector de fechas permite a los usuarios seleccionar una fecha de un calendario. Ayuda a garantizar que las fechas se formateen de manera consistente y reduce los errores de entrada.

¿Cómo agrego un selector de hora en WordPress?

Si estás utilizando un creador de formularios como WPForms, simplemente arrastra el campo ‘Fecha / Hora’ a tu formulario. Luego elige la opción ‘Hora’ en la configuración.

¿Cómo muestro la fecha en mi sitio de WordPress?

Puedes mostrar fechas usando un widget, un shortcode o un fragmento de código PHP personalizado.

WPCode es uno de los mejores plugins de fragmentos de código para WordPress. Hace que agregar código personalizado, incluido el que muestra la fecha de hoy, a tu sitio web sea súper seguro y fácil.

¿Cómo inserto un selector de fecha usando HTML?

En HTML plano, puedes usar: <input type="date">. Pero en WordPress, es más fácil usar un plugin de formularios para una mejor compatibilidad y control.

Consejos definitivos para optimizar su formulario de WordPress

Ahora que sabes cómo agregar un selector de fecha en los formularios de WordPress, cubramos los mejores consejos para llevar tus formularios al siguiente nivel:

• Acepta pagos en línea en tus formularios – WPForms es compatible con pasarelas de pago populares como Stripe, PayPal, Square y Authorize.net. Puedes cobrar pagos únicos o recurrentes, y no hay tarifas de transacción adicionales.
• Haz que tus formularios más largos sean conversacionales – Si tienes un formulario de registro de eventos o de usuario que necesita capturar mucha información, hacerlo conversacional puede aumentar la tasa de finalización del formulario.
• Evita el spam en los formularios de contacto – Puedes habilitar la protección antispam integrada de WPForms y la casilla de verificación reCAPTCHA para filtrar las entradas de formularios con spam.
• Crea formularios multilingües – Llega a una audiencia diversa y aumenta la accesibilidad de tu sitio web con formularios que se muestran en varios idiomas.
• Sigue nuestra lista de mejores prácticas de diseño de formularios de contacto – Esta guía te guiará a través del diseño del mejor formulario de WordPress para convertir visitantes habituales en clientes potenciales o clientes.
• Lee nuestra guía experta sobre cómo crear formularios interactivos – Jared Atchison, cofundador de WPForms, te da consejos sobre cómo hacer que los formularios sean más atractivos, desde el uso de lógica condicional hasta la adición de contenido multimedia.

Esperamos que este artículo te haya ayudado a aprender cómo crear un formulario de WordPress con un selector de fecha. También podrías querer consultar nuestro artículo sobre cómo crear un formulario de varias páginas en WordPress y nuestra lista definitiva de los mejores plugins de encuestas para WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.