Línea de Código
  • HTML5
  • Java
  • Javascript
  • HTML
  • CSS
  • jQuery
  • PHP

Línea de Código
Aprende a Programar

No Te Pierdas:

  • Foro
  • Python
  • MongoDB
  • NodeJS
  • Bootstrap
  • Descargas de Código Fuente
  • Vídeos
  • Hola Mundo

Enviar emails desde una página web

27/Feb/2009 HTML HTML Email, HTML Enlaces, HTML Form 33 Comentarios

Aunque al día de hoy casi todas las páginas están versadas en uno u otro lenguaje de servidor: ASP, PHP, JSP,… existe un amplio espectro de páginas desarrolladas en HTML. Casi siempre con la inestimable ayuda de un editor web. Y es que es mucha la gente, que con unos conocimientos mínimos de Internet, se lanza a este para contarle algo al ciber espacio. E incluso habrá sitios dónde podramos insertar código HTML y que no permite utilizar otro lenguaje

Y ya puestos, y una vez que nos hemos currado una página web, nos apetece que la gente comparta con nosotros su opinión sobre la misma. O simplemente se ponga en contacto con nosotros.

Una vez en esta tesitura, lo más fácil sería poner un texto que sea un enlace (o no) con nuestra dirección de email. Aquí, le estamos dando al comunicante solo nuestra dirección y el, la utilizará para contarnos lo que quiera. Si quieres tomar esta opción léete el articulo «Propiedades de los enlaces de email» el cual te ayudará a darle más potencia a tus enlaces de email.

Pero claro, puede ser que queramos, que cuando nos escriba, rellene cierta información que con el email no sabremos nunca si nos la va a enviar o no. Para ello tenemos los formularios. Y será entonces cuando queramos que nos envíe lo relleno en el formulario.

En este punto tenemos dos opciones. O bien tiramos de algún lenguaje de servidor (para aludidos, no tiene desperdicio Mandar emails con JavaMail)

Para que el usuario nos envíe el formulario utilizando HTML solo tendremos que hacer una cosa. Poner «mailto:[email protected]» en el campo action del formulario. Quedándonos un código HTML como este, mediante la etiqueta FORM:

<form action="mailto:[email protected]"></form>

Con esto conseguiremos que el usuario nos envíe un email con la estructura del formulario.

Una vez montando nuestro formulario veremos que si le damos a enviar el texto recibido puede ser algo como esto:

textfield=victor&textfield2=victor%40miemail.com&textarea=cojonuda

El problema es que para diferenciar las diferentes partes del mensaje, el navegador utiliza los identificadores de los campos. Es por ello que es bastante conveniente el modificarlos. Para tal fin hay que modificar el campo name de los campos del formulario. Podríamos ponerlos así:

<input name="nombre" type="text" />

Ahora, la cadena recibida, sería la siguiente:

nombre=victor&email=victor%40miemail.com&opinion=cojonuda

Aunque sigue siendo una cadena críptica, es algo más clara que la anterior.

Además tenemos que tener en mente un par de cosas. La primera es que esto solo funcionará si el usuario tiene un programa de correo electrónico en su ordenador (Outlook, Outlook Express, Eudora…). Hay que tener cuidado, ya que aunque es raro que el ordenador no tenga un programa de correo electrónico, puede darse el caso.

La segunda es que aunque nosotros le hayamos puesto los campos (incluso poniéndolos como obligatorios -podríamos usar JavaScript-), el usuario tiene la capacidad de modificar el email antes de enviarlo.

Aún con todo, esto es una buena solución para que se pongan en contacto con nosotros de forma sencilla.

Al final nos quedará el siguiente formulario:

<form action="mailto:[email protected]" method="post" name="form1">
  <label for="nombre">Nombre: </label>
  <input id="nombre" name="nombre" type="text" />
  <label for="email">Email: </label>
  <input id="email" name="nombre" type="text" />
  ¿Qué te pareció la página?
  <textarea id="opinion" name="opinion"></textarea>
  <input name="Submit" type="submit" value="Enviar" />
</form>

 

Twittear
Compartir18
Compartir
Pin
18 Compartir

Publicaciones relacionadas:

Propiedades de enlaces de email Página web para descargar archivos Combos con imágenes Imagen con enlace en HTML Enviar SMS desde Web

Vídeos sobre HTML


33 comentarios en “Enviar emails desde una página web”

Víctor Cuervo

Jose

diciembre 26, 2022 - 8:05 pm

hola

Responder
Víctor Cuervo

Carmen Mendoza

marzo 4, 2021 - 11:40 pm

Y tengo el código en html, pero cuando hago la prueba para enviar un corroe desde la página no envía nada, y no recibo nada al correo que tengo del alojamiento.

 

 

<form method=»post» action=»mailto:[email protected]» enctype=»text/plain»>

<div class=»control-group form-group»>

<div class=»controls»>

<label>Nombre:</label>

<input type=»text» class=»form-control» id=»name» required data-validation-required-message=»Please enter your name.»>

</div>

</div>

 

<div class=»control-group form-group»>

<div class=»controls»>

<label>Email:</label>

<input type=»email» class=»form-control» id=»email» required data-validation-required-message=»Please enter your email address.»>

</div>

</div>

<div class=»control-group form-group»>

<div class=»controls»>

<label>Mensaje:</label>

<textarea rows=»10″ cols=»100″ class=»form-control» id=»message» required data-validation-required-message=»Please enter your message» maxlength=»999″ style=»resize:none»></textarea>

</div>

</div>

<div id=»success»></div>

<button type=»submit» class=»contact-btn btn»>Enviar Mensaje</button>

</form>

Responder
Víctor Cuervo

stiven

enero 26, 2021 - 11:23 pm

se vuelve muy difícil mas cuando hay que enviar un mailto de mensaje lo mas fácil seria copiar una captura de imagen muy parecida a la página original luego crear un formulario con dos text box y un boton y agregar un correo electrónico personal desde el formulario

Responder
Víctor Cuervo

Hector

octubre 1, 2020 - 10:59 am

hola me ha servido pero hay un problema y es que cuando pruebo de ponerlo en mi propia pagina me dice que no es seguro y que el mail no estara encriptado como medida de seguridad.
ademas no me llega

Responder
Víctor Cuervo

Sergio

agosto 6, 2020 - 1:16 am

Como se que ya se envío mis datps

Responder
Víctor Cuervo

Carlos Díaz

junio 4, 2020 - 3:33 pm

Hola Víctor,

¿Cómo puedo hacer para conocer el email al que es enviado un formulario web?

Gracias, un saludo!!

Responder
Víctor Cuervo

Víctor Cuervo

junio 7, 2020 - 11:04 pm

Hola Carlos Díaz,

La verdad que es muy complicado porque lo normal es que el formulario se envié a un programa en un servidor que sea el que realiza el envío del emai. Y así no se puede saber. Si el formulario es como el descrito arriba te bastará el ver el código fuente y buscar el formulario.

Puedes ver el código fuente de una página tal y como se explica en http://lineadecodigo.com/javascript/ver-el-codigo-fuente/

Espero que te sea de ayuda.

Responder
Víctor Cuervo

Carlos Díaz

junio 9, 2020 - 12:47 am

Gracias Víctor,
No es como el descripto arriba. Evidentemente se envía al servidor y desde ahí manda el email. No sabia que funcionaba así y esperaba estuviera el dato dentro del código de la página.
Un saludo,
Carlos

Responder
Víctor Cuervo

Víctor Cuervo

junio 9, 2020 - 9:43 am

En ese caso no hay nada que hacer :-(

Responder
Víctor Cuervo

carlos

mayo 16, 2020 - 11:25 pm

Gracias por compartir sus conocimiento, estoy diseñando una pagina web y quiero que al momento de registrarse un cliente, le envie un email al administrador y uno al cliente, me puede ayduar?

Responder
Víctor Cuervo

Víctor Cuervo

mayo 18, 2020 - 9:37 am

Buenas Carlos,

En primer lugar darte las gracias por tu mensaje. Para el tema del envío de emails necesitas tener algún programa que codifiques en el servidor. Ya sea con Java, PHP, NodeJS, Python,… Si quieres seguir esa vía tienes algunos ejemplos en:

Con PHP. http://lineadecodigo.com/php/enviar-email-con-formato-html-en-php/
Con Java. http://lineadecodigo.com/java/mandar-emails-con-javamail/
Con ASP (ya en desuso, pero sirve como ejemplo). http://lineadecodigo.com/asp/mandar-emails-con-aspemail/

Si no quieres complicarte la vida programando o no tienes las capacidades te aconsejaría utilizar algún servicio de los que existen en Internet para el envío de correos.Yo, por ejemplo, en alguna web utilizo https://www.wufoo.com/gallery/templates/forms/ Aunque si buscas por Internet encontrarás servicios de email que son sencillos de integrar en las webs.

Espero que el mensaje te oriente.

Saludos.

Responder
Víctor Cuervo

Aztekium.pl

junio 4, 2018 - 8:11 am

Información valiosa
Muy buen artículo!

Responder
Víctor Cuervo

José Salazar

diciembre 20, 2017 - 5:55 pm

Buenas tardes, utilice su código en mi sitio, pero, no funciona, cuando lo ejecuto para enviar un correo de prueba se activa automáticamente el outlook de windows. Que debo hacer para que esto no suceda?.

Responder
Víctor Cuervo

Víctor Cuervo

diciembre 22, 2017 - 12:20 pm

El programa que te abrirá será el que tengas puesto como gestor de correo electrónico por defecto en tu equipo. Puedes cambiarlo en el sistema y poner que sea otro.

Saludos.

Responder
Víctor Cuervo

pedro

diciembre 2, 2017 - 9:45 pm

excentte

Responder
Víctor Cuervo

hola

agosto 17, 2017 - 8:34 pm

no me funciona we

Responder
Víctor Cuervo

denilson

junio 4, 2017 - 10:15 am

hola soy un principiante en esto solo quiero ver si se puede enviar correo desde una pagina que estoy haciendo sin servidor y sin dominio, ayudeme si se puede

Responder
Víctor Cuervo

odanny

marzo 26, 2017 - 6:16 am

esta bien

Responder
Víctor Cuervo

osvaldo

junio 30, 2016 - 11:49 pm

hola

Responder
Víctor Cuervo

Diana

febrero 6, 2015 - 3:58 pm

Hola tengo 12 años y requiero de su ayuda copie el codigo de arriva el de javascript y lo corri, pero me sale un mensaje que abla sobre el correo predeterminado no configurado cuando le doy enviar, pero cuando le doy enviar mensaje en esta pagina no lo hace hasi

Responder
Víctor Cuervo

Víctor Cuervo

agosto 25, 2015 - 1:04 pm

Hola Diana,

Si utilizas Windows. En el Panel de Control tienes una opción que se llama Correo dónde puedes indicar la configuración del correo.

Saludos.

Responder
Víctor Cuervo

juan

febrero 6, 2015 - 3:52 pm

me sale un mensaje de que no tengo configurado el correo predeterminado, eso se le tendria que configurar a todas las maquinas.

Responder
Víctor Cuervo

Víctor Cuervo

agosto 25, 2015 - 12:59 pm

Juan,

Cada máquina que lo ejecute debe de tener el correo electrónico configurado por defecto.

Saludos.

Responder
Víctor Cuervo

levi

abril 13, 2013 - 6:14 pm

esta buena

Responder
Víctor Cuervo

Víctor Cuervo

mayo 25, 2012 - 3:44 pm

@denis,

Abre el lector de correo electrónico que tengas por defecto configurado en el ordenador.
En «Opciones de Internet» tienes una pestaña de Programas dónde puedes establecer los programas por defecto.

Saludos.

Responder
Víctor Cuervo

denis

mayo 25, 2012 - 10:50 am

Hola campeon tu codigo funciona a lña perfeccion, sin embargo no hay forma que no abra el condenado outlook, que cuando lo pruebo me lo abre y todos no lo tienen configurado Yo por ejemplo hahah Gracias por tu tiempo un cordial saludo Denis

Responder
Víctor Cuervo

cristian

mayo 22, 2012 - 5:28 pm

fdfsff

Responder
Víctor Cuervo

Luis

octubre 11, 2010 - 2:29 pm

Te hago uan consulta, para que los mensajes queden en la página como ocurren con éstos, tendrías la info? Gracias

Responder
Víctor Cuervo

Luis

octubre 11, 2010 - 2:27 pm

Muchas gracias por tu aporte

Responder
Víctor Cuervo

sary

mayo 15, 2010 - 3:57 pm

hola

Responder
Víctor Cuervo

vicky

octubre 21, 2009 - 4:08 am

muchas gracias!!!!!!!!!!!!1

Responder
Víctor Cuervo

amas

junio 9, 2009 - 5:05 pm

gracias!! :-)

Responder
Víctor Cuervo

zenilto

marzo 20, 2009 - 12:34 am

ok

Responder

¿Algo que nos quieras comentar? Cancelar la respuesta

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Artículo

Visualizar Ejemplo

Ejecutar el Ejemplo

Descargar Ejemplo

Descargar Código Fuente

Reportar Error

Error en el Código Fuente

Foro para Dudas HTML

Foro de HTML

Manual sobre HTML

Manual de HTML

Test de HTML

Test de HTML

Charla sobre HTML

Charla sobre HTML

Curso de HTML

Curso de HTML

Tecnologías

Accesibilidad Web
AJAX
ASP
Bootstrap
Ceylon
Conversación
CSS
Desarrollo Móvil
DOJO
Download
EmberJS
Eventos
Google
Groovy
HTML
HTML5
Java
JavaScript
jQuery
Lecturas
Linea de Codigo
Microsoft.Net
MongoDB
NodeJS
Noticias Web
Patrones de Diseño
PHP
Prototype
Proyectos
Python
ReactJS
Recursos
Software
SQL
SVG
Symfony
Typescript
VBScript
WebServices
wForms
WordPress
XForms
XML
XSLT

Últimos Artículos

Ejemplos de Artículos sobre HTML5

Controlar el cambio de idioma en HTML5

Utilizar el idioma que tiene el usuario configurado en el navegador para presentar el contenido de nuestra web puede ser …

Ejemplos de Artículos sobre HTML5

Asociar un botón a cualquier formulario con HTML5

Quizás uno de los nuevos atributos de HTML5 que nos haya pasado por alto, aunque es de gran utilidad, es …

Ejemplos de Artículos sobre HTML5

Online y offline en HTML5

Muchas de las aplicaciones web que desarrollamos son para móviles. En este sentido es bueno saber, de cara a poder …

Nuestras Webs

  • Arquitecto IT
  • Ayuda en la Web
  • Dudas de Programación
  • Informática Jurídica
  • Manual Web
  • Test de Programación
  • W3Api

Lista de Correo

Déjanos tus datos para suscribirte a nuestra lista de correo.
* = campo obligatorio
  • Acerca de
  • Colaborar
  • Publicidad
  • Lista de Correo
  • Contactar
2001-2022 © Línea de Código usando VCP Theme