Continuamos con la temática de los formularios de contacto en Divi…
Recordemos que en el anterior artículo vimos cómo crear y configurar uno, además de un súper truco para saber desde qué URL se enviaba el mensaje. Puedes ver ese artículo desde aquí:
Cómo crear formularios de contacto en Divi y TRUCO para saber desde qué url se envía
El Módulo formulario de contacto de Divi nos ofrece una gran variedad de tipos de campos que podemos utilizar. Pero, lamentablemente, no hay uno especializado en selector de fecha.
Podemos utilizar un campo simple de texto para que el usuario ingrese manualmente la fecha como un texto, peeero podemos mejorar mucho más la experiencia de usuario agregando una interfaz más interactiva (un date picker). ¿Cómo? Con un súper truco que veremos más abajo. Sigue leyendo…
Licencia Divi para tu sitio web
Si aún no cuentas con el tema Divi, o lo tienes instalado pero sin licencia, puedes utilizar el servicio de activación de licencias de Rapihosting (Nuestro proveedor de servicios de Hosting WordPress recomendado). Tendrás instalado en tu sitio el tema Divi, con una licencia lifetime, por un súper precio. Dale un vistazo a todas las licencias WordPress que manejan, desde aquí.
Ahora sí, empecemos con el procedimiento para mostrar el selector de fecha en el formulario de contacto Divi:
PASO 1: Ajustes en el formulario de contacto de Divi
En nuestro formulario ya creado, debemos agregar un campo nuevo para la fecha.
El título del nuevo campo (lo que se muestra al usuario) puede ser cualquiera, para el ejemplo voy a poner: “Seleccionar fecha”.
Lo que sí es sumamente importante en éste paso, es que el valor de la identificación del campo sea: “vic-date” (ya que el código que usaremos más adelante, trabaja con ese identificador). La configuración del campo quedaría de la siguiente manera:
Como para cualquier campo de formulario de contacto de Divi, no olvidar añadir el identificador al patrón del mensaje, para que los datos se envíen.
Si no recuerdas bien cómo configurar esa parte, puedes darle un vistazo a nuestro artículo anterior: Cómo crear y configurar formularios de contacto en Divi y TRUCO para saber desde qué url se envía
PASO 2: Agregando el código para mostrar el selector de fecha en el formulario Divi
Ahora, simplemente debemos agregar un módulo código y pegar en él el fragmento de código que he dejado listo para copiar y pegar.
Lo que hará ese snippet es llamar a una librería llamada Jquery UI, ejecutar un módulo de selector de fecha (Datepicker), configurar los términos en español y mostrar el selector cuando se haga click en el campo cuyo identificador sea “vic-date”. ¿Hermoso, verdad?
Para que puedan visualizar el snippet de éste tutorial, solo dejen su correo en el formulario de abajo y hagan click al botón: “Ver códigos”.
Y automáticamente serán visibles…
Adicionalmente, se te enviará a tu bandeja de entrada un mail de confirmación para ser añadido a mi lista de correos. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos geniales cómo éste, códigos, tutoriales, promociones y sorteos de productos de la sección de Recursos Premium. Además que tenemos una comunicación más directa para compartir y resolver dudas. 🙂
Gracias por solicitar suscribirte, pero aún falta un paso…
IMPORTANTE – ¡Aún no estás suscrito a mi lista!
Revisa tu bandeja de entrada, se te ha enviado un correo de confirmación. Confirma tu correo para ser parte de la comunidad de mi lista y compartirte nuevos tutoriales, artículos, códigos, recursos, promociones y comunicarnos directamente 🙂
Pdta: Ya puedes ver los códigos del tutorial debajo de éste mensaje
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js">
</script>
<style>
:root {
/* Pon tu color principal aquí */
--color-principal-selector-fecha: #ff8450;
}
</style>
<script>
(function( $ ) {
$(document).ready(function(){
$("input[data-original_id='vic-date']").datepicker({
/* Configuración */
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate:new Date('2022/01/25'),
maxDate:new Date('2024/08/25'),
// beforeShowDay: $.datepicker.noWeekends,
});
$(function(){
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '< Ant',
nextText: 'Sig >',
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
//dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['es']);
});
});
})( jQuery );
</script>
<style>
.ui-datepicker tbody td span, .ui-datepicker tbody td a {
text-align:center;
border:none !important;
border-radius:10%;
transition: ease 0.2s;
}
.ui-datepicker tbody td a.ui-state-highlight {
background-color:#c9c9c9;
}
.ui-datepicker tbody td a:hover {
background-color:var(--color-principal-selector-fecha);
color:white;
}
.ui-datepicker tbody td a.ui-state-active {
background-color:var(--color-principal-selector-fecha);
}
.ui-datepicker {
border:solid 1px #e9e9e9 !important;
padding:15px 15px;
border-radius:8px;
}
.ui-datepicker thead th span {
font-weight:400;
}
</style>
<Una vez pegado el código en el módulo, debería quedarte así:
Y listo. No olvidar guardar cambios.
PASO 3: Configurando el selector de fecha (Date Picker)
Hasta éste punto, el selector de fecha ya debería aparecer al hacer click sobre el nuevo campo que creamos. Vamos a ver algunas configuraciones importantes.
- Primero, verán una sección que dice: “Pon tu color principal aquí”. Debajo pueden poner el código del color que desean que use el selector. El color aparece para las fechas seleccionadas y cuando se pasa el ratón sobre ellas.
- Mas abajo, verán una sección que dice: “Configuración”, allí podrán modificar lo siguiente:
- dateFormat: Aquí pueden poner el formato en el que desean que sean guardadas las fechas. (Si desean, pueden dejarlo como está)
- changeMonth: Si lo dejan en true, permitirá que se seleccione un mes específico en un menú despegable. Si lo ponen en false, no se podrá modificar de esa forma.
- changeYear: Si lo dejan en true, permitirá que se seleccione un año específico en un menú despegable. Si lo ponen en false, no se podrá modificar de esa forma.
- minDate: ¿Desde que fecha se puede empezar a seleccionar?.
- maxDate: ¿Hasta que fecha máxima se puede seleccionar?.
- beforeShowDay: Ésta sección está bloqueada por dos slash //, si desean que los fines de semana (Sábados y Domingos) no puedan ser seleccionados, Borren los slashes.
Viendo los resultados
Como decía, el selector de fecha ya estará activo, bastará con que el usuario haga click al campo para que aparezca la interfaz interactiva. Y al seleccionar una fecha, el dato se guardará en el mismo campo. Una obra de arte.
Si te gustan mis tutoriales, no olvides confirmar tu correo para notificarte cuando hayan nuevos. Nos vemos (¿leemos?) en el próximo artículo.
Ejemplo en Vivo
Haz click en el campo: “Click aquí para seleccionar fecha”, para ver el efecto:
0 comentarios