Imanol Terán

• Diseñador y desarrollador frontend
• Fundador widdiapps.com
• Academia de cursos itermar.io

Caricatura realizada por @oneeyedman

itermar.io

• Cursos de diseño web, WordPress, HTML, CSS, productividad, emprendimiento...
• Descargas de themes, plugins, guías...
• Todo por 10 €/mes

Con el código ENPRESADIGITALA

1 MES

GRATIS

INTRODUCCIÓN

INTRODUCCIÓN

• ​En muchos proyectos web, necesitamos utilizar formularios
• Tenemos distintas opciones:
  • Formulario HTML5
  • Plugins
  • Google Forms

INTRODUCCIÓN

• ​Utilizar Google Forms es una muy buena opción para crear nuestros formularios
• Nos permite crear formularios de forma muy sencilla
• Cada vez que se rellena un formulario, podemos recoger los datos en una hoja de cálculo de Google Spreadsheets
• A partir de ahí, podemos hacer lo que queramos con esos datos, APIS de Google...etc

INTRODUCCIÓN

• ​El mayor problema: la personalización
  • Podemos personalizar los formularios, pero eligiendo entre los distintos estilos ofrecidos por Google
  • El usuario, siempre va a ver que es un formulario de Google
  • Esto dificulta el incluirlos en nuestros proyectos web

INTRODUCCIÓN

• ​Perdemos armonía y coherencia visual en la web, por la diferencia entre nuestros estilos y los de Google
• Se puede solucionar, podemos personalizarlos totalmente, sin perder todas las bondades que nos ofrece:
  • Creación sencilla de formulario
  • Recogida de datos

CREACIÓN DE UN GOOGLE FORM

CREACIÓN DE UN GOOGLE FORM

• Ir a la web de Google Forms
• Entrar con nuestra cuenta de usuario de Google
• Crear un nuevo formulario
  • Dar título
  • Ir añadiendo campos

CREACIÓN DE UN GOOGLE FORM

• Hay muchos tipos de campos diferentes
  • Respuesta corta
  • Respuesta larga
  • Selección múltiple
  • Casilla de selección
  • Desplegable
  • Subida de archivos
  • Escala lineal
  • Fecha y hora...

CREACIÓN DE UN GOOGLE FORM

• Podemos validad campos, también con reglas como detectar DNI
• En cualquier momento, durante la creación del formulario, podemos previsualizar cómo está quedando
• Una vez tengamos añadidos y configurados todos los campos necesarios, podemos compartirlo o, integrarlo en nuestra propia página web

INTEGRACIÓN EN NUESTRA PÁGINA WEB

INTEGRACIÓN EN NUESTRA PÁGINA WEB

• Una vez creado el formulario, podemos proceder a integrarlo en nuestra web
• Debemos acceder al formulario publicado y, mediante el inspector, copiar todo el código relativo al formulario
  • <form></form>

INTEGRACIÓN EN NUESTRA PÁGINA WEB

• Nos encontramos con un pequeño problema:
  • Nueva versión de Google Forms no permite personalización
  • Debemos trabajar con la versión anterior
  • Perdemos algunas cosas, pero ganamos integración y personalización

INTEGRACIÓN EN NUESTRA PÁGINA WEB

• Google nos da posibilidad de volver a la versión antigua

INTEGRACIÓN EN NUESTRA PÁGINA WEB

• Hay veces que la opción de volver a la versión antigua puede estar deshabilitada
• Varias formas de solucionarlo:
  • Limpiar cookies y caché
  • Navegación privada
  • Campos de tipo no aceptado por versión antigua *

CAMBIOS A REALIZAR EN EL CÓDIGO

CAMBIOS A REALIZAR EN EL CÓDIGO

• En realidad, no tenemos que modificar nada en el código
• Mediante en inspector del navegador
  • Seleccionar etiqueta <form>
  • "Editar como HTML"
  • Copiar y pegar en nuestro HTML

DAR ESTILOS AL FORMULARIO

DAR ESTILOS AL FORMULARIO

• Hay que inspeccionar el código para saber qué elementos debemos modificar mediante CSS
• Varían ligeramente de los tags de HTML
  • Clases e IDs asignados por Google
• Una vez identificados, podemos darle los estilos que queramos, para que siga la coherencia de nuestro diseño
• Además, podemos eliminar logos y textos de Google

REDIRECCIONAR A PÁGINA PROPIA

REDIRECCIONAR A PÁGINA PROPIA

• Una vez tenemos nuestro formulario personalizado e integrado en nuestra web, nos falta un último detalle
• Al enviar formulario de Google --> Nos redirecciona a una página de Google Forms
  • Perdemos estilos
  • No podemos volver a nuestro formulario

REDIRECCIONAR A PÁGINA PROPIA

• Lo ideal es que creemos una página dentro de nuestra web, a la que redirigir a los visitantes cada vez que rellenen un formulario
  • 1: Creamos un iframe donde indicamos web de destino

• • 2: Lo añadimos como target al hacer submit en el form

EXTRA

GOOGLE API

• Una de las opciones más interesantes que nos proporciona el utilizar Google Sheets para almacenar los datos de un formulario, es todo lo que podemos hacer después con esos datos
• Por ejemplo: Generar acreditaciones en PDF con código QR para un evento.

GOOGLE API

// 1. Crear plantilla de documento en Google Docs y copiar el ID
var TEMPLATE_ID = 'ID_del_documento'

// 2. Especifica un nombre para el PDF generado, déjalo vacío para utilizar
//el nombre del template o especifica el nombre en la hoja de cálculo
var PDF_FILE_NAME = 'NombrePDF'



// Constantes
// ---------

// Selecciona determinadas columnas de tu Sheet
var FILE_NAME_COLUMN_NAME = 'File Name'
var EMAIL_COLUMN_NAME = 'Email'
var NAME = 'Name'
var TARGET_FOLDER = 'ID_de_la_carpeta_de_destino_de_las_acreditaciones'

/**
 * Crear un nuevo item de menú en la Google Sheet
 */

function onOpen() {

  SpreadsheetApp
    .getUi()
    .createMenu('Generar Acreditación')
    .addItem('Generar', 'createPdf')
    .addToUi()

} // onOpen()

/**  
 * Crear PDF volcando datos de la fila activa en los campos definidos en el template
 */

function createPdf() {

  var ui = SpreadsheetApp.getUi()

  if (TEMPLATE_ID === '') {
    
    ui.alert('TEMPLATE_ID tiene que estar definido en code.gs')
    return
  }

  // Configurar el acceso al template y la Google Sheet
  
  var copyFile = DriveApp.getFileById(TEMPLATE_ID).makeCopy(),
      copyId = copyFile.getId(),
      copyDoc = DocumentApp.openById(copyId),
      copyBody = copyDoc.getBody(),
      activeSheet = SpreadsheetApp.getActiveSheet(),
      numberOfColumns = activeSheet.getLastColumn(),
      activeRowIndex = activeSheet.getActiveRange().getRowIndex(),
      activeRow = activeSheet.getRange(activeRowIndex, 1, 1, numberOfColumns).getValues(),
      headerRow = activeSheet.getRange(1, 1, 1, numberOfColumns).getValues(),
      columnIndex = 0,
      headerValue,
      activeCell,
      ID = null,
      name = null,
      recipient = null;
  
  

 
  // Reemplazar con valores de la hoja de cálculo
 
  
  for (;columnIndex < headerRow[0].length; columnIndex++) {
    
    headerValue = headerRow[0][columnIndex]
    activeCell = activeRow[0][columnIndex]
    
    
    copyBody.replaceText('%' + headerValue + '%', activeCell)
    
    
    if (headerValue === NAME) {
    
      name = activeCell
      
    } else if (headerValue === EMAIL_COLUMN_NAME) {
    
      recipient = activeCell
    
    }
     
    if (headerValue === NAME) {
    
      name = activeCell
    }
    
    // Crear código QR
    var image = "https://chart.googleapis.com/chart?chs=150x80&cht=qr&chl="+name;
    var blob = UrlFetchApp.fetch(image).getBlob();
  }
  
  var myImage = copyBody.appendImage(blob);

  
  // Crear fichero PDF, renombrarlo si es necesario, borrar la copia del doc y enviar
    
  copyDoc.saveAndClose()

  var newFile = DriveApp.createFile(copyFile.getAs('application/pdf'))  
  var targetFolder = DriveApp.getFolderById(TARGET_FOLDER);
  targetFolder.addFile(newFile)
  
  

  if (PDF_FILE_NAME !== '') {
  
    newFile.setName(name+"_"+PDF_FILE_NAME)
    
  } else if (ID !== null){

    newFile.setName(ID)
  }
  
  copyFile.setTrashed(true);
  

  
  ui.alert('Acreditación generada!!!')
  
} // createPdf()

DEMO

CASOS DE USO

CASOS DE USO

• http://www.spri.eus/eventos_ext/mundurabegira2017/inscripcion.html
• http://www.bilbao700.eus/emocionacarola/#participa