Crear un formulario de contacto con ASP.NET


Vamos a intentar enviar correos electrónicos desde una web construida en ASP.NET, es algo muy fácil de hacer.


No contamos con un servidor propio de correo electrónico por lo que usaremos el de un tercero, el de Gmail y además intentaremos que esa lacra llamada spam no se cuele en nuestra bandeja de entrada haciendo que sea necesario introducir un captcha para poder enviar el correo electrónico.


Lo primero que tenemos que hacer es abrir nuestro VisualStudio y crear un nuevo proyecto de tipo ASP.NET Web Application.


image1


Ahora vamos a editar el archivo Default.aspx, añadiremos cuatro textbox, dos para obtener el nombre y el mail de quien envía el correo, el del título del mail y un cuarto para el cuerpo del mensaje. Además añadiremos un botón para dar la orden de enviar el correo a la aplicación.


El aspecto que debería tener podría ser algo así:


image2


En la vista de código tendremos que añadir el namespace “System.Net.Mail” para poder disponer de MailMessage y SmtpClient dentro del método que vamos a crear.

public void EnviarCorreo(string nombre, string direccion, string titulo,string contenido)

{
string to = ConfigurationManager.AppSettings[“To”];
MailMessage mail = new MailMessage();
mail.To.Add(new MailAddress(to));
mail.From = new MailAddress(direccion,nombre);
mail.Subject = titulo + ” “ + direccion;
mail.Body = contenido + “nn” + nombre + “n” + direccion;
SmtpClient _smtp = new SmtpClient();
_smtp.Send(mail);
}

 


Bueno, nos creamos un método al que le pasamos los datos del remitente, el título del mensaje y el contenido del mismo.


La dirección del email de destino la leeremos desde el Web.config y junto con los parámetros anteriores los utilizamos con el objeto MailMessage, el cual representa nuestro correo electrónico.


Por último creamos un objeto de tipo SmtpClient con el que haciendo uso de la instrucción Send() enviaremos el mensaje.


Añadimos la llamada al método anterior desde el evento Click de nuestro botón de la siguiente manera:

protected void botonEnviar_Click(object sender, EventArgs e)
{
EnviarCorreo (nombreRemitente.Text,
direccionEnvio.Text,
titutloMail.Text,
contenidoMail.Text);
}

 


La aplicación todavía no envía correos, de hecho le falta lo más importante, indicar la configuración del servidor de correo Smtp que vamos a utilizar.


Podríamos haciendo uso del objeto SmtpClient que habíamos creado indicar los parámetros de configuración, pero en caso de cambiar en un futuro de servicio de correo habría que volver a tocar el código. Por eso es mejor colocar los parámetros de configuración en el fichero Web.config que se edita más fácilmente en cualquier momento.


Lo que hay que añadir es lo siguiente. Para añadir la dirección de destino:

    <appSettings>
<add key=”To” value=”juanillosinmiedo@gmail.com”/>
</appSettings>

 


Ahora añadimos los datos de configuración del servidor:

  <system.net>
<mailSettings>
<smtp>
<network host=”smtp.gmail.com”
password=”1234567@.”
userName=”juanillosinmiedo@gmail.com”
enableSsl=”true”
port=”587″ />
</smtp>
</mailSettings>
</system.net>

 


Como decía al principio del post utilizo el servidor smtp de Gmail por lo que los datos variarán poco entre unos servidores de correo y otros. Lo que necesitamos es la dirección a donde tiene que llegar la información que ha rellenado el usuario en el formulario, la dirección del servidor, el puerto y las credenciales del usuario. También tendremos que tener en cuenta los parámetros de seguridad del servidor, en este caso Gmail pide que el Ssl se encuentre activado.


Ahora ya podemos ejecutar la aplicación y enviar un mensaje con el formulario de contacto.


image3


En la pantalla del cliente web de Gmail podemos ver que el correo ha llegado perfectamente.


image4


image5


Ahora que el envío de mails funciona vamos a añadir un componente para evitar el spam, utilizaremos uno hasta ahora gratuito llamado recaptcha (http://www.google.com/recaptcha).


Descargamos la librería de recaptcha para ASP.NET http://code.google.com/p/recaptcha/downloads.


Cuando lo tengamos descargado añadimos la librería a nuestro proyecto pulsando con el botón derecho del ratón en el proyecto y luego clickamos en Añadir y por último en Elemento existente.


image6


Ahora añadimos la referencia a la librería pulsando con el botón derecho sobre las referencias del proyecto y Añadir referencia, luego buscamos en nuestro proyecto la dll.


image7


Ya solo nos queda añadir en la parte de diseño (en mi caso Default.aspx) la referencia al componente en el inicio de la clase:

<%@ Register TagPrefix=”recaptcha” Namespace=”Recaptcha” Assembly=”Recaptcha” %>

 


Y agregamos el componente:

<recaptcha:RecaptchaControl
ID=”RecaptchaControl1″
runat=”server”
PublicKey=”your_public_key”
PrivateKey=”your_private_key”
/>

 


En mi caso el componente lo he colocado debajo del cuerpo del mensaje justo antes del botón, pero para que funcione necesitamos dos claves que se nos proporcionan en la web http://recaptcha.net.


Necesitamos una cuenta de Gmail para poder acceder al servicio.


image8


El código del componente debe quedar como lo siguiente:

<recaptcha:RecaptchaControl
ID=”RecaptchaControl2″
runat=”server”
PublicKey=”6Lcv67wSAAAAAF2HrM4nBJ7HN-5gVlOyD2TCJTDW”
PrivateKey=”6Lcv67wSAAAAAAUTWZ91pa3bvxmno_LHjuotIql6″
/>

 


Ahora añadiremos un par de líneas para que al pulsar el botón se compruebe si se ha introducido correctamente la palabra del captcha.


Vamos a añadir una etiqueta en la que mostraremos un mensaje de envío correcto o incorrecto para que el usuario conozca el estado del envío.

public void EnviarCorreo(string nombre, string direccion, string titulo, string contenido)
{
if (Page.IsValid)
{
string to = ConfigurationManager.AppSettings[“To”];
MailMessage mail = new MailMessage();
mail.To.Add(new MailAddress(to));
mail.From = new MailAddress(direccion, nombre);
mail.Subject = titulo + ” “ + direccion;
mail.Body = contenido + “nn” + nombre + “n” + direccion;

SmtpClient _smtp = new SmtpClient();
_smtp.Send(mail);

LimpiarCampos();
lbl_aviso.BackColor = Color.Transparent;
}
else
{
lbl_aviso.Text = “No ha escrito correctamente el captcha”;
lbl_aviso.BackColor = Color.Red;
}
}

private void LimpiarCampos()
{
nombreRemitente.Text = “”;
direccionEnvio.Text = “”;
titutloMail.Text = “”;
contenidoMail.Text = “”;
lbl_aviso.Text = “”;
}


 


 


Como veis compruebo que todos los controles de la página se validen correctamente y para eso solo necesito solo necesito hacer uso de Page.IsValid. Además hay un método para limpiar los campos cuando todo se realiza correctamente.


El resultado final sería este:


image9


Pues por ahora eso es todo 🙂


 

 

cesar

 

8 thoughts on “Crear un formulario de contacto con ASP.NET

  1. ESTA TODO MUY BIEN EXPLICADO, UNO DE LOS MEJORES TUTOS QUE HE VISTO EN INTERNET

    PERO AL UTLIZARLO ME DA ERROR “NO SE ESPECIFICO EL HOST”

    QUIZAS HABRE PUESTO MAL LOS TAGS EN EL WEB COFIG
    (PODRIAS DECIRME DONDE LOS UBICO X FAVOR)

    O EL FIREWALL DE LA (E) BLOQUEE LA SALIDA DEL MAIL

    SALUDOS

  2. Hola Pablo,

    esta todo ubicado al final del archivo de webconfig, justo antes de la etiqueta que cierra configuration.









    En cuanto a lo del firewall, en algunas redes se usa el 25 por lo que está ocupado, el 587 es mas raro que este siendo utilizado. Si estás en una red empresarial perguntalo por si fuera eso.

    Saludetes
    César

  3. 2 consultas

    – como hacer para no utlizar el web config con el fin de utilizar varias direcciones de mail que son redireccionadas por radiobuttons

    ej: radio 1 seleccionado enviar mail a empresa@mail.com

    radio 2 seleccionado enviar mail a informacion@mail.com

    que version de visual y framework es?

    de antemano muchas gracias de nuevo 🙂

  4. Hola Fidencio,

    pues este post es un poco viejo y ha sufrido un par de migraciones de hosting desde que lo escribí.
    Intentare encontrar las imágenes y volverlas a colgar.

    Un saludo
    César

Leave a Reply

Your email address will not be published. Required fields are marked *