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.
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.
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 gratuitopero 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 Virtual ES! 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".
Ahora nos dirigimos a la página principal, presionamos el botón "Crear Formulario" y en la ventana emergente, seleccionamos "Formulario blanco".
En la página que nos aparece, vamos a agregar el elemento "Nombre completo" hacía la plantilla en blanco de la siguiente forma:
También vamos a agregar el campo "Correo Electrónico" como se muestra en la captura:
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:
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:
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.
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:
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:
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:
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:
Y listo, ya hemos terminado de configurar el formulario.
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".
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:
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.
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:
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:
Si decides usarlo como página independiente, para que nuestro blog tenga un mejor rendimiento podemos condicionar el codigo.