- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
Cómo crear un formulario de contacto ASP en HTML
noviembre 15, 2010
Vamos a aprender esto con un ejemplo. Supongamos que una de sus paginas tenga el siguiente codigo:
<form id="form" action="" enctype="multipart/form-data">
<div class="inp_h">
<input class="inp_2" type="text" name="name" value="Name/Nombre:" onfocus="this.value=''" />
</div>
<div class="inp_h">
<input class="inp_2" type="text" name="mail" value="E-mail:" onfocus="this.value=''" />
</div>
<div><textarea class="inp_3" rows="30" cols="40" onfocus="this.value=''">Message/Mensaje:</textarea></div>
<div style="padding:12px 0 0 0;">
<a href="#" onclick="document.getElementById('form').reset()">
<img src="images/clear.jpg" style="border:0px none;" alt="" />
</a>
<img src="images/spacer.gif" alt="" width="6" height="1" />
<a href="#" onclick="document.getElementById('form').submit()">
<img src="images/send.jpg" style="border:0px none;" alt="" />
</a>
<br />
</div>
</form>
El diseno del formulario de contacto puede tener este aspecto:
En el servidor debe tener un script (guion) que realmente va a generar y enviar mensajes a una cierta direccion de correo electronico. Puede descargar una muestra de esta secuencia de comandos contact.asp aqui. La secuencia de comandos ASP es compatible con la mayoria de servidores de hosting basados en Windows.
Nuestro formulario html tiene dos etiquetas: una apertura <form> y un cierre </form>. Para que el formulario pase los datos a nuestro contact.asp necesitamos especificar cinco atributos dentro de esta etiqueta:
<form id="form" method="post" target="_blank" action="contact.asp" name="form" >
– Atributo “Id” es un estandar para todos los formularios;
– Atributo “Method” especifica el metodo que es utilizado para el envio de cartas del formulario de contacto;
– Atributo”Target” especifica el mensaje que nos informa que la carta fue enviada;
– Atributo “Action” muestra que estamos utilizando el fichero “contact.asp” como una secuencia de comandos para el envio de cartas;
– Atributo “Name” es un valor que se utiliza en el archivo contact.asp.
Nuestra forma tiene dos campos de entrada de texto y un area de texto. El formulario de contacto inicial ya tiene dos de ellos: name=”name”, name=”mail”, tambien tendra que insertar el valor de tercer nombre en el area de texto del mensaje – name=”message”. La secuencia de comandos <form> resultante debe tener el siguiente aspecto:
<form id="form" method="post" target="_blank" action="contact.asp" name="form" >
<div class="inp_h">
<input class="inp_2" type="text" name="name" value="Name:" onfocus="this.value=''" />
</div>
<div class="inp_h">
<input class="inp_2" type="text" name="mail" value="E-mail:" onfocus="this.value=''" />
</div>
<div><textarea class="inp_3" rows="30" cols="40" name="message" onfocus="this.value=''">Message:</textarea></div>
<div style="padding:12px 0 0 0;">
<a href="#" onclick="document.getElementById('form').reset()">
<img src="images/clear.jpg" style="border:0px none;" alt="" />
</a>
<img src="images/spacer.gif" alt="" width="6" height="1" />
<a href="#" onclick="document.getElementById('form').submit()">
<img src="images/send.jpg" style="border:0px none;" alt="" />
</a>
<br />
</div>
</form>
donde se puede ver el codigo para el boton de Reinicio/Reset:
<a href="#" onclick="document.getElementById('form').reset()"><img src="images/clear.jpg" style="border:0px none;" alt="" /></a>
Y el codigo para el boton Someter/Submit o Enviar/Send:
<a href="#" onclick="document.getElementById('form').submit()"><img src="images/send.jpg" style="border:0px none;" alt="" /></a>
Ahora vamos a analizar una de las plantillas que no tiene la estructura CSS y utiliza las tablas. Aqui esta el codigo predeterminado del formulario de contacto:
<form action="" id="form1" style="margin:0; padding:0 ">
<table style="height:213px">
<tr>
<td style="width:239px; padding-left:29px">
<input type="text" class="input3" value=" Su Nombre:" /><br />
<input type="text" class="input3" value=" Su Fax:" /><br />
<input type="text" class="input3" value=" Su Telefono:" /><br />
<input type="text" class="input3" value=" Su E-mail:" />
</td>
<td style="width:259px">
<textarea name="textarea" style="margin:0 0 11px 0px" cols="35" rows="35"> Su Mensaje:</textarea><br />
<a href="#" onclick="document.getElementById('form1').reset()" class="more_2" style="margin:0 16px 0 107px">clear</a>
<a href="#" onclick="document.getElementById('form1').reset()" class="more_2">send</a><br />
</td>
</tr>
</table>
</form>
Tiene que especificar los mismos valores que en el ejemplo anterior, asi el codigo resultante debe verse como:
<form id="form" method="post" target="_blank" action="contact.asp" name="form">
<table style="height:213px">
<tr>
<td style="width:239px; padding-left:29px">
<input type="text" name="name" class="input3" value=" Su Nombre:" /><br />
<input type="text" name="fax" class="input3" value=" Su Fax:" /><br />
<input type="text" name="phone" class="input3" value=" Su Telefono:" /><br />
<input type="text" name="mail" class="input3" value=" Su E-mail:" />
</td>
<td style="width:259px">
<textarea name="message" style="margin:0 0 11px 0px" cols="35" rows="35"> Su Mensaje:</textarea><br />
<a href="#" onclick="document.getElementById('form').reset()" class="more_2" style="margin:0 16px 0 107px">clear</a>
<a href="#" onclick="document.getElementById('form').reset()" class="more_2">send</a><br />
</td>
</tr>
</table>
</form>
Ahora vamos a analizar el archivo contact.asp file, ?que tenemos que cambiar? Abralo con tu editor de php y busque las siguientes lineas:
‘—-Settings———–
subj = “Contact form from your site/Formulario de contacto de su sitio” – (aqui se puede cambiar la cabecera del mensaje que Usted recibira en la carta del visitante)
mail_from = “admin@tsie.loc” – (en este caso hay que insertar su direccion de correo electronico)
mail_to = “andy@template-help.com” – (en este caso tiene que insertar su direccion propia de correo electronico)
smtp_server = “localhost” – (here you need to put SMTP server name of your server )
smtp_port = 25 – (es necesario insertar el nombre del servidor SMTP de su servidor)
Si Usted no conoce estos valores, Usted necesita contactar con su Proveedor de hosting para verificar estos detalles.
