Laura Chuburu

Cursos web 2012

Curso de diseño web

Curso de CSS + JQuery

Curso de web marketing

Curso de web dinámicas (PHP y MySQL)

Curso de diseño web - Apuntes

Formulario de contactos con CGI

Antes de empezar un formulario, hay que confirmar que el servidor de hosting provea el archivo CGI para resolver el funcionamiento. En algunos servidores, ese archivo CGI ya está ubicado en la carpeta de hosting generalmente en un subdirectorio que se llama cgi-bin, pero en otros servidores hay que instalarlo desde el panel de control, desde el menú herramientas cgi.

Para empezar a armar un formulario se inserta primero la etiqueta <form> desde insertar/formularios/formulario. En la vista diseño aparece una línea punteada roja. Todos los elementos del formulario que luego se inserten deben quedar contenidos en ella. Seleccionando la etiqueta <form>, en la ventana Propiedades en el campo Acción hay que escribir la ruta donde está alojado el CGI en el servidor, por ejemplo: /cgi-bin/FormMail.cgi

Luego se insertan 3 campos ocultos que en la vista diseño aparecen con el ícono campos ocultos. En cada uno de ellos se define un nombre y un valor:
1- Nombre: recipient. Valor: acá va escrito el mail al que va a llegar la consulta. Este mail debe ser una cuenta creada con el dominio del sitio.
2- Nombre: redirect. Valor: acá se escribe la ruta absoluta de un archivo .html que confirme el envío, por ejemplo: htttp://www.dominio.com.ar/contactos_ok.html
3- Nombre: subject. Valor: acá va el asunto con el que va a llegar el mail, por ejemplo: consulta desde sitio web.

Una vez resuelto esto, sólo queda diseñar el formulario. Luego de los campos ocultos y siempre dentro de la etiqueta <form>, se colocan los campos de texto para que el usuario complete. Es importante que todos los campos tengan nombre (se coloca desde Propiedades o en el momento de insertar, en el campo ID) y el más importante de todos es el del e-mail. El campo de texto donde el usuario debe completar su e-mail, debe llamarse email (así con minúsculas y sin guión) porque de esa manera la dirección de correo se transformará en remitente al recibir el mail, y se puede responder.

Luego de insertar todos los campos, se inseta el botón para enviar.

Validar formulario:

Es un comportamiento que obliga al usuario a completar determinados campos. Conviene hacerlo por lo menos con los campos "Nombre y apellido" e "e-mail" para que no se envíen por error o mala intención, mesajes sin completar. El comportamiento se coloca con la etiqueta <form> seleccionada.

En la cabecera del documento, desde la vista de código, se puede corregir el mensaje de error que ve el usuario cuando no completa el formulario, que por defecto está en inglés. El código corregido quedaría así:

function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' debe contener una dirección de correo válida.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' es requerido.\n'; }
} if (errors) alert('Por favor complete sus datos:\n'+errors);
document.MM_returnValue = (errors == '');
} }

 

Ultima actualización de este apunte: diciembre 2007

Laura Chuburu - Diseñadora en Comunicación Visual UNLP - DISEÑO WEB
lchuburu@yahoo.com.ar / Tel: 221 427-5619 / Cel: 221 15 538-8940 / 53 Nº 610 of. 5 (e/ 7 y 8) La Plata - Buenos Aires