Creando un formulario de contacto funcional con JavaScript

[@LeonidasEsteban]

Aquí el código del proyecto github.com/LeonidasEsteban/elisa-porfolio/tree/formulario-a y aquí si quieres iniciar de cero leonidasesteban.com/proyectos/portafolio-elisa

[@tumad2]

Excelente video!!, Como dato curioso a nivel de performance si nuestro selector es un ID es mejor usar getElementById es mucho mas veloz que el querySelector

[@matipedroso703]

Gracias enzo fernandez, me salvaste el laburo

[@john160797]

Excelente clase, capturar los elementos del form con la clase formData es muy práctico, las mejores crack

[@LeonidasEsteban]

Es súper bueno si te apoyar de los atributos igual para la próxima técnica usaremos el atributo target y method del formulario.

[@666heavydee_sixx]

Excelente tutorial, hace semanas que estoy tratando de hacer algo similar y tu video fue mi salvación. Gracias.

[@yurietmosquera6400]

muchas gracias, muy bien explicado y facil de entender, lo hare con Angular

[@pasheloo]

pfff llevo toda la tarde intentando hacer esto con PHP (no se nada de PHP) y vienes tu a revolverme el problema y encima con Js que me gusta mucho más. Para mi el TRUCAZO es este video completo jajajaja definitivamente me suscribo XD

[@facundoterrens1769]

hola buenas! hay alguna forma de hacerlo automatico? osea sin que te lleve hacia la ventana de mail?

[@FascompInformatica]

Wow, Excelente video y "TRUCAZO". Qué manera tal pulcra de eliminar el backend. Muchas gracias Leonidas por el contenido. Solo faltó la verificación de campo que esa es para el siguiente video. Muchísimas Gracias.

[@efrainhernandez861]

Tremendo trucazo. Espero un día llegar a tener ese nivel de Frontend!

[@LeonidasEsteban]

❤️

[@eduardorobles7973]

Hizo un hello world! WTF???

[@ohmazing-rf2fr]

Hola Excelente video. Y se puede hacer que ese formulario capture datos de clientes que ingresen parcialmente datos sin apretar enviar?

[@juanjopastillas84]

eres un jefazo grande Leo!

[@luisardila8185]

Yo dándome en la cabeza con php porque no me funcionaba. Y para que pagar hosting si tengo una página estática y con este trucazo ya me ahorro un billetico. Gracias Leónidas.

[@LeonidasEsteban]

jejeje a mi patrocinador no le gusta esto 😅 ah pero también venden dominios por si te hace falta ;)

[@eduardorobles7973]

No se debe ocupar esto en una app seria!!! Salvo que no te interese la experiencia de usuario y tengas la seguridad de que el usuario emplea un gestor de correo en su máquina.

[@felipetechcoding5173]

Oh yo pensé que también explicarías el de la API, estaré esperando esa también. Muy buen video por cierto! Conocía el mailTo pero no sabía cómo se auto-rrellenara toda la info! Gracias!

[@LeonidasEsteban]

Atento al lunes que sale vídeo de esto 🪄

[@alejandrorios6999]

Genial. Era lo que necesitaba

[@mr.redluoy5419]

muchas gracias !! justo lo que andaba buscando...

[@lidiogonzalezgabriel9557]

bro sos un crack, perdon si te llegaron mesajes a tu correo de mi, estaba haciendo purebas jajaj saludos hermanos sos el puto amo.

[@raulnovas2562]

Que buen video,que bien explicado!!!... Ya me pongo a comprar tus cursos!!.. Un saludo desde Argentina.

[@LeonidasEsteban]

❤️❤️❤️❤️

[@joseleonrs9817]

Extrañamos a Leonidas 🎉🎉

[@LeonidasEsteban]

🥹 gracias, volveré

[@joseleonrs9817]

@@LeonidasEsteban bendiciones campeón y éxito en lo que estés haciendo 🙏

[@alexadictiva]

Me encantó, me encantó, meeeee encantóoooooo... Pero tengo una pregunta: como haces si el cliente no tiene el gestor de correos funcionando en la pc?

[@LeonidasEsteban]

Buena pregunta, para esto la 2da opción que sale el lunes.

[@eduardorobles7973]

No vayas a usar ese método en una app seria!!

[@veronicainestrejo3592]

Hola amigo muy útil tu video.. podre usar este formulario para invitación digital web y que mis invitados respondan si van a la fiesta ?

[@LeonidasEsteban]

Tal cual!

[@totimang]

Muy bueno, muchas gracias!

[@Futu8D]

Que Bueno Leonidas me inspiras

[@LeonidasEsteban]

Gracias por tus palabras, a seguir creando y espero te esté sirviendo el contenido

[@runniiter]

y si utilizo vue3.....como deberia de hacerlo??help me pleaseeee!! necesitaria urgente ayuda...me encanto tu video, te sigo ya lo explicas genial Leonidas

[@miguelcarrillo6566]

También falla cuando no tienes ningún gestor de correos predefinidos en el sistema.

[@eduardorobles7973]

No se usa este método para una app seria.

[@fabiansanchez6653]

super, necesitaba justo algo así, muchas gracias Leonidas

[@LeonidasEsteban]

Gracias por apreciarlo Fabián 🤘

[@Deivcode]

Como siempre leonidas aportando valor. sus clases son increibles. gracias master. Saludos.

[@oliverloops.]

Excelente el "Que Trucazo" de hoy 👌

[@cristianmendoza1915]

gracias por el video, es posible hacer lo mismo pero adjuntando un archivo?

[@luismanuel9113]

como hago que mi boton funcione con jQuery, y hacer la validación en PHP y el envio de los correos igual en PHP con PHPmailer

[@fidelp27]

Justo lo que necesitaba, mil gracias por compartir. Tengo una consulta, cómo le puede agregar saltos de línea al cuerpo del mensaje? en caso de que desee enviar el mensaje, nombre, teléfono uno debajo del otro? Gracias de vuelta

[@diegofernandez9124]

Estimado yo genere mi formulario con bootstrap, puedo aplicar tus pasos para dejarlo funcional o debo modificarlo?

[@carlista13]

Hola, muy buen video, quisiera hacerte una consulta, he leído mucho sobre: "Content Security Policy (CSP)" ¿éste formulario que hiciste cumple con este nivel de seguridad?

[@WillansJunes]

Excelente tutorial, muchas Gracias y esperamos mas de estos.

[@fatiM23C_]

Muchas gracias me sirvió de mucho estaba buscando algo así y tú video fue el único que me ha servido, gracias :3 👍🏻

[@jesla-dev888]

Leonidas mi sensei quiero que me brindes todo tu conocimiento ,un descuento para comprar tu cursos por favor .

[@LeonidasEsteban]

Ahora mismo el curso de Figma y el Flexbox están en ofertón \o/ si quieres comprar más te doy un cupón por volumen si me escribes a [e-mail]

[@marcon7580]

Buen video, gracias Leónidas

[@LenRM]

👏🏻👏🏻 Excelente explicación. 💕

[@LeonidasEsteban]

Siempre quise hacer una funcionalidad sencilla para apoyar los cursos introductorios y hace poco aprendí esto y me lo andaba guardando 😅

[@dearalex2056]

Ufffff que videaso.

[@lehder-Harold]

Muchas gracias, esta genial...!!

[@ldstudio3044]

Excelente video gracias

[@estebanfacundorojas2116]

Hola hermano Esteban! Una consulta, hice los pasos exactamente igual que vos pero no me funciona correctamente. No me copia el mensaje en el correo!!

[@DiegoLopez-lg8de]

Hola Tu forma de enseñar es buena, ¿Podrías ayudarme a que se envié el correo automáticamente sin abrir la pestaña de Windows? Por Favor¡

[@LeonidasEsteban]

Como sabía que te ibas a preguntar eso te hice otro video kzbin.info/www/bejne/p6WraYOCqt5kec0

[@DiegoLopez-lg8de]

@@LeonidasEsteban Gracias¡¡ Lo había chequeado y creí que no me servia. Que buenos Videos.

[@TUTOSPIXEL]

Te extrañe bro, saludos Leonidas

[@LeonidasEsteban]

😅 por lo menos ya hay una clase más pendiente de este mismo tema usando otro método así que por lo pronto nos vemos el lunes

[@dibethz]

y si no quiero que se habrá gmail y que se mande desde la pagina web?

[@roninjin123]

Excelente video Leonidas

[@LeonidasEsteban]

Muchas gracias Edgar, que bueno que no te olvidaste del canal T_T estábamos perdidos.

[@sxtcliffe]

Lo malo es que el formulario no lo tenés validado, me está costando mucho mantener el form validado con js y me identifique los datos mal ingresados y al mismo tiempo envié mail, si tenés una solución por favor contestame

[@julietaguillenarancibia6169]

HOLA, acabo ver tus videos, tengo 15 años y quiero aprender a programar, tengo una mac y no sé por donde puedo empezar, que video ver o que apps tengo que usar, estoy desorientada,, me ayudarías muchísimo si respondes, un gran saludo ❤️🥰😢

[@julianandresmicoltalemus8476]

Para que se nombra una variable con $? Es por práctica? Excelente vídeo

[@LeonidasEsteban]

Si, lo explico en el vídeo.

[@josuetorres2905]

5:30

[@juanescid]

HOLA PODRIAS COLOCAR EN TU DESCRIPCION EL CODIGO COMPLETO PARA INSERTAR EN MI PAGINA WEB

[@oscarleonardoperegrinaoroz5925]

SE PUEDEN PONER DOS DESTINATARIOS?

[@BoyGamer22]

Eres una bestia.

[@LeonidasEsteban]

Me están escribiendo cosas muy chidas, gracias, seguiré haciendo clases cortas para el canal.

[@eltonchavez]

Muy buen trucazo ! excelente video

[@LeonidasEsteban]

Definitivamente esto nos saca de apuros si recién iniciamos o no queremos hacer nada sofisticado

[@linuxyelarte1641]

hola amigo gracias, he implementado el código para que los mensajes escritos en el fomulario me lleguen o sean enviados a mi correo de gmail pero no llega nada estas seguro que no requiere de otra cosa mas? lo que he cambiado es el correo por el mio, es así ?, hola me parece que tu aplicación funciona con un cliente de correo? estoy usando fedora 34 y yo no tengo, ni uso ningún cliente de correo, si es así de que otra manera funciona tu aplicativo sin recurrir a ningún cliente de correo? gracias

[@soldadopreciso]

Saludos leonidas, go ahead.

[@Maximo4ever]

Gracias broo :D

[@rodrigod5625]

Men , cual es tu opinión de Blazor , siento que react es mucho rollo instalar dependencias a cada rato, es agobiante aveces y no tienes las referencias a definiciones (aveces), Blazor es más limpio en ese aspecto.

Dos dislikes (por ahora). Dos personas/cuentas que sólo aplican dislike y estoy seguro de que ni siquiera tienen un argumento para eso en un video de alguien escribiendo (buen) código. Que se pudran. p.d.: @LeonidasEsteban, tremendo trucazo! Excelente video.

[@LeonidasEsteban]

jajaja lo escribiste y subió a 7 😂

@@LeonidasEsteban nooooo! No era mi intención jajaja perdón Leo!

[@LeonidasEsteban]

Jajajajaj tranqui, muchas gracias por tu apoyo y ni modo si a alguien no le caigo bien 🤷‍♂️

@@LeonidasEsteban esa es la actitud. A continuar, nada más.

[@eduardorobles7973]

Yo di LIKE. Pero toma en cuenta que este "truco" que enseña NO DEBE SER USADO en un sitio o web app serios. Salvo que no te interese la experiencia de usuario y tengas la CERTEZA de que el usuario emplea un gestor de correo en su máquina.

[@nameteGM]

necesito una forma que se envie directo ese correo

[@merlosigloxxi-capacitacion]

Muy buena tu forma de explicar, TE FELICITO! ya me SUSCRIBI y sobre este tema del formulario me gustaría enviar como parte de los datos que explicaste, tambien, el nombre o el ID del botón de contacto seleccionado, suponiendo que tengo varios llamados a la acción de CONTACTO en una misma pagina a modo de conocer hasta donde llega el cliente en mi pagina para luego pedirme mas info o contactarme, que le agregariamos a este codigo? Muchas gracias por tomarte el tiempo de leer mi comentario.

[@soycmramos]

¿Para qué es el dólar ($) cuando se declaran las variables?

[@LeonidasEsteban]

Solo se lo agrego a variables que contendrán elementos de dom como valor

[@anggelogomez9319]

esto sirve para poder hacer una section de conctato para mi portafolio y me puedan enviar mensajes a mi correo?

[@LeonidasEsteban]

Es exacto lo que hacemos

[@anggelogomez9319]

@@LeonidasEsteban Ok amigo, otra pregunta en mi portafolio hice un apartado de Descargar CV, y no se como poner mi CV como pdf y que al darle click los lleve a la pagina del pdf les deje descargarlo y asi como hacen todos, no se como ponerlo, me puedes explicar? te lo agradecería

[@LeonidasEsteban]

Agrégale el atributo download al a

[@anggelogomez9319]

@@LeonidasEsteban y meto el curriculom pdf a la carpeta y en el href le pongo el pdf? osea asi y meto el pdf desde la carpeta que estoy creando el portafolio?

[@anggelogomez9319]

@@LeonidasEsteban osea quiero que te lleve como a otra pagina donde puedan ver el pdf y ahí e visto que otros programadores lo hacen y al darle a ese cv sale en la otra pagina imprimir, descargar y asi

[@bujurulu]

seria interesante conectarlo con firebase...

[@LeonidasEsteban]

Esto seguro es súper fácil, excepto que nunca se mandaría un mail y tocaría revisar el Dashboard para ver si alguien nos contactó

[@bryaneduardoruizdelgado5811]

un crak

[@aldairz7]

se puede hacer lo mismo con formularios de google?

[@LeonidasEsteban]

Si, pero no puedes personalizar el diseño

[@gustavomanchuca6919]

cual es tu tema de VSC amigo?

[@LeonidasEsteban]

Seti Monokai

[@lautarodebasto8448]

Google no penaliza el SEO por ese "trucazo"? el adblocker no lo detecta como ad?

[@LeonidasEsteban]

Para nada

[@m4estudio]

Recomiendan hostinger para wordpress?

[@LeonidasEsteban]

Súper si.

[@m4estudio]

¿Cuál es la diferencia con siteground? :)

[@LeonidasEsteban]

Que ellos no me patrocinan 😬 pero a ojo de Frontend se ve medio chafa el servicio de ellos, hostinger se ve sólido pero no me creas, úsalo y ve si es lo tuyo. A veces las herramientas de administración lo son todo.

[@m4estudio]

@@LeonidasEsteban Gracias ❤️

[@eduardorobles7973]

En general NO SE RECOMIENDA USAR WEB SERVERS compartidos por SEGURIDAD (GoDaddy, Hostinger..) sólo que tu presupuesto sea extremadamente bajo (peor es nada).

[@enriqueruiz320]

programación reactiva con rxjs

[@josemanuelariashernandez6604]

messirve

[@Invicto12]

Como se hace en backend?

[@LeonidasEsteban]

Puedes usar APIs como Sendgrid o crear tu propio servidor SMTP

[@italobarzola631]

👏👏

[@leonardovalenzuela6976]

Nunca lo envío.....

[@franklinfernandez4495]

la contra es muy grande

[@cr1s999]

1st

[@LeonidasEsteban]

Eso fue rápido

[@matiassaitam2837]

No entendí un carajo

[@LeonidasEsteban]

Lo siento

[@kalednarino7868]

Buen video, muchas gracias