Hoy he trabajado con un atributo del campo select que no había utilizado aún, el multiple.
Éste nos permite seleccionar no sólo una, sino varias opciones de una lista desplegable.

Me han solicitado un formulario, para una empresa de traducciones, que contenga un campo con los idiomas que ofrecen y que permita al usuario seleccionar más de un idioma con el que trabajar, así que éste será mi ejemplo de hoy:

Ejemplo

Nota: doy por hecho que ya sabéis crear un formulario simple y enviarlo por email.

1.- Insertamos el select en nuestro formulario:

<select name=”traduccion-meta[]” multiple=”multiple” size=”4″>
<option value=”No”>Seleccione una opci&oacute;n</option>
<option value=”Ingles”>Ingl&eacute;s</option>
<option value=”Ruso”>Ruso</option>
<option value=”Chino”>Chino</option>
<option value=”Frances”>Franc&eacute;s</option>
<option value=”Rumano”>Rumano</option>
<option value=”Japones”>Japon&eacute;s</option>
</select>

Es importante que en el name pongamos los corchetes [] finales, ya que con esto indicamos que nos va a devolver un Array, si no los pusieramos sólo nos enviaría el último campo seleccionado y no nos valdría de nada tener un select multiple.
El atributo multiple=”multiple” es el que nos permite seleccionar varias opciones.
Y con size=”4″ lo que hago es que se me muestren solamente 4 opciones a primera vista, para ver el resto aparecen las barras de desplazamiento, si no indicara el tamaño me saldría un select demasiado grande para mi gusto.

Una vez tenemos nuestro select, pasamos a enviar los datos a través de la función mail() a nuestra dirección de email.

2.- El código para recoger y enviar el contenido de nuestro select multiple es:

foreach ($_POST['traduccion-meta'] as $idioma){
$msg.= $idioma.” - “;
}

Con el foreach recorremos el interior de nuestro Array y en cada vuelta sacamos los idiomas seleccionados y los añadimos al contenido del mensaje del email enviado.
Acordaros que para enviar el contenido de los campos de nuestro formulario lo haciamos así:

$msg.= $_POST['traduccion-meta];

Esta vez no lo podemos hacer así ya si sólo nos devolvería la palabra Array.

Y eso es todo, si no os acordáis de cómo enviar el formulario, echarle un vistazo a mis anteriores artículos sobre este tema.

Espero que os sirva de ayuda, cualquier duda ya sabéis,.. a preguntar

Hoy toca aprender a validar un formulario a través de Dreamweaver.. ya que la gran mayoría de los que llegáis a mi blog utilizáis este programa para editar código y de una forma u otra, resulta más fácil, os voy a explicar un poquito cómo validar un formulario, para que podáis poner campos obligatorios y evitar que os lleguen emais vacíos.

Voy a validar un formulario sencillito con un campo para el nombre, otro para el teléfono y otro para el email, en unos días publicaré un artículo para validar formularios más completos, pero ya sin Dreamweaver.

Nota: Doy por hecho que tenéis un formulario previamente hecho, Dreamweaver instalado y conocimientos mínimos de éste. Es importante tener nuestros campos identificados con la etiqueta name para poder diferenciarlos.

1.- Abrimos el archivo con nuestro formulario en Dreamweaver y lo dejamos en vista “Dividir” (Ver > Código y diseño).

2.- Seleccionamos desde la pantalla de Diseño el botón Submit.

3.- Ahora nos vamos a la venta Comportamientos que aparece en el menú derecho (sino apareciera por defecto la puedes hacer visible desde el menú Ventana > Comportamientos) y clicamos sobre el signo + que aparece, acordaros de tener el botón Submit seleccionado.

4.- Nos aparecerá un menú desplegable, ahí seleccionamos Validar formulario.

5.- Se abre una ventana nueva en la que aparecen los campos de nuestro formulario, ahora tenemos que seleccionar un campo y aplicarle los atributos que deseemos.

Por ejemplo, selecciono el campo email y marco la opción de Obligatorio (para que obligue al usuario a rellenarlo, así si este no contiene algo no se enviará el formulario) y marco también la opción de Dirección de correo electrónico, para que no se pueda escribir cualquier cosa en ese campo, si no que deba ser obligatoriamente una dirección de email.

Una vez validados todos los campos le damos a Aceptar.

6.- Ahora comprobaremos que se ha añadido código javascript a la cabecera de nuestro documento, concretamente esto:

<script type=”text/javascript”>
<!–
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+’ must contain an e-mail address.\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+’ is required.\n’; }
} if (errors) alert(’The following error(s) occurred:\n’+errors);
document.MM_returnValue = (errors == ”);
} }
//–>
</script>

Éste código es la función en Javascript que nos valida el formulario, si el usuario no rellena los campos o no cumple las reglas, lanzará un mensaje advirtiéndole de ello. Por defecto aparece el mensaje en inglés pero lo podemos cambiar y poner el texto que deseemos editando unas líneas.

7.- Para cambiar el mensaje que aparece si no escribes bien la dirección de email, debemos editar esta línea:

if (p<1 || p==(val.length-1)) errors+=’- ‘+nm+’ must contain an e-mail address.\n’;

en mi caso escribí esto:

if (p<1 || p==(val.length-1)) errors+=’- ‘+nm+’ debe contener un email válido.\n’;

La siguiente línea te indica que debes escribir sólo numeros en ese campo:

if (isNaN(val)) errors+=’- ‘+nm+’ must contain a number.\n’;

Ésta que debe ser un número comprendido entre mín y máx especificados:

if (num<min || max<num) errors+=’- ‘+nm+’ must contain a number between ‘+min+’ and ‘+max+’.\n’;

Aquí nos dice que campos deben ser rellenados obligatoriamente:

} } } else if (test.charAt(0) == ‘R’) errors += ‘- ‘+nm+’ is required.\n’; }

Y este es el título de los errores, dice concretamente: Ocurrieron los siguientes errores:

} if (errors) alert(’The following error(s) occurred:\n’+errors);

Modificando esas líneas con el texto que deseemos ya tendremos nuestro script en castellano

8.- Ya sólo nos queda comprobar que se haya insertado la llamada a la función el el botón submit:

<input type=”submit” onclick=”MM_validateForm(’nombre’,”,’R',’telefono’,”,’RisNum’,'email’,”,’RisEmail’);return document.MM_returnValue” value=”enviar” />

Y.. listo, podemos subir nuestro archivo al servidor sabiendo que obligará al usuario a rellenar los campos que deseemos y nos ahorramos que nos lleguen mensajes vacíos

Empiezo a creer que lo mío con los formularios es una adicción xD
Después de meditarlo unos 3 minutos he llegado a la conclusión de que sólo hablo de formularios porque no tengo tiempo (y cuando lo tengo, no tengo ganas de ponerme al ordenador) para investigar a fondo el resto de scripts y códigos.. y cómo los formularios los gasto a diario.. pues eso xD

Al lío, hoy explico de forma resumida cómo crear un formulario del tipo ‘Recomienda esta web a un amigo‘.
El usuario tendrá que escribir su nombre, su email, el nombre del amigo al que quiere recomendar la página y el email de éste, también podrá escribirle un comentario si quiere. Cuando clique sobre el botón enviar, éste se enviará automáticamente a la dirección que haya indicado.

El html de nuestro formulario, sería el siguiente:

<form action=”<?=$_SERVER['PHP_SELF']?>” method=”post”>
<p>Tu nombre:</p>
<p><input name=”nombre1″ type=”text” id=”nombre1″ /></p>
<p>Tu e-mail:</p>
<p><input name=”email1″ type=”text” id=”email1″ /></p>
<p>Nombre de tu amigo/a:</p>
<p><input name=”nombre” type=”text” id=”nombre” /></p>
<p>E-mail de tu amigo/a:</p>
<p><input name=”email” type=”text” id=”email” /></p>
<p>Comentarios:</p>
<p><textarea name=”comentarios” cols=”30″ rows=”6″></textarea></p>
<p><input type=”reset” value=”borrar” />
<input type=”submit”  value=”enviar”/></p>
</form>

Y usando la maravillosa función mail() mandamos los datos recogidos a la dirección de email que nos indican:

$msg= “Hola “.$_POST['nombre'] .”!”;
$msg.= “\n”. $_POST['nombre1'].” (”. $_POST['email1'] .”) nos ha pedido que te invitemos a visitar nuestra web,”;
$msg.= ” y ha querido escribirte el siguiente comentario: \n”.$_POST['comentarios'];
$msg.= “\nVisita www.dominio.com y descubre miles de recursos a los que puedes acceder.”;

$email = $_POST['email'];

$subject = “Recomendacion enviada desde Dominio.com por: “.$_POST['nombre1'];
mail($email, $subject, $msg, “FROM: Dominio.com<info@dominio.com>\n”);

Recuerda cambiar ‘dominio.com’ por el dominio de tu web!

Para los que no les haya quedado muy claro les dejo el ejemplo completo:

<?php if (!isset($_POST['email'])) { ?>

<form action=”<?=$_SERVER['PHP_SELF']?>” method=”post”>
<p>Tu nombre:</p>
<p><input name=”nombre1″ type=”text” id=”nombre1″ /></p>
<p>Tu e-mail:</p>
<p><input name=”email1″ type=”text” id=”email1″ /></p>
<p>Nombre de tu amigo/a:</p>
<p><input name=”nombre” type=”text” id=”nombre” /></p>
<p>E-mail de tu amigo/a:</p>
<p><input name=”email” type=”text” id=”email” /></p>
<p>Comentarios:</p>
<p><textarea name=”comentarios” cols=”30″ rows=”6″></textarea></p>
<p><input type=”reset” value=”borrar” />
<input type=”submit”  value=”enviar”/></p>
</form>

<?php }else{

$msg= “Hola “.$_POST['nombre'] .”!”;
$msg.= “\n”. $_POST['nombre1'].” (”. $_POST['email1'] .”) nos ha pedido que te invitemos a   visitar nuestra web,”;
$msg.= ” y ha querido escribirte el siguiente comentario: \n”.$_POST['comentarios'];
$msg.= “\nVisita www.dominio.com y descubre miles de recursos a los que puedes acceder.”;

$email = $_POST['email'];
$subject = “Recomendacion enviada desde Dominio.com por: “.$_POST['nombre1'];
mail($email, $subject, $msg, “FROM: Dominio.com <info@dominio.com >\n”);

?>

<p>Mensaje enviado.</p>
<p>Su recomendaci&oacute;n se ha enviado a la siguiente direcci&oacute;n <strong><?php echo   $email; ?></strong> correctamente.</p>
<p>Gracias por confiar en Dominio.com</p>

<?}?>

Todo vuestro! Que disfrutéis del verano!!

Dado que el otro día expliqué de una forma rápida cómo enviar emails a través de la función mail(), hoy voy a comentar con más detalle su uso.

La estructura general es la siguiente:

mail ($destino, $asunto, $mensaje, $cabeceras);

La dirección de destino se puede indicar de cualquiera de las siguientes formas:

mail(’nombre@empresa.com’);
mail(’nombre1@empresa.com, nombre2@empresa.com’);
mail(’Nombre <nombre@empresa.com>’);
mail(’Nombre1 <nombre1@empresa.com>, Nombre2 <nombre2@empresa.com>’);

Para indicar el asunto:

$asunto = ‘El asunto no debe exceder los 70 caracteres ni tener saltos de linea’;

Respecto al mensaje:

$mensaje = “Aqui va el contenido a enviar, para crear saltos de linea escribimos \n”;

Las cabeceras son las que más miga tienen, tenemos 4 opciones, podemos utilizar solamente una, o las 4 a la vez (separándolas con saltos de línea).

//Dirección del remitente
From: Web <nombre@empresa.com>
//Dirección a quien responder
Reply-To: Nombre <nombre@empresa.com>
//Dirección a quien enviar una copia del mensaje
BCC: Nombre <nombre@empresa.com>
//Cabecera para enviar el email cómo HTML
Content-Type: text/html; charset=iso-8859-1

Y poco más, con esto ya queda explicada con más detalle la función mail(), que la disfrutéis ;P