Formulario de google que se adapta a cualquier plantilla


Este es uno de los requerimientos de una pagina web: un formulario de contacto, y aunque la mayoría te puede contactar hoy en día a través de facebook, whatsapp o teléfono no hay como tener un atractivo formulario de contacto en donde almacenar la informacion de sus posibles clientes.

Google siempre nos brinda muchas herramientas gratuitas y de calidad y uno de ellos son sus formularios pero tienen una pega: que al querer implementarlo en nuestra web no resulta muy atractivo y lo que se quiere hacer es quitar todo lo que no es necesario en el formulario para que quede con el mas mínimo código e implementarlo en nuestro sitio web con los estilos css que queramos quedando algo como lo que muestra la primera y magen que precede este post.

Para lograr esto es un poco engorroso, créeme pase bastante tiempo entre prueba y error vamos a seguir los siguientes pasos:

1. Crear el formulario de contacto en google forms. (obviamente)

Este paso no hay que mostrar muchos detalles ya que es muy simple de realizar nada mas hay que entrar a la siguiente pagina con su nombre de usuario y contraseña de su cuenta de Gmail o google:
https://docs.google.com/forms, y crear un formulario con las items que quieras.

Formulario de Google


Después podrás ver el formulario dándole click al icono con forma de ojo en la parte superior


2. Reducir el código resultante.

Para este paso primero quiero mostrarles el codigo que nos entrega google para el formulario que es una maraña de lineas de código bastante extensa, para ello vamos a darle click derecho fuera y en el menu que aparece clikcar en "Ver codigo fuente de la pagina", te mostrara una pagina tan larga que hasta asusta.


Ahora si vamos por la magia de reducir todo este codigo a tan solo unas pocas linea y para este propósito nos va a ayudar una web que se la mostrare a continuación pero antes primero habrá que copiar el enlace del formulario, la web a la que hago mencion es:



Ahora pegas en la casilla donde dice "Google Forms URL" y das click en "Get the HTML" y haciendo esto en unos momentos nos presenta abajo en la pestaña "Source Code" el codigo html necesario para nuestro proyecto.



3. Reducir aun mas el código.

Ya con este codigo puedes trabajar pero te cuento que se puede reducir mas el codigo, parece increíble pero lo es, manos a la obra:

Primero llevemos este codigo a un programa de codigo en este caso voy a usar codepen.io para dejarles mas abajo el enlace.


y estos son los elementos que puedes quitar:
  • Los comentarios
  • el <h2>y su contenido</h2>
  • el <fieldset></fieldset> pero no su contenido solo las etiquetas
  • <legend>y su contenido</legend>
  • las etiquetas div pero no su contenido
  • Todo lo que empieza por <input type="hidden"
  • los id de los input tambien se pueden borrar quedando asi:

Y el formulario quedo asi:


quedaron las casillas una al lado de la otra si verificas veras que el formulario funciona nada mas es llenarlo recordando el orden de las etiquetas, en este caso es:
  • Nombre
  • correo
  • celular
  • Mensaje
4. Colocar valores que faltan.

Ahora que recordamos el orden de la etiquetas podemos colocarlas antes de los input encerrandolas con un div si quieres y con css acomodar el formulario a tu gusto, pero a mi gusto prefiero ponerle un placeholder a cada uno asi:


También para estar a las ultimas tendencias del desarrollo web no olvidar los tipos de inputs a saber en este caso:
  • Para el correo type="email"
  • Para el celular type="tel"
  • También Cambiar donde dice submit se puede cambiar donde dice "value"
  • y colocar el valor "requerido" con required como se ve a continuación

5. Evitar que nos envie a la pagina del formulario después de llenarlo.

Si hiciste la prueba te habrás dado cuenta que al presionar "Enviar" nos sale una pagina que nos sigue dañando la estetica de nuestro sitio asi vamos a arreglarlo, colocaremos un codigo para que envez de eso nos muestre un mensaje con javascript.


De forma alternativa tambien se puede redirigir a otra pagina de agradecimiento, el codigo esta comentado.

6. Aplicarle los estilos Css

Si sabes de css puedes hacer de este codigo maravillas pero si no pues abajo de dejo el enlace a codepen donde tengo el codigo ya terminado.
See the Pen rNNwJvm by John Paez (@jjpr79) on CodePen.

No hay comentarios.:

Publicar un comentario