A Spanish how-to video (presented by David Castellanos) demonstrating how to create and publish a Gist form, obtain the iframe embed code, and place it into a website (example: ClickFunnels). The tutorial walks through form setup (title, logo, background, fields with required/optional settings), publishing the form to get a link and embed code, pasting the iframe into a site builder's custom HTML/JS element, adjusting width/height, applying CSS to center the form, and testing a submission that triggers the configured Gist workflow.
Chapters
Hola, ¿Qué tal? Bienvenido a otro video tutorial de Gist. En este video te voy a explicar cómo utilizar los formularios publicables de Gist embebidos en tu sitio web. Esto es una característica muy interesante porque te permite que en tu propio sitio web, si tienes tráfico que llegue por ahí de tus clientes o tus prospectos, etc. Puedes embeber formularios de Gist para que las solicitudes que hagan los clientes por ahí, ya sea solicitudes de cotización, de servicio, de lo que sea, sean llenadas en tu sitio web y en automático el disparo entre a Gist. Esto es una característica increíble que hemos lanzado hace algunos años y funciona bastante bien. Así que lo que vamos a hacer aquí es, yo voy a partir de un proceso que se llama servicio. Servicio es un proceso donde yo quiero que los clientes, cuando tengan un mantenimiento, un soporte qué hacer, me lo van a llenar en ese formulario y en automático quiero que el proceso inicie, se dispare, arranque y todo este asunto. Entonces, bueno, para eso mi proceso de servicio ya tiene un inicio. Si vamos aquí a cómo inicia, tiene de hecho dos inicios, el disparador manual y las solicitudes de formulario. Si tú no tienes un inicio creado desde formulario, pues basta con que le des clic en formulario y te va a empezar a pedir toda esta configuración. Tú le pones un texto, una descripción, tú le solicitas ciertos campos al cliente, etcétera. Subes tu logotipo, tu fondo, todo esto es personalizable, incluso la pestañita como se ve cuando ya está el formulario creado. Una vez que está creado el formulario, voy a hacer uno de cero para que empecemos todo esto. Voy a crear un nuevo formulario y aquí le voy a poner solicita un servicio. Este es el nuevo formulario 2. Le voy a poner, Voy a subir un logotipo que tengo por aquí. Este es el logotipo. Voy a subir un fondo que tengo por aquí también. Esto también de repente es prueba y error porque tienes que asegurarte que tu logotipo y tu fondo se vean bien una vez que el formulario esté creado. Cuéntanos, cuéntanos en qué te podemos ayudar. Voy a salir y cerrar, que esto no me está dejando. Listo. ¿En qué te podemos ayudar? Voy a solicitar en los campos de formulario ciertas cosas. Por ejemplo, a lo mejor quiero que me llene su nombre de contacto, su teléfono, su empresa o sucursal, su ubicación y a lo mejor que me diga su. Voy a poner aquí otro que sea su email, listo, su email vamos a pedir también yo voy a pedir su número de contacto, su email, teléfono, empresa, sucursal y ubicación, la ubicación la dejaré opcional y aquí básicamente yo le tengo que preguntar, oye vamos a ver si tengo un campo este, cuéntanos más detalles para conocer de qué trata tu solicitud, algunas fotos de referencia si quieres subirlas, vale la pena que estén y aquí pongo básicamente qué campos le quiero pedir a esa persona listo, una vez que ya está creado, ya está configurado yo puedo publicar los cambios y eso lo que hace es que si me voy nuevamente al inicio, al formulario 2, me generó un link y este link me permite, es un propio formulario, formulario en una pestaña, yo puedo abrirlo en otra pestaña, compartir ese link con los clientes y todo el asunto y lo que nos permite es hacer que se vea el formulario tal cual lo diseñamos los campos algunos son obligatorios, otros no una vez que lo llene y le dé enviar se va a iniciar el proceso que hemos configurado en este caso solicita un servicio, se me hace que está muy chiquito entonces lo voy a modificar un poquito solicita un servicio, vamos a hacerlo un poco más grande en otra tipografía, tajoma a lo mejor y negrita, vamos a ver qué tal se ve, le damos publicar y volvemos a abrir el formulario en otra pestaña y vemos que aquí ya se ve un poco más estético el título y tú puedes jugar con esto, esto no hay ningún inconveniente ya está, ahora sí que ya tenemos creado el link pero por otro lado, y es el motivo de este tutorial, nos genera un código embebido este código es para que tú se lo compartas a tu programador o si tú sabes hacer tu sitio web, lo que sea, es un iframe, es un código que tú lo pegas en tu página y va a jalar el formulario para esto yo voy a utilizar un creador de sitios web que se llama clickfunnels y tal cual ahí voy a copiar este código embebido para meterlo en mi sitio web vamos a hacerlo, yo estoy acá ya en clickfunnels, así lo puedes buscar, clickfunnels COM, voy a dejarte el link aquí en la descripción del video. Y tal cual yo ya tengo creado mi sitio web, este es el sitio web de Gist al momento en el que estoy grabando este video y voy a agregar un elemento. Y aquí este creador de sitios web, hay muchos en el mercado, no necesita ser este, te permiten estos creadores de sitios web, así como agregar elementos ya hechos, como por ejemplo, yo le puedo decir que me agregue un botón y así te permite agregar un código personalizado que es un HTML o un JavaScript. Esto así como WordPress, así como cualquier otro creador de sitios web, o incluso si tú creaste tu sitio web programando, pues bueno, ya sabes cómo hacerlo, tienes el iframe, tienes el código y ya está. Para los que no sean desarrolladores, basta con en estos creadores de sitio web drag and drop, como en este caso el Click Funnels, me permite agregar un código en mi sitio web. Y para esto yo tengo que pegar el código embebido que me generó mi formulario, en este caso mi formulario de servicio. Yo voy a pegar el código aquí, vamos a cerrarlo, le doy guardar y vamos a darle preview a ver cómo se ve ya embebido en mi sitio web. Como puedes ver, yo lo pegué justo después de este título de Comienza hoy a multiplicar tu productividad. Y mira, aquí está el formulario solicita un servicio, nada más que se ve como muy chiquito. Entonces, bueno, ¿Qué vamos a hacer? En el editor, acá en la otra pestaña, vamos a modificarle un poco las medidas, en vez de que mida 300, le voy a poner que mida 900 y en vez de 200 de altura le voy a pedir que mida 600, eso tú lo puedes hacer también. Y esto es simplemente modificar el ancho y el alto del formulario. Si le vuelvo a dar preview, mira ya como se ve, ya se ve un poco mejor el formulario. Y esto tú lo puedes tener embebido en tu sitio. Y vamos a hacer la prueba, aquí lo voy a poner, imagínate que David Castellanos escribe su email, su teléfono, su empresa, sus detalles, etcétera, etcétera. A lo mejor sube por ahí una foto y le da enviar. En ese momento te dice gracias por llenar, se ha enviado tu información y ya está, se vacía. Si yo me voy a Gist, vas a ver que en mis pendientes ya voy a tener una Solicitud del formulario 2 con los datos que recibí David demás, ¿Por qué? Porque en cuanto llenan ese formulario en automático Gist dispara el proceso y esa es la magia, entonces bueno, el chiste es que en tu sitio web, en este caso en el mío puedas tener este formulario embebido y claro se le pueden hacer un montón de cosas más, a mí me gustaría que estuviera centrado, creo que se ve más bonito entonces ese tipo de movimientos se les pueden estar haciendo en el editor aquí me parece que para eso ya necesitarías ayuda de un programador como para ponerle ciertos estilos y demás Aquí en Click Funnels me parece que hay que hacerlo con código, con código donde yo le digo mira vamos a generar un ID, este ID lo vamos a pegar y a este elemento le vamos a poner que Y esto digo por qué sé un poco de programación entonces pues lo puedo poner, si tú sabes pues ya está, si no se lo puedes pedir a alguien con el que estés trabajando que sepa de programación el chiste es que esto tenga un centrado y esto me parece que es un. Creo que es una line, no es un texto align si no me parece, si no me equivoco le voy a poner aquí que center OK, esto lo que debería hacer en teoría es que si yo guardo y lo vuelvo a ver debería mostrar el formulario centrado, vamos a ver si funciona, hay veces que hay que moverlo un poquito más y demás. Sí efectivamente ya está centrado a mi formulario y eso es usando código que se llama CSS, si no eres programador no pasa nada, puedes solicitar apoyo al respecto y así es como se va a ver la página con este formulario aquí y tú lo puedes meter en alguna de tus pestañitas según como tengas creado tu sitio web. Entonces de esta manera es como se embeben los formularios de Gist en tu sitio web, sea cual sea el motor que uses, yo en este momento usé un editor de páginas web drag and drop, puedes utilizar muchos, hay demasiados en el mercado muy fáciles de usar, así que aprovecha, te voy a dejar el link del que yo uso que es clickfunnels. Com y pruébalo, vale la pena Así que bueno, te veo en el siguiente tutorial de Gist, hasta la próxima.
