Seleccionar página
Hola, me llamo Antonio Mtz, soy el iniciador de Divicon que hace referencia a (DIVI y CONferencias). Soy diseñador gráfico, con especialidad en imagen corporativa, me gusta mucho la ilustración, el 3D, Motion graphic, fotografía, tipografía. jajaja bueno todo lo que se refiere al diseño.

importanteleeme-divi-wordpress

Hola amigos, estuve probando un nuevo plugin que se llama JQuery Mask Plugin nos ayudara a enmascarar nuestras cajas de texto con el fin de facilitarle al usuario la captura de datos. Podemos añadir fecha y hora al formulario de divi themes.

Esta es una solución podria llamarse improvisada por que cuando actualicen el formulario de divi themes ya no sera vigente mientras si lo es 😀

He visto en los grupos de facebook que mencionan que añadiran al formulario de divi un calendario y cosas así.

pero en lo que llega me encargue de buscar una pequeña solución. Este formulario no se conecta a base de datos, por si pensaban que llega aun excel o xml, estos correos llegan normales como cualquier otro correo, la diferencia es que se puede añadir la hora y la fecha como correo de registro ejemplo :

ejemplo-formulario-JQuery-Mask-Plugin-contact form-divi themes
Esto ya lo pueden capturar ustedes, si no tienen muchos correos, o si son una empresa grande, basta con comprar el plugin que haga el trabajo.
Pero si eres una persona que quiere experimentar y no le tiene miedo al trabajo puede funcionarte.

Ahorita en lo que escribo estas líneas, y como mi sopa que mi novia me dejo hecha para poder hacer el tutorial xD, creo que podriamos
implementarlo en el Módulo de Call Action y probar si funciona, asi podria llegar a chipmail. ¿Hay algun valiente que lo quiera probar?. si llega a funcionar que nos diga.

Bueno el enlace del plugin se encuentra en: JQuery Mask Plugin
Obtener la dirección del script y poder instarlo es desde aquí: CDNJS.COM

ver demo tutoriales divi elegant

JQuery Mask Plugin contact form divi themes

JQuery Mask instalando

1.- Vamos a instar nuestro script de jquery
DIVI —-> THEME OPTIONS  —-> INTEGRACIÓN <Head>
una vez que tenemos instalado nuesto script podemos hacer nuestro formulario de contacto o ir por nuestras ID a nuestro formulario de contacto

 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs
/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js">
</script>

integracion-JQuery Mask Plugin contact form divi themes

Formulario de contacto divi

Ejemplo de como añadir la ID a nuestro formulario
Como estamos en un nivel avanzado, solo mostrare algunas capturas y una explicación en general,
debemos de añadir los ID como siempre se han hecho en ingles, pero cuando añadamos el de tiempo o la hora estos deben de ser Time o Date poner atención en las mayúsculas
ejemplo:

propiedades-JQuery Mask Plugin contact form divi themes

 

ID-JQuery Mask Plugin contact form divi themes

 

Obtener ID para scrip jquery plugin

Desde firefox o chrome debe de ser lo mismo click derecho inspector de elemento, una vez que lo hayamos encontrado doble click y copiar

ID-elemeto-JQuery Mask Plugin contact form divi themes

 

#et_pb_contact_telephone_1

Añadimos nuestros ID a Jquery Plugin mask

DIVI —-> THEME OPTIONS  —-> INTEGRACIÓN  <Head>
Colocamos el siguiente código, recuerden añadir  al inicio <script type=”text/javascript”> y al final </script>

jQuery(document).ready(function( $ ){
//Add mask to contact form
$("#et_pb_contact_telephone_1").mask('+99 9999-9999');
	$('#et_pb_contact_date_1').mask('99/99/9999');
$('#et_pb_contact_time_1').mask('99:99');

});

Ejemplo de como debe de quedar nuestro código

head-JQuery Mask Plugin contact form divi themes

Al parecer hermos terminado al final tendran un lindo formulario, recuerden comentar nuestro trabajo y valorarlo es más rápido que crear los tutoriales xD
para finalizar le dejamos el tutorial de box-shadow para el formulario de contacto divi

seccion-video-divithemes-tutoriales

descargar-divi-json-wordpress

 

¿Te parece interesante este artículo?
Puntaje
[Total: 3 Average: 5]

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Pin It on Pinterest

Shares