Formulario de contacto para Blogger con jotform

formulario para blogger gratis jotform formulario gratis Blogger

Demostracion Video JotForm

El dia de hoy vamos a aprender a crear un formulario de contacto gratis para Blogger mediante jotform, aprender a usarlo como widget o insertar el formulario en una página estática. Esta entrada se escribe en respuesta a un pedido. También se encuentra en la categoría widget ya que se puede usar como tal.


JotForm

He tenido la oportunidad de probar una gran cantidad de plataformas que nos permiten crear un formulario de contacto gratis, y aunque las volviera a probar seguiría optando por jotform, de hecho, es el formulario que uso en zkreations.


Desde su simplicidad para crear formularios, hasta su gran repertorio de widgets e increible personalización, las posibilidades son muchas y todo gratis.


JotForm también cuenta con planes para mejorar la versión gratuita, sin embargo, no sentiras en ningún momento que la plataforma te presiona para adquirirlos. Si sientes la necesidad de aumentar la capacidad de tu plan gratuito pero no tienes como pagarlo, jotform te permite ampliarlo si realizas las acciones de la pestaña Get More desde configuración de la cuenta.


Personalmente considero a jotform la mejor opción para Blogger si de crear formularios se refiere, y la más completa. Si deseas crear un formulario por tu cuenta justo ahora, puedes hacerlo, pero si lo que deseas es integrarlo con blogger para optimizarlo y obtener diseños desarrollados en zkreations, te invito a seguir leyendo.


Crear formulario blanco

Primero vamos a crear una cuenta en la plataforma. Una vez creada hay que quitar el nuevo modelo de formularios, para ello vamos a configuración de la cuenta, deshabilitamos "Enable New Form Layout" y dejamos marcado "Version 4".


jotform login created version 4 layout

Ahora nos dirigimos a la página principal, presionamos el botón "Crear Formulario" y en la ventana emergente, seleccionamos "Formulario blanco".


jotform login created form

En la página que nos aparece, vamos a agregar el elemento "Nombre completo" hacía la plantilla en blanco de la siguiente forma:


jotform tutorial custom

También vamos a agregar el campo "Correo Electrónico" como se muestra en la captura:


jotform tutorial español input email correo

Y lo más importante, el campo de texto que le permitirá al usuario redactar el mensaje, para ello agregamos un "Campo de Texto Largo" y le damos un nombre:


jotform tutorial textarea mensaje

Para contrarrestar el spam, les sugiero agregar el captcha o verificación de texto, esta es solo mi recomendación, no es obligatorio si no se quiere, aun asi, lo recomiendo mucho:


jotform tutorial control spam captcha

Manteniendo presionada la tecla CTRL damos un clic en todos los campos para seleccionarlos, se nos desplegará un menú superior, alli presionaremos el botón "Requerir", de esta forma obligamos a rellenar todos los campos y evitamos los mensajes vacíos.


jotform tutorial required requerido validar formulario

Si lo hicimos correctamente cada uno de nuestros campos debería tener un asterisco rojo, lo que indica que es un campo obligatorio para validar el formulario:


jotform tutorial required requerido validar formulario

Ahora vamos a dirigirnos a "Ajustes" y a la pestaña "Form Settings", presionamos el botón "Mostrar más opciones" y desactivamos la opción "Datos cifrados del formulario" de la siguiente forma:


jotform formulario encriptado disable desactivar

Desde la pestaña "Correos" podemos configurar los destinatarios, el formato, las respuestas, entre otras opciones. Si no quieren cambiar nada dejenlo como esta y los mensajes se enviarán al correo que utilizaron para registrarse:


jotform correo formato

Desde la pestaña "Página gracias" puedes modificar la página que verán tus usuarios al enviar un mensaje de forma exitosa. También puedes crear una página estática en tu blog y agregar el enlace a tu formulario:


jotform page gracias thanks

Y listo, ya hemos terminado de configurar el formulario. Si de todas formas te quedaron dudas, puedes seguir los mismo pasos en el video de configuración.


Integrar formulario en Blogger

Insertar el código es la mejor manera de hacerlo, y para ello vamos a dirigirnos a la sección "Publicar", a la pestaña "Embed" en donde seleccionaremos "Código fuente", por último presionamos el botón "Bajar código fuente".


jotform insertar codigo fuente cdn

Descomprimimos el rar y abrimos el documento.html con cualquier editor de código o de texto. Primero vamos a copiar el código javascript del formulario, este se encuentra arriba de </head> y lo haremos como se muestra en la captura:


jotform insertar codigo fuente cdn

Ahora nos dirigimos a nuestro panel de administración en blogger, la pestaña temas, edicion html y pegamos el código arriba de </body>. También buscaremos </head> y arriba pegamos el siguiente codigo:


<link href='//cdn.rawgit.com/zkreations/Canvas.xml/master/misc/forms/dist/daniel-forms.min.css' rel='stylesheet'/>
<link href='//cdn.rawgit.com/zkreations/Canvas.xml/master/misc/forms/dist/daniel-forms.default.min.css' rel='stylesheet'/>

He escrito y dividido los estilos en dos documentos porque a futuro les voy compartir mas temas y lo único que necesitan hacer para instalarlos es cambiar el nombre del archivo daniel-forms.default.min.css.


Ya tenemos todo listo para usar el formulario. Si algo no te quedo claro, puedes seguir estos pasos desde el video de configuración.


Instalar como widget

Para ello creamos un Gadget HTML/Javascript y de contenido vamos a pegar el código html de nuestro formulario, el codigo empieza desde <form class="jotform-form"> y termina en </form>. Posteriormente agregamos la class daniel-forms:


jotform widget gadget blogger

Guardamos los cambios del widget y ya podemos verlo funcionando en el blog.


Instalar como Página independiente

El procedimiento es el mismo, la única diferencia es que en lugar de un widget vamos a pegar el formulario de contacto en una página estática de Blogger con el editor en modo html:


jotform pagina estatica formulario contacto blogger

Si decides usarlo como página independiente, para que nuestro blog tenga un mejor rendimiento podemos condicionar el codigo, los cambios a realizar estan explicados en el video de instalación que publique para esta entrada.


Eso a sido todo amigos, espero que este tutorial les haya servido y de ser así no olviden compartirlo en sus redes sociales, de eso forma ayudaran a mas personas y tambien me ayudaria mucho.