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 🙂