Cómo crear un formulario DatePicker en WordPress

¿Quieres crear un formulario de WordPress con un selector de fechas?

Es super sencillo añadir un selector de rango de fechas en WordPress que los visitantes pueden utilizar para seleccionar la fecha y la hora en un formulario.

Así que en este artículo, le mostraremos cómo añadir fácilmente un campo de formulario Selector de fecha/hora en WordPress, además de algunos consejos si desea personalizarlo.

Cree su formulario WordPress ahora

Cómo crear un formulario de WordPress con un selector de fecha

Usando WPForms, es super sencillo añadir un campo que permita a la gente seleccionar una fecha, hora o ambas.

Aquí tienes un tutorial paso a paso para crear un formulario de WordPress con un selector de fecha/hora:

Si prefiere instrucciones por escrito para añadir un selector de fechas de WordPress a sus formularios, consulte los pasos que se indican a continuación:

Paso 1: Crear un formulario de WordPress

Lo primero que debe hacer es instalar y activar el plugin WPForms. Necesitará una versión de pago del plugin ya que el campo Date/Time Picker no está disponible en la versión gratuita. Para más detalles, consulte esta guía paso a paso sobre cómo instalar un plugin en WordPress.

Una vez que haya comprado e instalado el plugin WPForms, vaya a WPForms " Añadir nuevo para crear un nuevo formulario.

En la pantalla de configuración, nombre su formulario y seleccione la plantilla de formulario que desea utilizar. Lo mejor es que WPForms viene con más de 2.000 plantillas de formularios de WordPress.

En nuestro ejemplo, utilizaremos la plantilla Formulario de contacto simple.

Ahora vamos a personalizar este formulario y añadirle el campo selector de fecha.

Paso 2: Añada el selector de fecha a su formulario de WordPress

Puede añadir campos adicionales a la plantilla de formulario seleccionada utilizando el sencillo editor de arrastrar y soltar de WPForms.

Así que vamos a arrastrar el campo Fecha/Hora a tu formulario, donde quieras.

Una vez que esté en tu formulario, puedes arrastrarlo arriba y abajo para colocarlo en otro lugar y volver a hacer clic en el campo para abrir su configuración y personalizarlo.

Cuando haga clic en el campo de formulario Fecha / Hora, verá las siguientes opciones:

• Etiqueta: Este es el título del campo que los visitantes del sitio verán en su formulario.
• Formato: Elija si desea que este campo incluya tanto la fecha como la hora, sólo la fecha o sólo la hora.
• Descripción: Añade una descripción para el campo. Este es un buen lugar para añadir instrucciones o detalles para sus usuarios.
• Obligatorio: Habilite este botón para evitar que los usuarios envíen el formulario hasta que se rellene este campo.

Si se desplaza hacia abajo y hace clic en Opciones avanzadas, puede personalizar aún más el campo Selector de fecha/hora, como le mostraremos a continuación.

Paso 3: Personalizaciones avanzadas del selector de fecha de WPForms

Por defecto, el campo selector de fecha en WPForms se establece en el formato de vista de calendario.

Los formatos para el campo Fecha/Hora son fáciles de cambiar en WPForms. Para hacerlo, primero haga clic en la pestaña Avanzado en Opciones de Campo. Luego, puede personalizar las siguientes opciones:

• Tipo: Puede elegir entre Selector de fecha (la vista de calendario por defecto) o Desplegable de fecha (añade campos desplegables independientes para el mes, la fecha y el año).
• Formato: Aquí puede seleccionar diferentes formatos de fecha (m/d/a o d/m/a).
• Limitar días: Active esta opción para seleccionar qué días de la semana pueden elegir los usuarios.
• Desactivar fechas pasadas: Con esta opción, puede impedir que los usuarios seleccionen fechas pasadas.

A continuación vamos a ver las opciones de personalización de la sección Hora del campo Fecha/Hora en WPForms.

Paso 4: Personalizaciones avanzadas del campo de tiempo de WPForms

De forma similar a la configuración del selector de fecha, puede personalizar las opciones de la sección Hora del campo Fecha/Hora.

Por defecto, el formato de la hora está ajustado a un reloj de 12 horas con intervalos de 30 minutos:

Como antes, puede cambiar la configuración del campo Hora yendo a la pestaña Avanzado en Opciones de campo. Este es el aspecto de estos ajustes:

• Intervalo: WPForms le permite elegir entre intervalos de 15 minutos, 30 minutos y 1 hora para el campo Hora.
• Formato: Te permite elegir entre un reloj de 12 horas o de 24 horas.
• Limitar Horas: Define el rango de tiempo que los usuarios pueden seleccionar.

Sea cual sea el formato que elija, sepa que el campo Selector de fecha/hora es una excelente forma de obtener datos precisos en sus formularios. La fecha siempre estará validada y en el formato correcto dentro del campo Selector de fecha/hora.

¿Sólo quieres que alguien rellene tu formulario de selección de fecha/hora una vez? Si quieres ver cómo limitar las entradas para los usuarios, echa un vistazo a este tutorial sobre cómo limitar el número de entradas de formularios de WordPress.

Cuando hayas terminado de personalizar los ajustes, haz clic en Guardar.

Paso 5: Configure los ajustes del formulario de selección de fecha

Las confirmaciones de formularios son mensajes que se muestran a los usuarios cuando completan un formulario. Las confirmaciones les informan de que su formulario ha sido procesado y le ofrecen la oportunidad de indicarles qué pasos deben seguir a continuación.

WPForms tiene 3 tipos de confirmación para elegir:

1. Mensaje: Este es el tipo de confirmación por defecto en WPForms. Cuando un visitante del sitio envía su formulario, aparecerá un mensaje simple, haciéndole saber que su formulario está siendo procesado.
2. Mostrar página: Este tipo de confirmación llevará a sus clientes a una página web específica de su sitio web agradeciéndoles que hayan rellenado el formulario del Selector de fecha/hora y le permitirá decirles lo que tienen que hacer a continuación. Para obtener ayuda, consulte nuestro tutorial sobre cómo redirigir a los clientes a una página de agradecimiento.
3. Ir a URL (Redirigir): Esta opción es para cuando quieres enviar a la gente a una página específica que contiene información relacionada que se encuentra en un sitio web diferente.

Así que vamos a ver cómo configurar un simple formulario de confirmación en WPForms para que pueda personalizar el mensaje que la gente verá cuando envíen su formulario Date/Time Picker.

Para empezar, haga clic en la pestaña Confirmación del Editor de formularios, en Configuración.

A continuación, personaliza el mensaje de confirmación a tu gusto y haz clic en Guardar.

Para obtener ayuda con otros tipos de confirmación, consulte nuestra documentación sobre la configuración de confirmaciones de formularios.

Ahora, vamos a configurar las notificaciones del formulario.

Paso 6: Configurar las notificaciones del formulario

¿Quieres que te enviemos por correo electrónico la fecha y hora en que alguien rellena tus formularios? Configuremos sus notificaciones de formularios para que lo hagan.

Las notificaciones son una buena forma de enviarte automáticamente un correo electrónico a ti mismo, a tus empleados y a la persona que rellenó el formulario.

A menos que deshabilites esta función, cada vez que alguien envíe un formulario en tu sitio, recibirás una notificación al respecto.

Si utiliza etiquetas inteligentes, también puede recibir sólo la fecha y la hora en las notificaciones de sus formularios.

Para ello, basta con añadir una marca de tiempo en el correo electrónico de notificación mediante esta etiqueta inteligente - {date format="m/d/Y"}

¡Buen trabajo! Ahora está listo para añadir su formulario de selección de fecha/hora a su sitio web.

Paso 7: Añadir el formulario de selección de fecha de WordPress a su sitio web

WPForms le permite añadir sus formularios en varios lugares de las entradas de su blog, páginas, pie de página, y su barra lateral.

Echemos un vistazo a la opción más común: incrustar el formulario en una entrada o página.

Haga clic en el botón Incrustar situado en la parte superior derecha del generador de formularios.

A continuación, haga clic en Crear nueva página.

Dale un nombre a tu página y selecciona Vamos.

Esto le llevará a su editor de bloques de WordPress para una nueva página con su formulario ya incrustado en ella. Pulse Publicar para poner en marcha su nuevo formulario de selección de fecha de WordPress.

¡Enhorabuena! Su formulario con selector de fecha ya está publicado.

¡Y ahí lo tienes! Ahora ya sabes cómo añadir un formulario de WordPress con un selector de fecha a tu sitio web.

A continuación, pruebe las plantillas de formularios comerciales

Si quieres acelerar el proceso de creación de formularios, aquí tienes algunas plantillas de formularios empresariales que pueden ayudarte.

También puede consultar nuestra guía sobre cómo personalizar el formulario de restablecimiento de contraseña de WordPress.

Cree su formulario WordPress ahora

¿A qué está esperando? Empieza hoy mismo con el plugin de formularios para WordPress más potente.

Y no lo olvide, si le gusta este artículo, síganos en Facebook y Twitter.