Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo crear un formulario de WordPress con un selector de fecha (manera fácil)

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

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

Un campo de selección de fecha es una manera conveniente de capturar información relacionada con la fecha en sus formularios de WordPress. Por ejemplo, puede que necesites saber la fecha de nacimiento de tus usuarios, o que quieras que puedan concertar fácilmente una cita para tus servicios a través de tus formularios.

En este artículo, le mostraremos cómo crear fácilmente un formulario de WordPress con un selector de fecha.

How to Create a WordPress Form With a Date Picker

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

Un campo de selección de fecha en un formulario de WordPress es útil cuando desea que los usuarios introduzcan fechas. Algunos ejemplos comunes son:

  • Formularios de registro que piden a los usuarios que introduzcan su fecha de nacimiento.
  • Formularios de pedido para elegir la fecha y hora de entrega de un pedido.
  • Formularios de artículos de alquiler para seleccionar una fecha de recogida o devolución de un elemento / artículo de alquiler.
  • Formularios de solicitud de devolución de llamada para que los usuarios puedan comunicarle cuándo desean que nos pongamos en contacto con usted acerca de sus productos o servicios.
  • Formularios de solicitud de vacaciones para que los empleados puedan introducir las fechas de inicio y fin de su tiempo libre.
  • Formularios de cita o reserva para sitios web de alojamiento o servicios.

Un campo de entrada de fecha es una forma mucho más fácil para los usuarios de insertar fechas en comparación con escribirlas manualmente. Garantiza que el formato de la fecha sea el mismo en todos los formularios, lo que reduce los errores y mejora la experiencia del usuario.

Dicho esto, veamos cómo crear fácilmente un formulario de WordPress con un selector de fechas. Puedes utilizar estos enlaces rápidos para navegar por este artículo:

Paso 1: Instale el plugin WPForms y elija una plantilla

El primer paso es instalar WPForms. Es el mejor plugin de formularios de contacto para WordPress del mercado, que facilita enormemente la creación de todo tipo de formularios en tu sitio de WordPress, incluidos los formularios con campos de selección de fecha.

Para obtener instrucciones detalladas, puede consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Nota: Para esta guía, es necesario utilizar una versión premium de WPForms, ya que es donde el campo selector de fecha está disponible. Dicho esto, si utiliza nuestro cupón WPForms, entonces usted puede conseguir 50% de descuento del precio regular.

Puede ver nuestra reseña / valoración completa de WPForms para más detalles.

Una vez activado, diríjase a la página WPForms ” Añadir nuevo desde su escritorio de WordPress.

Clicking Add New in WPForms inside the WordPress admin panel

Accederá a la página “Seleccionar una plantilla”.

Antes de elegir una plantilla, es una buena idea ponerle un nombre al formulario de WordPress para poder identificarlo fácilmente más adelante.

Naming a new form in WPForms

Si se desplaza hacia abajo, verá un montón de plantillas de formularios prediseñadas disponibles aquí, muchas de las cuales ya incluyen el campo selector de fecha.

A modo de ejemplo, utilizaremos la plantilla Formulario de contacto simple y le añadiremos el campo selector de fecha. Pero no dudes en elegir la plantilla que más te convenga.

Una vez hecha su elección, sólo tiene que hacer clic en el botón “Usar plantilla”.

Clicking the Use Template button in WPForms

Paso 2: Añadir un campo selector de fecha a su formulario de WordPress

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

Por defecto, la plantilla del formulario de contacto simple solo tiene añadidos el nombre, la dirección de correo electrónico y el campo de comentarios.

Para fines de demostración, le mostraremos cómo añadir el campo selector de fecha a su formulario de WordPress. Pero si tu plantilla ya lo tiene, entonces puedes omitir la parte de edición de este paso.

Lo que tiene que hacer es desplazarse hasta la sección Campos de fantasía de la columna de la izquierda, donde verá el campo “Fecha / Hora”.

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

Dragging and dropping the Date Time field to the form builder in WPForms

Una vez hecho esto, haz clic en el campo “Fecha/Hora” para editarlo. Se abrirá la pestaña “Opciones de campo” en la parte izquierda de la pantalla.

Desde aquí, puede cambiar la etiqueta del campo, que por defecto es ‘Fecha / Hora’. Vamos a utilizar “Hora preferida para la llamada telefónica” para nuestro campo.

También puede cambiar el formato de fecha del campo utilizando el menú desplegable Formato. Las opciones son Fecha y Hora, Fecha o Solo Hora. Esto puede ser útil si desea utilizar sólo una fecha sin un campo de hora para recoger las fechas de nacimiento de los usuarios.

Aparte de eso, puede rellenar el texto de descripción para dar más contexto sobre lo que el usuario tiene que introducir en el campo.

Por último, puede marcar la casilla “Obligatorio” si desea que este campo sea obligatorio. Esto significa que el usuario tendrá que seleccionar una fecha y hora antes de poder enviar el formulario.

Una vez hecho esto, basta con hacer clic en el botón “Guardar” de la parte superior para guardar los ajustes del formulario.

Configuring the General settings of a form in WPForms

Consejo profesional: Si gestiona un sitio de alojamiento y desea que los usuarios introduzcan fechas concretas para su estancia, puede utilizar la plantilla Formulario de reserva de hotel. Incluye dos campos de selección de fecha: uno para la fecha de llegada y otro para la fecha de salida.

Paso 3: Configurar las opciones avanzadas del selector de fecha y hora

Por defecto, el campo de selección de fecha en su formulario de WordPress será un calendario con un menú desplegable de tiempo a su lado.

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

The default Date Time picker calendar in WPForms

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

Los usuarios pueden elegir la franja horaria que más les convenga.

The default time dropdown picker in WPForms

En algunos casos, puede que desee cambiar los ajustes del selector de fecha. Por ejemplo, puede que tu país siga los formatos de fecha y hora día/mes/año o 24 horas en lugar de los que aparecen por defecto.

Para ello, tendrá que cambiar a la pestaña “Avanzado” en la parte superior del panel lateral izquierdo.

Aquí puede ajustar el tamaño del campo de selección de fecha. A continuación, en la sección Fecha, puede cambiar el selector de fecha de un calendario a un menú desplegable de fechas.

Choosing the Date Dropdown type in WPForms

Cambiar el selector del calendario de fechas a un menú desplegable de fechas es una buena idea si el formulario tiene un espacio limitado y el calendario parece más bien pequeño.

Este es el aspecto del menú desplegable de fechas:

An example of WPForms' date dropdown menu

Debajo, puede cambiar el formato de fecha de mes/día/año (31/1/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 del calendario, también puedes insertar un 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 y no se confundan.

Configuring the date picker's advanced settings in WPForms

Además, puede activar el interruptor “Días límite” para ajustar el intervalo de fechas que se puede seleccionar. Esto le resultará útil si solo presta sus servicios durante los días laborables.

No dudes en desactivar también las fechas anteriores para evitar que se seleccionen.

The Limit Days and Disable Past Dates settings for the Date Time field in WPForms

A continuación, vamos a la sección “Hora” para cambiar el selector de hora.

Aquí puede cambiar el intervalo a 15 minutos o 1 hora en lugar de 30 minutos. También puede introducir aquí un marcador de posición para indicar el formato de hora que está utilizando.

El selector de hora es por defecto un reloj de 12 horas, pero puede cambiarlo a un reloj de 24 horas si lo prefiere.

Además, no dudes en activar el ajuste “Limitar horas” para establecer las horas de inicio y fin de tus servicios. De este modo, los usuarios no podrán concertar una cita fuera de su horario comercial.

Aparte de eso, puede introducir un nombre de clase CSS para el campo selector de fecha. Esta es una característica avanzada y opcional, pero puedes usarla para anular el estilo del formulario usando código más adelante.

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

Cuando esté satisfecho con su formulario, puede guardarlo al hacer clic en el botón “Guardar” situado en la esquina superior derecha de la pantalla.

Configuring the advanced settings of the time picker field in WPForms

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

Ya está listo para añadir su nuevo formulario con el selector de fechas a su sitio web WordPress. Para ello, simplemente haga clic en el botón ‘Incrustar’ en la parte superior del maquetador de formularios.

Aparecerá un mensaje / ventana emergente pidiéndote que selecciones una página existente a la que añadir 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.

The Embed popup in WPForms

Añadir 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’. A continuación, selecciona una de las páginas que ya tienes en tu blog o sitio web de WordPress y haz clic en “¡Vamos!”.

Choosing an existing page to add a WPForms form to

Si quieres añadir el formulario a una página nueva, sólo tienes que hacer clic en el botón “Crear página nueva”.

A continuación, dale un nombre a tu nueva página y haz clic en “¡Vamos!”.

Creating a new page to insert the WPForms form into

Ambos métodos le llevarán al editor de bloques, donde verá algunas instrucciones sobre cómo añadir el bloque WPForms.

Primero, haz clic en el botón “+” para añadir un bloque.

Clicking the add block button in the block editor to insert the WPForms block

A continuación, escriba ‘WPForms’ en la barra de búsqueda del bloque.

Basta con arrastrar y soltar el bloque donde mejor quede en la página.

Searching for the WPForms block in the block editor

Ahora sólo tienes que hacer clic en el menú desplegable.

A continuación, seleccione el formulario que acaba de crear.

Select a WPForms form to insert in the block editor

En la barra lateral de ajustes del bloque, puede personalizar el campo del formulario, la etiqueta y los estilos de los botones para que tengan un aspecto más agradable con su tema de WordPress.

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

The WPForms block settings sidebar in the block editor

Ahora puede hacer clic en el botón “Actualizar” o “Publicar” para que el formulario aparezca en su sitio web.

En su sitio web WordPress debería tener este aspecto:

An example of a contact form with a date picker made with WPForms

Si desea insertar el formulario en una entrada en lugar de en una página, puede crear una nueva entrada o abrir una existente en el editor de bloques.

Después de eso, sólo tienes que seguir los mismos pasos para añadir el bloque WPForms a una página como en este método.

Añadir el bloque WPForms a un área preparada para widgets

Si utilizas un tema clásico de WordPress, puede que quieras mostrar tu formulario en una cabecera, pie de página o barra lateral preparada para widgets. Esto puede ser una buena idea si tu formulario es bastante corto y no ocupa demasiado espacio.

Nota: Si está utilizando un tema de bloque, entonces este método no funcionará para su sitio web.

Para ello, vaya a Apariencia “ Widgets en el área de administrador de WordPress. A continuación, vaya a la zona de widgets que desee y haga clic en el botón blanco “+” para añadir un bloque. Después, puede buscar el bloque WPForms.

Si ve dos opciones, puede elegir cualquiera de ellas, ya que ambas hacen lo mismo.

Adding the WPForms block in a widget-ready area

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

Cuando esté satisfecho con los cambios, haga clic en el botón “Actualizar”.

The WPForms widget settings sidebar

¡Eso es!

Este es el aspecto de nuestro formulario en la parte inferior de una entrada de blog de WordPress:

An example of a WPForms form widget with a date picker field

Incrustar su formulario de WordPress con un shortcode

Si el bloque o widget WPForms no funciona, también puede añadir su formulario de WordPress utilizando un shortcode.

En la ventana emergente “Incrustar en una página”, simplemente haga clic en el enlace “utilizar un shortcode”. Verás un shortcode que puedes copiar y pegar en una página, entrada o widget.

Clicking the use a shortcode link in the WPForms embed popup

Para más información sobre cómo utilizar shortcodes, lea nuestro artículo sobre cómo añadir un shortcode en WordPress.

Últimos consejos para optimizar su formulario de WordPress

Ahora que ya sabes cómo crear un formulario de WordPress con un selector de fecha, vamos a cubrir los mejores consejos para llevar tus formularios al siguiente nivel:

  • Envíe correos electrónicos de confirmación a los remitentes de sus formularios – De esta forma, los usuarios recibirán un aviso de que ha recibido correctamente su entrada, y no olvidarán qué fecha u hora han elegido.
  • Acepte pagos en línea en sus formulariosWPForms es compatible con pasarelas de pago populares como Stripe, PayPal, Square y Authorize.Net. Puede cobrar pagos únicos o periódicos, y no hay cuotas de transacción adicionales.
  • Haga que sus formularios más largos sean conversacionales – Si tiene un formulario de registro para un evento o un usuario que necesita capturar mucha información, hacerlo conversacional puede aumentar la tasa de cumplimentación del formulario.
  • Evite el spam en los formularios de contactoPuede activar la protección antispam incorporada en WPForms y la casilla de verificación reCAPTCHA para filtrar nuestras entradas / registros de formularios con spam.

Esperamos que este artículo te haya ayudado a aprender cómo crear un formulario de WordPress con un selector de fechas. Puede que también quieras comprobar nuestro artículo sobre cómo crear un boletín de correo electrónico y nuestra lista definitiva de los mejores plugins de WordPress para encuestas.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

3 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      Reach out to WPForms’ support for the current methods of limiting the days of the week :)

      Administrador

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.