Google Docs permite crear formularios para recolectar datos e incorporarlos en hojas de cálculo. Ya que el sistema es un poco limitado en cuanto a la cuestión visual y el diseño de los formularios les dejo unas ideas de como modificarlos con CSS y mostrarlos con ventanas del tipo Lightbox.Si bien se ofrecen algunos diseños para elegir, la posibilidad de retocar gráficamente los formularios a nuestro gusto y necesidades es un poco limitada. Por eso comparto con ustedes algunas posibilidades a tener en cuenta.
Estilizando con CSS
En este ejemplo no usaremos la url propia del formulario, que le asigna Google Docs, sino que nos valdremos de sus elementos.
Nos dirigimos a la vista online del mismo y observamos el código fuente de la página. Debemos copiar el código HTML que se encuentra entre las etiquetas <body> y </body>. A ese código podemos pegarlo en nuestro blog dentro de un post o una página.
De esta manera ya tenemos el formulario incorporado, ahora podemos establecer los estilos CSS que más nos gusten, incluso traducir un par de cosas (como el "Required" para los campos obligatorios o el "Submit" del botón de envío). Hay que tener cuidado de no modificar los identificadores de cada campo ("id") porque sino dejará de funcionar.
Las principales etiquetas CSS son:
.ss-form-container{}
.ss-q-title{}
.ss-q-submit{}
.ss-form-entry{}
.ss-q-short{}
.ss-q-submit{}
.ss-q-title{}
.ss-q-submit{}
.ss-form-entry{}
.ss-q-short{}
.ss-q-submit{}
Aquí pueden ver un ejemplo totalmente funcional.
En esta imagen pueden ver la aplicación de los estilos del ejemplo.
Mostrar con ventanas modales
Antes de avanzar pueden ver un ejemplo de cómo quedan.
Vamos a utilizar dos scripts de JQuery, "Fancybox" y "Facebox".
Fancybox
Para esta opción hay que colocar entre las etiquetas <head> y </head>:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ruta/fancy/jquery.fancybox-1.3.0.css" media="screen" />
<script type="text/javascript" src="ruta/fancy/jquery.fancybox-1.3.0.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#contact_form").fancybox({
'width': '35%',
'height': '75%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe'
});
});
</script>
<link rel="stylesheet" type="text/css" href="ruta/fancy/jquery.fancybox-1.3.0.css" media="screen" />
<script type="text/javascript" src="ruta/fancy/jquery.fancybox-1.3.0.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#contact_form").fancybox({
'width': '35%',
'height': '75%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe'
});
});
</script>
Como ven, pueden modificar algunos parámetros como el ancho y la altura.
Para invocarlo pueden utilizar:
<a id="contact_form" href="https://spreadsheets.google.com/embeddedform?formkey=dFJoaUlxd3ZyTDR6a19xWlZYMUlrLWc6MA">Contacto</a>
La dirección del formulario en el item "href" la obtienen posicionándose en la hoja de cálculo, haciendo click en la pestaña "Form" y luego en "Embed form in a web page" (ver imagen). Sólo copien la parte de la URL pues habrá varias cuestiones más.Facebox
La instalación es similar a la anterior.
Colocar entre las etiquetas <head> y </head>:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src='facebox/facebox.js'></script>
<link rel="stylesheet" type="text/css" href="facebox/facebox.css" media="screen" />
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'facebox/loading.gif',
close_image : 'facebox/closelabel.gif'
})
})
</script>
<script type="text/javascript" src='facebox/facebox.js'></script>
<link rel="stylesheet" type="text/css" href="facebox/facebox.css" media="screen" />
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'facebox/loading.gif',
close_image : 'facebox/closelabel.gif'
})
})
</script>
Para invocarlo:
<a href='#contacto' rel='facebox'>Contacto</a>
<div id='contacto' style='display:none;'><iframe src="https://spreadsheets.google.com/embeddedform?formkey=dFJoaUlxd3ZyTDR6a19xWlZYMUlrLWc6MA" width="500" height="300" frameborder="0" marginheight="0" marginwidth="0">cargando...</iframe>
<div id='contacto' style='display:none;'><iframe src="https://spreadsheets.google.com/embeddedform?formkey=dFJoaUlxd3ZyTDR6a19xWlZYMUlrLWc6MA" width="500" height="300" frameborder="0" marginheight="0" marginwidth="0">cargando...</iframe>
A la dirección URL del formulario la obtienen de la misma manera que en el ejemplo anterior.
Como ven, hay un div oculto ("contacto") que es el que tiene el formulario.
Pueden bajarse los archivos necesarios de los dos ejemplos. Lógicamente deberán re alojarlos.
8 comentarios:
Buena e interesante entrada. Felicitaciones. Saludos cordiales PTB
edu, de onda, para aquellos como yo que manejamos muy poco html y para hacerlo más gráfico metele capturas en los post para ver como queda, así tenemos una idea
Ricky: puse ejemplos reales en los dos items... :P
Hola, muy interesante el post, empezaré a hacer uso de los formularios :D en http://www.sinergialaboral.co.cc
GRACIAS!
Que bien. Veré si puedo usarlo en mi página http://www.sinergialaboral.co.cc
Hola, quiero saber si estos formularios de google docs se pueden colocar en una página de facebook Gracias!
Muy buen truco!! No había pensado en ello. Así me permitirá modificar el estilo visual a mi gusto.
Saludos
Zampoña: en una página si, con la ayuda del módulo FBML. En un perfil no se podría.
Publicar un comentario
Los comentarios están moderados.