Transcripción automática:
hola chicos que tal bienvenidos
seguramente les ha pasado que tienen su
página web tiene aquí todo bonito todo
precioso y tienen un formulario de
contacto y lo que desean es que dicho
formulario de contacto cuando se ha
resuelto bueno respondido por las
personas desean que dicha información
llegue a sus cuentas de correo
directamente a su opción de entrada
bueno pues el día de hoy como podrán ver
en pantalla les voy a mostrar cómo
podemos conectar sus formularios de
contacto de modo que cuando la gente los
conteste y le de enviar ustedes reciban
desde su cuenta de correo dicha dicha
información dicho envío por ejemplo
ahora mismo si yo abro mi correo podrán
ver que aquí está el correo que acá
venía cuando la información juanito
alimaña o la que estarán viendo qué
hongo y fecha envía bueno ahora de envió
una una entonces si les interesa
acompáñenme en el vídeo del día de hoy
[Música]
lo primero que voy a hacer es crear una
carpeta que en escritorio donde vamos a
tener el código que trabajaremos para
este tutorial voy a llamar tutorial
contacto y lo siguiente que haré es
dicha carpeta la voy a abrir con mi
editor en este caso voy a trabajar con
10 con triste siéntense libres de
trabajar con lo que deseen y aquí dentro
de tutorial contacto vamos a crear un
archivo que será un index html y la idea
aquí es simular que este es nuestro
sitio web que ya tenemos montado que
tenemos trabajado vamos a llamarlo
contacto idioma español y dentro del
body vamos a poner
wikis dentro de hoy vamos a poner un h
uno que diga contactamos muy bien y
ahora la idea es que pues que aquí esté
un formulario de contacto conforme vamos
a poner esto acá y aquí vamos a poner un
input y vamos a poner que más será bueno
un mensaje sí por qué no
y un botoncito
ya está muy bien esto es nuestro
formulario de envío con echarle un
vistazo para ver cómo se ve desde la
terminal así que han instalado nose en
su computadora aunque pueden hacer es
para previsualizar en tiempo real su
código es desde la terminal escriben
live server y esto es mostrar la vista
previa de su cocción como pueden ver ya
que tenemos el formulario que pide
nombre email mensaje y tiene un botón de
enviar vale entonces
vamos a revisar cuatro maneras en las
cuales pueden conectar su formulario con
su cuenta de correo la primera de ellas
como podrán notar gracias a la
sugerencia que me hizo este de kuwait
como podrán notar la primera manera o
digamos la manera pero y terminada por
la manera con la cual form fue concebido
es que cuando la gente deje sus datos y
le dé a enviar la idea es que este
formulario contacte algún servidor está
algún mackaine al cual le va a enviar la
información como puede ver aquí dice
método público la idea es que de forma
envía la información a este back-end el
back en el servidor recibe la
información hacia lo que tenga que ser
con información y bueno una de las cosas
que podría hacer es enviar un correo
desde ese servidor esta es la primera
manera
pero determinada es la idea con la cual
fue concebido form pero seamos honestos
nadie tiene tiempo para eso nadie tiene
tiempo tendrás montando un servidor lo
puedes montar en php en javascript con
out en go en python un punto net casi yo
es la primera de ellas la conos
campeonamos a trabajar la vamos a
desechar yo no salgo mucho más sencillo
y más rápido en realidad existen hoy día
muchísimos servicios gratuitos que
simulan este esta idea del servidor de
hecho vamos a echar un vistazo y vengo
aquí a google y busco algo como form
email no lo sé este free qué sé yo si me
vengo para acá algo hacer un vistazo hay
uno que he utilizado aquí está con
summit hay muchos servicios que ya se
encargan de poner esteban por ustedes
ellos ponen el servidor y usted esto lo
tiene que hacer es apuntar hacia el
servidor de estos servicios que son
gratuitos por ejemplo 15 se conecta a tu
formulario a tu correo no requieres php
ya vas que no requieres nada de back-end
translacionales con estos servicios y
aquí por ejemplo a este caso particular
de form submit puntocom tiene un vistazo
todo lo que tiene que hacer es en action
copiar este enlace y obviamente aquí en
your email vamos a poner
entonces quien acción vamos a borrar
todo esto acá voy a pegar y obviamente
aquí en vimeo vamos a cambiarlo por all
a las fit ya está esto es lo que va a
suceder en esta segunda forma de
conectar el formulario con correo es que
la gente contesta el formulario va a
enviar el formulario content con
contacta a este servidor y el servidor
que pertenece a ellos se encarga de
enviarnos el correo vamos a hacer una
prueba de vengo para acá nombramos poner
la suite o correo o la la suite o prensa
vamos a poner probando submit como yo le
doy a enviar
aquí me pide una pequeña prueba antispam
y me dice el formulario fue enviado
exitosamente regresar al sitio original
está ahí de vuelta al sitio y si yo abro
mi correo que tengo por acá notarán que
aquí está el envío que salió de johnson
mit puntocom dice hola alguien te envía
un formulario desde este sitio web
realmente éste este sitio web es el
servidor local en un mundo real es de
aquí dirían 11 google.com lacy punto t o
cualquiera que sea su sitio web dice
aquí está lo que enviaron nombre de la
suite o correo no escrito probando su
médico entonces esta es la segunda
manera la primera manera ustedes
funciones oa quien la segunda manera
utilizan el máquina en el servidor de
servicios gratuitos como fondos me punto
coche en un vistazo por los inversores
poner este pequeño nación la tercera
manera es muy similar a estar acá pero
regresemos esto acá notarán que este
sitio web esto que les estoy mostrando
ahora mismo no está publicado no está en
línea la gente real los usuarios en
general no puede acceder a mi página web
bueno pues la tercera manera de cómo
contactar su formulario con su sitio web
pero no con su correo es a través de él
para quienes no conozcan a white en el
país es un servicio gratuito por cierto
que se encarga de hospedar o de
desplegar o de publicar su código de
modo que sea accesible al público en
general por ejemplo aquí yo mismo estoy
iniciando sesión aquí abajo están mis
sitios web y ustedes pueden crear sitios
web o pueden publicar su código de dos
maneras la primera es a través de un
servicio que por ejemplo github am kate
beckett kit la app que se yo es la
primera manera entonces ustedes tendrían
que tomar su código y crear un
repositorio witthaut feedback decir la
app y luego desde aquí desde un early
fai jalan su código y publican su sitio
web o en este caso pueden hacer algo más
sencillo todavía nos vamos aquí al
obtener saints me quiera parecer todos
sus sitios web y hasta abajo les dice
que pueden este simple y sencillamente
poner su código aquí y es lo que haremos
vamos a minimizar esto será minimizar
esto acá también y este código esta
carpeta
vamos a pasarlo así lo que haremos es
tomar este código que ya trabajamos y
vamos a arrastrarlo
y vamos a hacer unos segundos y hasta el
ifai acaba de publicar nuestro código
para que sea accesible al público en
general es en la central que aquí está
lo que trabajamos pero esto lo puedes
aguayo persona te ha concitado punto
goal.com a facebook.com remo bien ahora
esto como resuelve el tema del
formulario muy sencillo voy a rezar aquí
a la gestión de este sitio web vas a
cambiar el nombre digna cobrando esto de
vuelta vamos a comer el nombre a este
tutorial formulario guarda muy bien este
nuevo enlace buenos aquí desde la
gestión de este código de este sitio web
del ifai tiene un servicio que se llama
forms y todo lo que tienen que hacer
para conectar el formulario a su cuenta
de correo es agregarle el atributo de
metlife y esto lo que tiene que hacer
dónde me voy a regresar aquí a mi código
voy a borrar esto porque ya no lo
necesito vamos a agregarle un nombre
reformular vamos a llamarlo
formulario contacto
y vamos a agregarle el atributo de
netflix
eso todo lo tienen que hacer entonces lo
que voy a hacer ahora es minimizar esto
de vuelta aquí a night live y vamos a
actualizar el código por eso me vengo
aquí a le place tomo esta carpeta la
arrastró una vez más y me va a
actualizar el contenido del sitio web
que vamos a actualizar la página
y pueden ver que lo que acabo de enviar
a la 113 ya está publicado visitemos
entonces este enlace y vamos a responder
vamos a ponerle nombre probando el ifai
email nelly fire with fire roba el
escrito probando net live.com vamos a
enviar
y como notarán recibimos una
notificación de que fue enviado nos dan
opción de volver al sitio nos trae de
vuelta el sitio web y aquí desde la
gestión de nardi fai se me voy a
formularios notarán que michelle tienes
estos formularios activos formular
contacto que acabo de nombrar así y me
dice tienes estos estos envíos vamos a
crear al parecer alguien que se llama
probando en el ifai con correo del ifai
arroba las y tomen vi un mensaje que
dice probando analí by puntocom
entonces como podrán ver así es como
estamos recibiendo desde este panel de
control todos los envíos que la gente
haga desde nuestro sitio web entonces
night live y no sólo nos permite enlazar
el formulario sino además nuestra opción
de publicar en línea nos hospedamos
porque es muy bloque muy genial pero
aquí seguramente usted están pensando
hoy espera un momento el título del
vídeo y lo que tú nos prometiste es como
conectar formulario con correo a lo
mejor usted no quieren estar entrando
aquí añade fallas está revisando si
alguien ya envió alguno bueno pues para
ello realizamos aquí a forms aquí en
ajustes si realizamos hasta abajo hay
una opción que dicen notificaciones de
formulario aquí vamos a crear una
notificación vamos a escoger correo y
vamos a pedirle que nos notifique a
nuestro correo y aquí puede escoger
quién que les notifique sobre cualquier
formulario que tengan o alguno en
específico a lo mejor si su sitio web es
muy grande
si sitio web es muy grande porque tengan
un formulario en contacto un formulario
en sugerencias un formulario en price
inc s yo bueno pues aquí podés [ __ ]
alguno en específico o todos en general
vamos a darle guardar y ahora ya
estaremos recién los notificaciones por
correo de hecho si yo visito el sitio
web vamos a contactarlos una vez más
vamos a ponerle el segundo contacto y me
un segundo contacto punto con mensaje
probando por segunda vez con
notificaciones por correo si le doy
enviar desde el enlace público el sitio
web
y abro mi correo
notarán que ésta dice con sumisión from
formulario contacto del ifai me notifica
y me pasa los datos nombre segundo
contacto email arroba segundo segundo
arroba contacto punto comenta aquí
probando por segunda vez con
notificaciones por correo entonces es
así como con este tercer método además
de conectar su formulario con su correo
pueden estar esperando su sitio web y
todo esto de manera gratuita créame que
mora es 100% gratis no pierden
absolutamente nada muy bien entonces la
primera manera ustedes construyen su
servidor su banking con javascript
lo que sea muy tedioso muy tedioso la
segunda manera utilizan el servidor
alguien más que se presten para este
tipo de servicios como forms meet punto
com o algún otro que pueda encontrar en
el granca y varios son la segunda manera
la tercera es utilizando una lista en la
cual no sólo podemos pero en sí sino que
además pueden conectar sus formularios y
la cuarta manera es es la siguiente
regresamos vamos a cerrar esto de aquí
y vamos de vuelta al código
aquí estamos de vuelta en el código ok
cuál es la cuarta manera la cuarta
manera es utilizando el meizu m8 es una
es una forma de digamos enlace y este me
auto puede puede utilizarse dos maneras
la primera es directa y sencilla la
segunda toma unas cuantas líneas de
color lo que podrían hacer es en lugar
de poner un formulario vamos a comentar
esto podrían poner un botón que diga
enviar correo el cual va a estar
envuelto en una corta y aquí en algorta
como this red vamos a pasarle un youtube
y ponen la dirección que deseen mail
o la roda la suite o seguramente esto yo
lo conocen lo que quizá no conozcan este
equipo en agregarle programs argumentos
o parámetros aquí podemos ponerle como
subject es igual a
probando y en cuerpo vamos a ponerle
probando en a los vamos a guardar
volvemos a nuestro local house
y aquí está enviar correo si yo hago
clic aquí lo que va a suceder es que me
va a abrir mi proveedor de correo me va
a poner el destinatario o la arroba la
citó me pone como como se llama esta
cosa soviets
como asunto lo que yo haya definido y en
cuerpo me pone lo que yo haya definido
estuve probando probando correo
recuerden que lo pusimos exista blake
probando cuerpo probando color entonces
lo que podrían hacer como cuarto método
es darle a la persona la capacidad de
describir aquí y que pueden enviar y
gasta lo envían ellos directamente desde
su correo pero esto tiene varios
problemas y uno de ellos es que yo les
prometí en el título del vídeo cómo
conectar su formulario con su correo y
aquí no estoy conectando ningún
formulario por esos bastardos ver
mintiendo bueno pues para el cuarto
método vamos a realizar esta conexión es
relativamente sencillo vamos a des
comentar esto de acá
de modo que aquí voy a regresar
las que no aguardan aunque aquí está el
formular la pregunta es cómo hacemos que
la gente conteste esto daca y se envía
por korn vamos a ocupar un poquito de
havas por vamos a quitar este botón
y vamos aquí agregar un poquito de
código lo primero es que a este botón
vamos a asignarle una idea que sea
enviar correo ya está muy bien bueno lo
primero es traernos este botón vamos a
ponerle el botón envió es igual a estar
aquí y luego lo siguiente es agregarle
un nivel de sener la idea si cuando la
gente haga clic en este botón se corre a
una función que haga lo siguiente lo
primero es prevenir que se actualiza la
página esto ocurre por defecto con los
formularios
lo segundo es obtener los datos de este
formulario los nombramos formulario
contacto lo siguiente es guardar estos
datos
y aquí ya se puede ver que estaba
siguiendo lo que carlos me recomendaba
pero no lo queremos es lo siguiente
vamos a ya que hemos prevenido el
default vamos a obtener estos datos que
hayan dejado en email y en mensaje y en
nombre podríamos decir con su email es
igual a aquí está con este nombre y con
su mensaje
ok
ya que tengamos estos datos la idea es
enviar el correo utilizando mail para
ello vamos a decir windows punto
location punto de red es igual a y aquí
vamos a poner mucho el correo que
hayamos definido vamos a pasar unos
cuantos parámetros como por ejemplo en
subject
vamos a poner lo envió desde formulario
y en cuerpo en gol vamos a hacer lo
siguiente vamos a pasar todos estos
datos pero como esto es una url no
podemos meter espacio donde hicimos los
especiales varió tenemos que
modificarlos si se van a google pone
hereu en kauder hay varias opciones voy
a entrar estar acá aquí puede poner su
mensaje y codificar lo a modo de que sea
elegible para este tipo de protocolo
debe poner nombre dos puntos correo dos
puntos
mensaje dos puntos y vamos a ponerle
algo así vamos a codificar lo y esto lo
que tendrían que poner en su erre el
body es igual a esto y obviamente en
lugar de poner a más las das vamos a
poner aquí
nombre en lugar de poner correo a las
vamos a poner correo y fíjense que lo
estoy poniendo con símbolo de dinero
brackets y el nombre de la constante
aquí en mensaje vamos a poner con lo
mismo mensaje pero para que esto de
dinero y brackets funcione este string
tenemos que cambiarlo por un gameplay
string con esta con esta comida elevada
bhakti que se llama en inglés
muy bien ya está no sé lo que iba fonsi
lo que vas a hacer ahora es que este
botón tiene unida en guys tener la vez
que damos clic en el botón del
formulario el formulario no va a
proceder vamos a guardar los datos que
hayan dejado aquí en email y nombre y
después vamos a enviarlos con youtube
vamos a dejar listos para ser enviados
por el usuario vamos a echarle un
vistazo ya que marque un problemita
aquí me faltó cerrarla a cerrar la
función
muy bien ya está regresemos al sitio web
y vamos a hacer la prueba nombre
probándome youtube youtube
con formulario
nada más probando
probando arroba hotmail quieres ponerle
probando en youtube con
formulario y hora de enviar vemos que va
a suceder
absolutamente nada y esto es por qué
todo
[Aplausos]
aquí hay un error fíjense nombre nombre
mensaje de mensaje email correo ojo con
esas constantes muy bien guardamos
regresamos acá vamos a ponerle probando
probando roba hotmail probando una vez
más le damos a enviar ya fíjense que lo
que va suceder es que me abre todo esto
me pone el destinatario me pone el
asunto y me pone los datos nombre
probando correo probando mensaje
probando de modo que lo que el usuario
les haya dejado en este el formulario lo
que se han escrito y hasta aquí listo ya
un solo clic para ser enviado y es así
como estaría funcionando la cuarta
manera de conectar su formulario con
este con su correo entonces es así
contaminados vídeo del día de hoy se les
está diciendo me gusta suscriban y poder
más contenido así y como siempre en los
comentarios pueden dejarme que les
gustaría ver en este canal nos vemos
[Música]