Para lograr este nuevo objetivo vamos a utilizar otro servicio de Google, se llama Google Docs. Este servicio permite crear y compartir a través de Internet documentos de texto, hojas de cálculo, presentaciones de diapositivas, dibujos y también Formularios.
El diseñador de formulario de Google Docs nos permitirá por lo tanto crear una serie de campos como el nombre, email, observaciones y finalmente nos facilita un código HTML que integraremos en una nueva página del blog.
Crear e insertar un formulario de contacto en el blog
Paso 1. Conecta con Google Docs (Ahora Google Drive)
Paso 2. Si la interfaz de usuario te aparece en inglés sigue estos pasos:
- Haz clic arriba a la derecha donde está el icono de configuración
- Haz clic en el menú Documents Settings
- Establece el idioma español y la zona horaria. Presiona guardar.
Paso 3. Usa el botón "crear nuevo" e indica que se trata de un formulario
Paso 4. Diseña tu formulario con lo campos estándares, puedes marcar incluso los obligatorios.
Paso 5. Cada campo que crees puedes asignarle un tipo (texto, parrafo, lista, casilla de verificación, etc)
Paso 6. Una vez concluido, ve al menú Archivo y luego Insertar.
Paso 7. Copia el código (puedes ajustar el ancho y alto), regresa al blogger
Paso 8. Crea una nueva página (no entrada) con el título "Contacto"
Paso 9. En la vista "Edición de HTML" de la edición pega el código copiado desde el formulario
Paso 10. Guarda la página y comprueba que funciona
Notas: Si tienes un menú de navegación de páginas, la nueva página se agregara automáticamente tal y como está en este blog. En caso contrario, anota en enlace a la nueva página y coloca el link en un lugar visible del blog.
Puedes seguir mejorando el diseño del formulario (nuevos campos, plantilla...) y este se actualiza automáticamente en nuestra página del blog.
Cómo activar las notificaciones por email
Por cada formulario enviado, el sistema creará un nuevo registro en una hoja de cálculo automáticamente. Sigue estos pasos para configurar el sistema de notificaciones y que te avise mediante un email que tienes un nuevo contacto.
- Vuelve a Google Docs y haz clic sobre la hoja de Excel de contacto asociado al formulario
- Ve al menú Herramientas y haz clic en Reglas de Notificación...
- Marca las opciones tal y como aparece en el siguiente gráfico:
Si tuvieras alguna duda o problema deja comentario en esta misma entrada.
Puedes verlo funcionando aquí
Entradas
Gracias, me ha servido de gran ayuda este post...seguir asi!!!
ResponderEliminarohh! lo quise hacer pero esta todo en ingles y no entendi...no me quede claro :(
ResponderEliminarJesus! Yo creía que me notificaban al mail si alguien me contactaba a través del formulario... Resulta que de casualidad entre, y me habían enviado varios mensajes y yo ni enterada :( Como se hace para que te notifiquen??? Beso!
ResponderEliminarHola Jesús, ¿cómo haces para poner la casilla de "recibir los boletines por email" en el formulario? ¿eso es lo mismo que la suscripción por email? y por último ¿como consigues que te mande una notificación por correo?
ResponderEliminarMuchas gracias!!!!!
Besicos
Hola Trasteando con las ideas ya tienes actualización el tutorial con la información para configurar las notificaciones por email.
ResponderEliminarCualquier duda comentame...Gracias por tu comentario.
Saludos, Jesús.
Hola Jesús, he seleccionado una de las plantillas que hay para rellenar el formulario, pero cuando se ve en mi blog sale fuera de la columna central. ¿ahi alguna manera de poder ajustar la plantilla al ancho que dispone? Si quieres molestarte en ver como queda te dejo el enlace de mi página de contacto. http://jocargali.blogspot.com/p/contacto.html
ResponderEliminarHola Jocargali,
EliminarSi puedes ajustar tanto el ancho como el alto. Edita la página de Blogger donde tienes el formulario de contacto y cambiate a la vista HTML. El parámetro Width es el ancho y el parámetro Height es el alto. Si te sale una barra de desplazamiento horizontal es que debes aumentar el ancho ya que el formulario no cabe. Lo mismo con el alto, si te sale una barra de desplazamiento vertical , aumenta el valor del Height para que quepa completo en el iFrame. Estos cambios debes hacerlo en la vista HTML de la pagina de contacto.
Gracias por tu comentario
Jesús González.
Muchas Gracias Jesús.
EliminarHola Jesús de nuevo. En donde explicas como hacer que te notifiquen por correo al rellanar el formulario de contacto dices: "Vuelve a Google Docs y haz clic sobre la hoja de Excel de contacto asociado al formulario" Pero lo que no veo es la hoja de cálculo asociada al formulario. Podrías indicarme que no he hecho?. Gracias de nuevo.
ResponderEliminarHola Jocardi, cuando abres la hoja de cálculo tienes un menú en la parte superio que se llama Formulario, lo abres y tienes una opción de Modificar formulario.
EliminarSeguimos conversando.
Jesús González
Gracias Jesús
EliminarHola, gracias por la idea. Fue muy simple de aplicar.
ResponderEliminarGracias Sandra...de eso se trata que sea fácil de aplicar y que además suponga un salto importante para tu blog. Contar con un formulario de contacto supone "proteger" tu email contra spam además de ir contando con un registro la hoja de cálculo de Google Docs.
ResponderEliminarYo seguo trabajando para mejorar y agregar nuevos contenidos.
Gracias
Jesús González.
Gracias, eres el primero en usar mi sección de contacto jajajaja. Bueno tomaré en cuenta tus comentarios para futuras mejoras. Saludos.
Eliminarjeje, perfecto ya veo que funciona de maravilla. Muchas felicidades!
EliminarJesús González.
El problema que tengo, es que cuando recibo el mensaje, le doy clic para ver el formulario, todo funciona bien. Lo que quiero es que no se vea como una hoja de exel, sino que se vea tal cual como en el formulario de contacto en el e-mail que recibo cuando se usa el Formulario de contacto.
ResponderEliminarNo sé si me di a entender bien.
Hola Abrahan,
EliminarEl resultado del formulario pasa a formar parte efectivamente de una hora de cálculo de Google Docs. No conozco ningún modo de visualización que muestre los registros tal y como describes aquí.
Dependiendo de los datos que estes capturando con el formulario puedes insertar un Gadget que te los muestre por ejemplo como un gráfico o como un mapa.
Seguimos conversando, gracias por tu comentario,
Jesús González.
Hola Jesus: gracias por la información, solo tengo una duda, como puedo ampliar el tamaño de la caja de comentarios
ResponderEliminarHola JorgeAltov
EliminarLa caja de comentarios, supongo que te refieres a dentro del formulario al campo que pongas como observación o notas verdad?
A ver en principio solo puedes indicar que es de tipo Texto de Párrafo y poco más. El que tienes en estos momentos es del tipo Texto.
Un abrazo!
Jesús González.
Jesús gracias por la info. El cambio quedo perfecto.
ResponderEliminarSaludos
Perfecto!
EliminarJorge quería también presentarte a un seguidor de iniciaBlog, se llama Luis y creo que puede interesarte conocer su blog.
http://www.luisonrh.com/
Espero que te guste!
Jesús González
Hola Jesus gracias por el link, tiene un muy buen trabajo fotográfico.
EliminarSaludos
Gracias un gran saludo
ResponderEliminarHola Jesus hace unos dias configure la hoja de contacto con Docs, pero me he dado cuenta que no me llegan al correo los mensajes que me envian. Que crees que pueda ser?
ResponderEliminarSaludos
Hola Jorge,
EliminarAlgo importante, lo que debe llegarte es la notificación de que un nuevo registro ha sido enviado, nunca te llega un correo electrónico como tal al que tu puedas responder de manera directa. Es una de las cosas que se hecha de menos.
Vuelve a revisar nuevamente este post y asegúrate que las notificaciones están bien, vuelve a comentarme y si quieres hago una prueba de envío ¿te parece?
Saludos,
Jesús González
Hola Jesus, ya me di cuenta que el mensaje llega a una hoja de calculo en docs.
ResponderEliminarGracias
Correctisimo...tal y como indico en el post puedes configurar para recibir una notificación por email cuando un usuario cumplimente el formulario. Dicha notificación lleva un enlace hasta tu hoja de cálculo correspondiente.
EliminarGracias por tu comentario,
Jesús González
Me sirvio mucho tu explicacion! Gracias
ResponderEliminarGracias Elo....me alegra mucho tu visita y que hayas dejado este comentario...
EliminarJesús González
NO ME DEJA VER EL FORMULARIO CUANDO EL BLOG ESTA NAVEGANDO
ResponderEliminarBuenas Protecting Life,
EliminarNo entiendo muy bien la pregunta. Qué quiere decir cuando el blog está navegando....
Podrías indicarme alguna dirección para visualizar tu blog.
Un saludo, gracias por comentar.
Jesús González
Hola jesus, perdon pero me perdi en la parte que dice crear una pagina para pegar la direccion HTML, no entiendo que pagina debo crear, gracias!!!
ResponderEliminarHola Lau,
EliminarTe comento. En Blogger no solo puedes crear entradas que son tus post sino que también puedes crear páginas estáticas, como las que yo tengo en la parte superior de mi blog.
Para crear una nueva página ve a Blogger y entra en tu blog. Verás en el menú de la izquierda la palabra "Páginas", justo debajo de tus Entrada. Haz clic y luego te encontrarás un botón para crear una nueva página. Te saldrá el mismo editor. Ponle el título y sigue el tutorial.
Cuando publiques esta página Blogger te va a preguntar si quieres añadir el Gadget de páginas de manera que puedas navegar en tu blog.
Por favor vuelve a comentarme.
Muchas gracias por tu comentario.
Jesús González
Gracias me ha sido de gran ayuda, y ya funciona mil gracias.
ResponderEliminarHola Jesús,
ResponderEliminar¿Cómo consigo poner el boton de "seguidores" para que puedan añadirse en mi blog?
Es este: http://personalshopperengranollers.blogspot.com.es/
Muchas gracias,
Helena.
Hola Helena,
EliminarHe visto tu blog y veo que ya tienes el gadget de los seguidores. Ya te sigo....lo que veo es que sale como en francés. Tienes que revisar en Configuración, la pestaña idioma y formato si quieres corregir esto!
Jesús González
Hola Jesús, he seguido detenidamente tu post de como crear el formulario de contacto para mi blog a través de google docs.
ResponderEliminarSolo llevo practicamente un mes en este gran mundillo, y estoy totalmente perdida. He utilizado plantilla templates-designer, he conseguido crear el menú desplegable y una de las pestañas del menú principal la ha llamado CONTACTO. Mi idea es que esta pestaña de CONTACTO enlace con el formulario de contacto que he creado en google docs. No tengo narices.
He creado una página nueva (no entrada),con el título CONTACTO.
He estado haciendo pruebas e incluso me he atrevido a jugar un poco con plantilla<Edición HTML<Expandir artilugios.....y no consigo nada, sino marearme.
Agracedería de antemano tu ayuda, gracias.
Muchas gracias Petri Montes por tu visita y tu comentario.
EliminarA ver lo cierto es que mezclas varias cosas en tu post. Cosas que ya tienes, tienes la página de contacto. Recuerda que tanto en un post como en una página tienes dos vista. La vista Redactar que es la que normelmente se trabaja y la vista HTML que se usa sobretodo para incrustar código HTML como es el caso del Formulario de Google Docs.
Te falta crear el formulario en Google Docs e insertar el HTML que obtienes de alli en el HTML de la página de contacto. No tienes que entrar a editar tu plantilla HTML.
Te pido retomes nuevamente el tutorial porque estas a un paso de lograrlo.
Vuelve a comentar si que quedas en alguno de los pasos.
Muchas gracias y seguimos conversando,
Jesus González
Guauu!! La primera vez que entiendo como se hace algo, y lo consigo!! Te agradezco un montón que lo expliques tan bien para gente que no sabe mucho de esto.
ResponderEliminarPor cierto, sigo sin comprender muy bien como se hacen ciertas cosas sobre redes sociales, pudiera quizás preguntarte por vía email??
Un saludo, y muchisimas gracias!!
Hola Marta!...
EliminarMuchas gracias por tu comentario, he visto tu blog pero no he visto el formulario de contacto.
Perfecto con lo del email, tendrías que enviarme tu email a través de mi formulario de contacto ¡qué rolo verdad jeje!
Te espero.
Jesús González
Jesús gracias por la información. ¿como puedo modificar el ancho de los campos como asunto, Nombre y apellidos etc.?
ResponderEliminarLo tienes perfecto Tegueste Base!,
EliminarSolo tienes estilos de campos, por ejemplo el estilo texto, párrafo, opción, casilla de verificación. He vuelto a revisar la edición del formulario mediante Google Docs pero de momento no es posible editar la longitud de estos campos.
He visto el formulario y les he enviado un mensaje.
Jesús
Jesús Buenos Días, tus explicaciones son muy claras, como siempre, ¡Haces un trabajo impagable!
ResponderEliminarPero tengo un problema, creo que he seguido todo al pie de la letra de hecho cuando le doy a vista previa, veo estupendamente el formulario, el problema es cuando le doy a publicar, y pincho en contacto, no me aparece el formulario por ningún lado ¿A que se puede deber?
Hola Mari,
EliminarEstoy mirando tu blog pero no veo el enlace que me lleva hasta el formulario de contacto...
Puedes indicarme la url.
La página contacto lo tenía como borrador, porque como no me funciona, la acabo de publicar de nuevo, lo extraño es que no me muestra la URL de la página cuando la pincho, no sé si sabes a que me refiero, ¿Puedes echar una mirada a ver cual puede ser el problema? Muchas Gracias de nuevo
EliminarJesús, yo creo que al final ha sido algún problema de Google, porque ahora si que se ve, y no he hecho ningún cambio, Gracias de todas formas, Saludos
EliminarAunque no lo creas eso me paso a mi hace no mucho, finalmente fue el tema de pasar la página como borrador, el menú no se enteró muy bien de que ya estaba publicada y un lio con los nombres... Te he cumplimentado el formulario con dos sugerencias más.
EliminarFELICIDADES!!!
Jesús Buenos Días, Muchas Gracias por tus sugerencias, como siempre son de mucha ayuda, lo de la url de contacto, también lo había visto, pero con el problema que tuve, no me atrevía a tocarlo vaya que dejara de funcionar, pero lo voy a intentar, a ver que pasa, y con respecto a los comentarios, ni se me había ocurrido, Gracias por decírmelo, Un saludo, y otra vez más Muchísimas Gracias!!
EliminarPeeeeerfecto Mari!,
EliminarHe visto nuevamente tu blog y ya has corregido incluso lo que te envié a través del formulario de contacto, eres un hacha!.
Seguimos hablando...ese blog me gusta
Muchas Gracias Jesús, estamos en contacto, Disfruta de lo que queda del fin de semana
EliminarMe gustaria saber generar e insertar una formulario de contacto de google docs. Pero la explicación para que yo la entienda tiene que ser una explicación para torpes del todo ¡¡¡ Entro en google docs y para hacer un formulario, me aparece una hoja de cálculo y ahí me pierdo.
ResponderEliminarGracias y saludos.
Jordi Castillo. ( no tengo blog todavia)
jordicastillogon@gmail.com
Gracia Jordi,
EliminarVoy a tratar de mejorar el post, hay cosas que se pueden mejorar.
Listo muchas gracias por el aporte, creado, insertado y funcionando espero sin ningún drama a futuro...
ResponderEliminarPerfecto Real,
EliminarMuchas gracias por compartirlo.
Hola Jesus!
ResponderEliminar1 pregunta: cuando pones aqui una contestacion a nuestras preguntas tambien nos las envias a nuestro correo?
2 pregunta: como puedo hacer para que una contestacion de una pregunta o tema recibido en mi blog que yo hago insertarla en una pagina determinada asi como tu haces en esta pagina donde contestas todas las preguntas, espero que entiendas mi pregunta, seria tan bueno poder hablar contigo directamente por telefono, aveces me pierdo en esto.
Un saludo y felicidades por tu blog, lo tengo todo el dia en pantalla intentando enterarme de algo para hacer mejor el mio
Jorge Martinez
Hola Jorge,
Eliminarcuando tu dejas un comentario en un blog puedes decidir si quieres suscribirte a dicha entrada para recibir en tu buzón de email la respuesta.
Esto es posible en el momento de hacer ese comentario. El sistema es automático. Si dejas un comentario y no te suscribes por correo electrónico no te llega la respuesta a menos que el administrador el blog de avise a través de otra acción, por ejemplo avistarte por twitter o cualquier otro medio.
Con respecto a la segunda pregunta, dime cual es tu blog, te dejo un comentario y me lo respondes tu justo debajo ¿te parece?
Jesús González
Otro tutorial que me ha funcionado de maravilla. Muchisimas gracias por esta ayuda, solo quisiera aclarar una preguntita más.
ResponderEliminarVeo que en tu página de contacto, en la barra de direcciónes dice http://www.iniciablog.com/p/contacto.html
pero cuando yo hice todos los pasos, me aparecio http://www.miblog.com/p/cargando.html y hasta el momento no he encontrado como hacer que diga Contacto en vez de cargando. Espero sepas como reparar ese detalle y agradezco muchisimo tu ayuda. Tambien te quiero felicitar por tu colaboración en un video de como ganar posicionamiento... no recuerdo muy bien el nombre del video pero si recuerdo que estabas con otros dos Bloggers..
Gracias y felicidades de nuevo
Eso me pasó a mi también, jejeje. Yo creo que es porque no le pusistes un título a la página de contacto. Dos opciones, edita tu página y guárdala en modo borrador y luego vuelve a publicarla con fecha del día (mira el panel de la derecha donde pone Programar) o bien crea una nueva página, asegúrate que tiene el titulo que necesitas y copias y pegas el código HTML de una a otra, y por último borra la página que sobra.
EliminarGracias cLaRk Ruiz,
Jesús González
Hola Jesus:
ResponderEliminarSera posible que hagas un video sobre esto?
Visualmente es mas facil entender.
Ahhh y me ha encantado tu blog, hoy es mi 1er dia por aqui, ya lo puse en mis favoritos, seras mi guia en Blogger.
Lo mejor para ti...
Hola Tatiana,
EliminarSi es posible lo que no puedo es prometerte cuando. Si me dices qué punto no entiendes puedo mejorarlo.
Muchas gracias por comentar,
Jesús González
Hola jesús,
ResponderEliminarTengo un problema cuando he puesto mi formulario de contacto y es que me sale una barra de desplazamiento en el lateral de la derecha que me parte por la mitad esa columna
¿cómo podría quitarlo?
Un saludo.
Te dejo la url por si quieres echar un vistazo:
ResponderEliminarhttp://alejandrolopezlinares.blogspot.com.es/
Todavía tengo muy poco contenido pero es que quería diseñarla a mi gusto antes de empezar a incluir contenido.
Gracias!
Hola Jesús,
ResponderEliminarSigo todos los pasos pero la pagina de CONTACTO no me aparece en ningún lado en el blog.
Hola Joe,
EliminarHe visto tu blog, ya veo el enlace y te acabo de hacer llegar mi contacto.
Enhorabuena!
Jesús González
Llámame torpe, pero las opciones que ofrecen para hacer el supuesto "formulario" a mi me parecen más bien un "cuestionario", y no encuentro ninguna opción básica para poner: Nombre, e-mail, asunto, etc. Buscaré otras opciones de formularios de contacto, esta... la verdad, no me ayuda.
ResponderEliminarHola Mon,
EliminarSiento mucho que no te sirviera. De todas formas si quieres volver a evaluarlo solo tienes que ver mi formulario de contacto.
Saludos,
Jesús.
¡¡Hola Jesús!!
ResponderEliminarDe nuevo ando merodeando tu web !! :) Esta vez quiero utilizar un formulario que ya tengo hecho gracias a tus instrucciones, en Google Docs. Pero lo quiero para el final de una entrada...
No es un formulario de contacto sino de un sorteo que voy a realizar. Lo que quiero es que mis suscriptores se apunten a dicho sorteo a través del formulario.
¿De qué manera puedo insertarlo al final de mi entrada?
Muchas gracias una vez más
Un saludo :)
¡¡Vale!! Creo que ya lo he averiguado, je je! Gracias de todas formas!! Te molestaré pronto :p un beso
ResponderEliminarMe alegra,
EliminarDe todas formas es fácil. El código que obtienes desde Google Docs, lo copias y lo pegas en el Post en la vista HTML.
Debería ser así.
Jesús González
Perdona...no logro entender cuál es la finalidad de esta función????
ResponderEliminarEs muy sencillo, a través de un formulario de contacto le solicitas al usuario una serie de datos, normalmente el nombre, email y el asunto del mismo.
EliminarCuando le de enviar esos datos llegarán hasta una hoja de cálculo en Google Docs y te avisará automáticamente que alguien acaba de hacerte llegar su contacto, su pregunta o sencillamente se trata de una venta.
Mira el formulario de contacto que yo tengo en mi blog para que lo entiendas.
Siempre es más seguro un formulario de contacto que exponer tu dirección de correo electrónico.
Gracias por la pregunta Monarca,
Jesús González
Hola jesús,
ResponderEliminarTengo un problema cuando he puesto mi formulario de contacto y es que me sale una barra de desplazamiento en el lateral de la derecha que me parte por la mitad esa columna
¿cómo podría quitarlo?
Te dejo la url por si quieres echar un vistazo:
http://alejandrolopezlinares.blogspot.com.es/
Todavía tengo muy poco contenido pero es que quería diseñarla a mi gusto antes de empezar a incluir contenido.
Gracias!
Acabo de enviar mi respuesta a través de tu formulario jejeje
EliminarJesús
Jesús,
ResponderEliminarEstoy impresionada con la ayuda que ofreces en tu blog, muchas gracias.
Ya hice una prueba con el formulario, todo salio bien ;)
Saludos
Muchas gracias Estela,
EliminarQué alegría da que te digan eso. Más de 4000 comentarios llevo en 2 años. Casi nada
Un abrazo y bienvenida
Jesus.
Hola Jesús,
ResponderEliminarTodo correcto con las indicaciones que me dejaste en el formulario. La barra queda en la columna central de la página, permitiendo desplazar el formulario.
Muchas gracias de nuevo
Te acabo de volver a enviar una respuesta a través del propio formulario.
EliminarEspero que lo consigas cuadrar.
Jesús
Hola Jesús,
ResponderEliminarGracias por explicar cómo se crea un formulario. Ya lo he insertado en el blog y funciona perfecto. Esto mejorará mucho el blog, sin duda.
Gracias y ánimos para continuar esta fantástica labor.
Saludos!
Hola 72Kilos,
EliminarHe querido probarlo pero tu foto de perfil no me lleva a tu blog.
Enhorabuena!
Jesús
Este comentario ha sido eliminado por el autor.
ResponderEliminarMejor me voy a ir a ver tutoriales en youtube, y yá no te voy a seguir. Gracias por nada.
ResponderEliminarJesús
ResponderEliminarSeguí tus pasos, en mi caso no aparecio el botón que mencionas en el Paso 6 fue diferente. Sería bueno que revisaras si tienes que actualizar este paso. Por lo demás excelente, ya tengo todo funcionando.
De nuevo gracias por facilitarnos la vida.
Quisiera agregar por aqui un truco para hacer que los formularios de google se integren en la plantilla y le puedan dar los estios que quiera:
ResponderEliminarhttps://www.paez.ml/2019/10/formulario-de-google-que-se-adapta.html