Formulario de contacto en tu web con google Docs

Google informa de una nueva funcionalidad en su aplicación gratuita y online: Google Docs. Si en un artículo anterior nombramos a Docs como programa de edición de texto gratis como alternativa a microsoft Word, el día de hoy lo destacamos aún mas como opción para usarlo para otros fines como por ejemplo, crear formularios de contacto para nuestras páginas web. Gracias a la estructura simple y fácil de usar de Google Docs podremos generar un formulario web en cuestión de segundos y adecuarlo a nuestras necesidades.

emailbig Formulario de contacto en tu web con google Docs

En el ejemplo vamos a tratar con uno básico y que casi todo webmaster tiene en su web, o tiene pensado tenerlo, el típico formulario de contacto, donde pedimos nombre, email, asunto del contacto y la caja de comentarios donde los usuarios de la web se comunican con el webmaster.

Para comenzar, lo primero que hay que tener para usar Google Docs, así como todas sus aplicaciones es una cuenta en google, que se puede conseguir registrando un email en gmail.com.

Una vez tengamos cuenta con google vamos a iniciar sesión en Google Docs, podemos acceder a éste en la parte superior izquierda del panel de entrada de gmail, o entrando a la dirección directa de Google Docs. Tal vez tengamos que activar el servicio, lo hacemos y entraremos en el panel de administración de Docs, lo primero que os aconsejo es configurarlo al idioma español, para ello accedemos en la zona superior derecha a la sección de Settings y cambiamos de idioma como en la siguiente imagen.

idioma google Formulario de contacto en tu web con google Docs

Una vez tenemos nuestro Docs en español, volvemos a la pantalla general y presionamos en el botón: NUEVO –> Hoja de cálculos. Se nos abre una ventana nueva en la cual nos aparece la hoja de cálculos vacía.

hoja calculo docs Formulario de contacto en tu web con google Docs

Sin tocar nada, nos vamos al botón COMPARTIR que tenemos en la zona superior derecha, nos pedirá que pongamos nombre al documento que tenemos abierto, podemos poner el nombre que queramos yo por ejemplo lo llamo: CONTACTO. Una vez tenemos puesto nombre al documento nos aparece una nueva sección, ahora nos da a elegir entre 3 opciones:

  1. como colaboradores
  2. como lectores
  3. Para rellenar un formulario

Obviamente elegimos la 3ª y a continuación se nos cambia el formulario, y donde tenemos que pulsar es en el botón VISTA PREVIA Y ENVIAR FORMULARIO.

enviar formulario Formulario de contacto en tu web con google Docs

A continuación y tras pulsar el botón anteriormente comentado, nos aparece una nueva ventana en la que tenemos varias opciones de configuración, podemos enviar el formulario por email a uno o varios contactos, ver una vista previa del formulario que llevamos hecho (a la derecha) y las preferencias que son las opciones de que disponemos cuando el usuario ya ha rellenado el formulario y lo ha enviado, lo ideal es personalizar el mensaje de confirmación y así tenerlo mejor implementado a nuestra página web.

preferencias Formulario de contacto en tu web con google Docs

Pero lo más importante de ésta sección es la edición del formulario, para acceder a ella vemos en la parte superior de la ventana una sección llamada: EDITAR FORMULARIO, donde accederemos para crear y personalizar los campos que queremos que existan en nuestro formulario, podemos elegir entre campos normales de texto, cajas de comentarios, etc:

editar campos Formulario de contacto en tu web con google Docs

Podemos editar y crear nuevas preguntas, duplicarlas, poner si el campo es requerido o no lo es, agregar listas para una encuesta, y muchas opciones a la vista y simples de utilizar. una vez tengamos nuestros campos elegidos y modificados a nuestro gusto, guardamos el trabajo y en la zona superior de la ventana vamos a donde pone: VISTA PREVIA Y ENVIAR, y volveremos al anterior panel donde vamos a ver en la derecha el formulario que hemos creado, si no nos aparece, para verlo podemos pulsar en la parte de “Preferencias” la opción de “incluir formulario en correo electrónico de invitación” pero lo más importante y la forma de la que vamos a poder “insertar” el formulario en nuestra web, será obteniendo el código qu enos brinda google, y que podemos ver presionando en el enlace: INCRUSTAR que vemos en la zona superior derecha de la ventana:

incrustar formulario Formulario de contacto en tu web con google Docs

Nos aparece un código, más concretamente un iframe que podremos colocar en nuestra página web o blog, insertándolo, bien en el post mediante tags html, o en nuestra web entre las etiquetas <body></body>, podemos editar este iframe, dándole el tamaño que queramos incluso editarlo de forma que no aparezca la barra scroll que tan molesta es casi siempre. Una vez tenemos publicado nuestro formulario de contacto tenemos que tener en cuenta, que no recibiremos los mensajes de los usuarios en nuestro email si no que se van almacenando en la hoja de cálculos que creamos al principio, entonces para ver si tenemos nuevos contactos desde la web, tendremos que acceder a la hoja de cálculos llamada anteriormente “concato” No es muy útil que digamos, si es ordenado pero poco útil, todos preferiríamos tener los contactos en nuestro email, pero tenemos que tener en cuenta que es el principio y que esta nueva funcionalidad la irán mejorando poco a poco según el transcurso del tiempo y la popularidad que tenga, de cualquier manera, al almacenar los mensajes de esta forma, google se asegura que utilizas su hoja de cálculos para que de paso te vayas familiarizándote con ella y la uses con más frecuencia icon razz Formulario de contacto en tu web con google Docs

Ejemplo de formulario con Google Docs

Publicado el 9 de julio, 2008, su autor es:
malder. en colaboración con Foro informatica,
todos los derechos reservados.
Categoría: Artículos Webmaster.
Etiquetas: , , , ,
  • Andres

    Hails… gracias carnal por todo.. pues de algo me sirivio.. ya uqe estuve intentando con Html, Php, y demas pero ninguno me servia.. y este me ha servido de mucho.. Se agradece— Saludos… desde México…

  • Emma

    Me ha parecido muy util gracias, pero he personalizado el formulario a mi gusto, y no me sale ni el color, ni el tipo de letra , ni el fondo que yo he elegido, y tampoco que cuando se le da a la tecla enviar, no salga la pagina que te dice que se ha enviado tu respuesta y volver al formulario. Me gustaria que saliera una pagina personalizada por mi. ¿Cómo puedo hacerlo?

  • jaime

    como puedo cambiar el color de fondo del formulario
    y como elimira la barra scroll

  • http://andalinux.wordpress.com Googleante

    En esto quedo el “frontpage” de Google: optaron por cerrar Google Page Creator y añadirlo al Documents (dicen que la unión hace la fuerza ¿no?)

  • antonio diaz

    Interesante para crear un formulario de registro de datos. Con el mensaje de confirmación ¿no se podrían devolver (para su comprobaciónpor parte del encuestado) los datos que ha introducido?

  • xavi

    Una vez tenemos puesto nombre al documento nos aparece una nueva sección, ahora nos da a elegir entre 3 opciones:

    como colaboradores
    como lectores
    Para rellenar un formulario

    A mi eso no me aparece en ningun sitio :S

  • karla

    a mi tpco me aparece esas secciones :(

  • http://todosobrecarrosmonterrey.blogspot.com/ ricardo v

    muy buen dto amigo, muchas gracias, tendras mi referncia

    http://abogadogratis01.blogspot.com/

  • vicius

    hola. me gustaría saber si hay alguna forma de que el mensaje de confirmación que sale al enviar el formulario, sea una página creada por mí en el que no aparezca el logo de google. en el código html aparece la página a la que manda la información, alojada en su servidor:

    http://spreadsheets.google.com/formResponse?key=p7OB_P-hYHUgNE

    he cambiado esa página para que salga una que yo he hecho y va bien, pero los datos no llegan a google docs. es decir, tendría que estar esta página para que recibiera los datos y luego añadir otro comando para que salga la página que yo he creado. ¿alguien sabe cómo se hace esto?

  • Miriam

    Hola a todos! Me gustaría saber como se personaliza un formulario: añadir fondo, cambiar tipografía y color de letra…

    Gracias!

  • Miriam

    Hola! me gustaría saber si puedo y cómo, personalizar un formulario: cambiar color, tipografía, añadir logo.. me puede ayudar alguien¿? gracias de antemano!!

  • http://www.xicrimar.com Cristina

    A mi tampoco me aparecen las secciones de compartir:
    como colaboradores
    como lectores
    Para rellenar un formulario

  • http://www.naddeo.com.ar Tito

    Gracias por la ayuda, tengo docs hace mucho, pero casi no lo uso, ahora, por tu ayuda vengo a encontar un formulario acorde con lo que buscaba. Un saldo desde Argentina

  • jose

    hola solo es prueba

  • vlad

    Superrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

  • Juliet

    Hola quisiera saber si el formulario de google se puede colocar en facebook, Gracias

  • http://www.corporacionmotivos.com Leonel Ortega

    Siempre he utilizado melodysoft para los formularios, es muy funcional y tiene la opción para modificar, color, letra y demás detalles que preguntan, ahora bien… el documento o hoja de cálculo se puede configurar, para que cada vez que ingresa un formulario de un aviso a tu correo electrónico, esto como aclaración… finalmente la modificación de fondo y tamaño de letra por el momento no es posible, como tampoco lo es el modificar la página de respuesta o confirmación… pero si se le puede incluir un enlace a tu sitio web…. ahora bien, voy a revisar si por html incrustado puedo agregar un logo…. éxitos y disfrútenlo porque está muy eficiente

  • http://www.elrincondeisabel.es Alain

    Buenas tardes,
    Crear el formulario todo bien pero no me aparecen las secciones de compartir:
    como colaboradores
    como lectores
    Para rellenar un formulario
    Al final no puedo tener el formulario en el sitio. Tengo una hoja de calculo y donde se pone la dirección del correo? Cuando hacemos “Enviar”, donde va el formulario que la persona a rellenado?
    Gracias por la ayuda.
    Un saludo.
    Alain

  • Pascualino

    Entiendo que la función de formularios es utilizada para realizar encuestas, pero si quisiera utilizar el formulario también para ver/modificar los datos que ya fueron insertados ¿que debería hacer? (algo así como actualizar status)

    Gracias

  • http://www.pacientesweb.com/ Software de Historia Clinica

    Excelente herramienta que ofrece google, y lo hace igual muy facil de utilizar igual que todos sus desarrollos un excelente recurso para implementar en los momentos que necesitemos recabar informacion desde un formulario y lo mejor sin necesidad de tener conocimientos de php base de datos ni mas, saludos

  • carlos

    Pero, a donde se van los mensajes???, jeje, no se van a mi correo, o mi siye de gogole, a donde se va?

  • jonathan

    Hola a todos, hay alguna forma de que el usuario solo haga el envio del formulario una sola vez, por ip, o que los datos no se repitan algo por el estilo

  • pallog

     a donde se va

  • Yadiko

     Hola soy nuevo en esto blogger sobre el formulario de contacto como yo puedo cambiar el background del formulario a uno transparente y cambiarle el color de las letras.

  • Braian

    nada

  • Blancahernandezsolis

    Alguien me puede ayudar, ya hice mi formulario de contacto y ya lo inserte en mi web, solo que no me sale completo y me sale la barra de desplazamiento, y no me gusta, como lo modifico para que las preguntas de contacto me salgan completas y se vea el botón de enviar, la pregunta directa como quito la barra de desplazamiento y hago que se vea completo mi formulario. Gracias!!!

  • wiggin

    esta muy bien, pero hay alguna forma de poder modificar el aspecto y/o comportamiento, aunque sea a través de un script realizado en la pagina en la que insertaremos el formulario.

    ya que he estado provando usando javascript y dom core

    he provado:

    document.frames.idformulario.getElementsByTagName(“input”);

    document.frames["idformulario"].getElementsByTagName(“input”);

    incluso e provado desde window

    window.frames.idformulario.getElementsByTagName(“input”);

    window.frames["idformulario"].getElementsByTagName(“input”);

    pero siempre con el mismo resultado, por lo que no se si el problema al final es que de algún modo se prohibe el acceso al contenido del formulario (quizas porque el formulario usa https y la pagina desde donde intento ejecutar el script se abre desde http)

    donde:
    <iframe id="idformulario  ….

    alguien lo entiende??

  • wiggin

     perdon por la ortografia, pero iba con prisas :(

  • David Rod Pol

    Hola, 
    Qué es exactamente lo que deseas modificar?
    Porque sí que se  puede modificar el comportamiento del mismo. Por ejemplo se puede hacer que al enviar el formulario, las respuestas o consultas hechas no sólo lleguen al archivo excel, sino que además puedan ser recibidas en el correo de gmail como un mensaje. 

    También se que se puede modificar el aspecto del formulario. Aunque ésta parte aún la estoy investigando. 

    En todo caso te dejo el link de un sitio que te dice como modificar lo del correo. Y a partir de ahí ya investigas lo que deseas hacer. 

    http://juancarikt.blogspot.com.es/2011/11/origen-las-google-apps-scripts-o.html

    Un saludo.