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

¿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.

¿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.

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.

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.

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 de intervalo de fechas.

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”.

Paso 2: Añadir 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 un campo 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.

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.

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

Por defecto, el campo de selección de rango de fechas 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.

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.

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 selector de fecha. A continuación, en la sección Fecha, puede cambiar el intervalo de fechas de un calendario a un menú desplegable de fechas.

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:

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.

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.

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 de intervalo de fechas. 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 nuevo formulario, puede guardarlo al hacer clic en el botón “Guardar” situado en la esquina superior derecha de la pantalla.

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.

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!”.

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!”.

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.

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.

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

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

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.

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:

Si desea insertar el widget de 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.

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”.

¡Eso es!

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

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.

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 añadir un campo selector de fecha a tus formularios, vamos a ver 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 formularios – WPForms 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 contacto – Puede activar la protección antispam incorporada en WPForms y la casilla de verificación reCAPTCHA para filtrar nuestras entradas / registros de formularios con spam.
• Siga nuestra lista de mejores prácticas de diseño de formularios de contacto – Esta guía puede guiarle en el diseño del mejor formulario de WordPress para convertir visitantes habituales en clientes potenciales.
• Lea nuestra guía de expertos sobre la creación de formularios interactivos: el cofundador de WPForms, Jared Atchison, le da consejos sobre cómo hacer que los formularios sean más atractivos, desde el uso de la lógica condicional hasta la adición de contenido de medios enriquecidos.

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 formulario multipágina en WordPress y nuestra lista definitiva de los mejores plugins de encuestas para WordPress.

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.