Creando un formulario de contacto funcional con JavaScript

Подписаться 48 тыс.

Просмотров 51 тыс.

50% 1

Mira las clases gratuitas del curso de JavaScript para React iniciando sesión en 👉
leonidasesteban.com/login?nex...
📼 Videos recomendados:
Creando un formulario de contacto funcional con JavaScript • Envío de formulario de... Form Data - leyendo y enviando archivos al servidor • Form Data - leyendo y ...
Forms and Overlays • Formularios y Overlays
El nuevo LeonidasEsteban.com • El nuevo LeonidasEsteb...
Patrocinador:
Hostinger 👉 www.hostg.xyz/SH6Yh
Cupón 👉 NOTERINDAS
🤝🏽 Obtén beneficios extras y únete a la comunidad
/ @leonidasesteban
🔵 Sígueme para ver él detrás de cámara y contenido exclusivo:
/ leonidasesteban
/ leonidasesteban
github.com/leonidasesteban

Наука

Опубликовано:

14 апр 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 124

@LeonidasEsteban 3 года назад

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

@666heavydee_sixx Год назад

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

@Deivcode 3 года назад

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

@WillansJunes 2 года назад

Excelente tutorial, muchas Gracias y esperamos mas de estos.

@fatiM23C_ 3 года назад

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

@tumad2 3 года назад

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

@yurietmosquera6400 Год назад

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

@FascompInformatica 3 года назад

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.

@john160797 3 года назад

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

@LeonidasEsteban 3 года назад

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.

@mr.redluoy5419 2 года назад

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

@marcon7580 3 года назад

Buen video, gracias Leónidas

@totimang 11 месяцев назад

Muy bueno, muchas gracias!

@lehder-Harold 3 года назад

Muchas gracias, esta genial...!!

@matipedroso703 Год назад

Gracias enzo fernandez, me salvaste el laburo

@alejandrorios6999 Год назад

Genial. Era lo que necesitaba

@raulnovas2562 2 года назад

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

@LeonidasEsteban 2 года назад

❤️❤️❤️❤️

@juanjopastillas84 Год назад

eres un jefazo grande Leo!

@kalednarino7868 Год назад

Buen video, muchas gracias

@fabiansanchez6653 3 года назад

super, necesitaba justo algo así, muchas gracias Leonidas

@LeonidasEsteban 3 года назад

Gracias por apreciarlo Fabián 🤘

@ldstudio3044 2 года назад

Excelente video gracias

@oliverloops. 3 года назад

Excelente el "Que Trucazo" de hoy 👌

@facundoterrens1769 3 года назад

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

@LenRM 3 года назад

👏🏻👏🏻 Excelente explicación. 💕

@LeonidasEsteban 3 года назад

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

@felipetechcoding5173 3 года назад

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 3 года назад

Atento al lunes que sale vídeo de esto 🪄

@TUTOSPIXEL 3 года назад

Te extrañe bro, saludos Leonidas

@LeonidasEsteban 3 года назад

😅 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

@Maximo4ever 3 года назад

Gracias broo :D

@dearalex2056 2 года назад

Ufffff que videaso.

@pasheloo 2 года назад

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

@diegofernandez9124 Год назад

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

@Futu8D 3 года назад

Que Bueno Leonidas me inspiras

@LeonidasEsteban 3 года назад

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

@roninjin123 3 года назад

Excelente video Leonidas

@LeonidasEsteban 3 года назад

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

@eltonchavez 3 года назад

Muy buen trucazo ! excelente video

@LeonidasEsteban 3 года назад

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

@soldadopreciso 3 года назад

Saludos leonidas, go ahead.

@lidiogonzalezgabriel9557 2 года назад

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

@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?

@efrainhernandez861 3 года назад

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

@LeonidasEsteban 3 года назад

❤️

@eduardorobles7973 3 года назад

Hizo un hello world! WTF???

@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

@linuxyelarte1641 3 года назад

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

@fidelp27 3 года назад

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

@BoyGamer22 3 года назад

Eres una bestia.

@LeonidasEsteban 3 года назад

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

@joseleonrs9817 9 дней назад

Extrañamos a Leonidas 🎉🎉

@LeonidasEsteban 9 дней назад

🥹 gracias, volveré

@joseleonrs9817 9 дней назад

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

@cristianmendoza1915 Год назад

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

@bryaneduardoruizdelgado5811 3 года назад

un crak

@miguelcarrillo6566 3 года назад

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

@eduardorobles7973 3 года назад

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

@estebanfacundorojas2116 2 года назад

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!!

@dibethz 2 года назад

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

@oscarleonardoperegrinaoroz5925 2 года назад

SE PUEDEN PONER DOS DESTINATARIOS?

@merlosigloxxi-capacitacion 3 года назад

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.

@juanescid 2 года назад

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

@italobarzola631 3 года назад

👏👏

@rodrigod5625 3 года назад

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.

@veronicainestrejo3592 11 месяцев назад

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 11 месяцев назад

Tal cual!

@alexadictiva 3 года назад

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 3 года назад

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

@eduardorobles7973 3 года назад

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

@josemanuelariashernandez6604 2 года назад

messirve

@sxtcliffe 5 месяцев назад

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 3 года назад

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 ❤️🥰😢

@luisardila8185 3 года назад

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 3 года назад

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

@eduardorobles7973 3 года назад

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.

@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

@gustavomanchuca6919 3 года назад

cual es tu tema de VSC amigo?

@LeonidasEsteban 3 года назад

Seti Monokai

@nameteGM 11 месяцев назад

necesito una forma que se envie directo ese correo

@aldairz7 2 года назад

se puede hacer lo mismo con formularios de google?

@LeonidasEsteban 2 года назад

Si, pero no puedes personalizar el diseño

@jesla-dev888 3 года назад

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

@LeonidasEsteban 3 года назад

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 me@leonidasesteban.com

3 года назад

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 3 года назад

jajaja lo escribiste y subió a 7 😂

3 года назад

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

@LeonidasEsteban 3 года назад

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

3 года назад

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

@eduardorobles7973 3 года назад

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.

@soycmramos 3 года назад

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

@LeonidasEsteban 3 года назад

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

@julianandresmicoltalemus8476 3 года назад

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

@LeonidasEsteban 3 года назад

Si, lo explico en el vídeo.

@josuetorres2905 3 года назад

5:30

@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

@mrbot1988 3 года назад

Como se hace en backend?

@LeonidasEsteban 3 года назад

Puedes usar APIs como Sendgrid o crear tu propio servidor SMTP

@lautarodebasto8448 2 года назад

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

@LeonidasEsteban 2 года назад

Para nada

@DiegoLopez-lg8de 3 года назад

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 3 года назад

Como sabía que te ibas a preguntar eso te hice otro video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qtH8PLuy1Ck.html

@DiegoLopez-lg8de 3 года назад

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

@cristophervargasarias1982 3 года назад

1st

@LeonidasEsteban 3 года назад

Eso fue rápido

@bujurulu 3 года назад

seria interesante conectarlo con firebase...

@LeonidasEsteban 3 года назад

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ó

@m4estudio 3 года назад

Recomiendan hostinger para wordpress?

@LeonidasEsteban 3 года назад

Súper si.

@m4estudio 3 года назад

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

@LeonidasEsteban 3 года назад

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 3 года назад

@@LeonidasEsteban Gracias ❤️

@eduardorobles7973 3 года назад

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