Unidad 11. Ejercicio paso a paso: Formulario en PHP

Objetivo

Vamos a unir las páginas contacto.html y enviar_mail.php en una sola página, a la que llamaremos contacto.php.

Lo que haremos en la nueva página será detectar si se ha enviado el formulario (se ha pulsado Enviar). Si no se ha hecho, mostraremos el formulario normal. Si había sido enviado, comprobaremos los datos. Si los datos son correctos, enviaremos el correo. Si hay errores, mostraremos el formulario, con los datos introducidos, marcando los incorrectos.

Ejercicio

Abre el archivo contacto.html y guárdalo como contacto.php.
Abre el archivo enviar_mail.php, ya que iremos copiando el código fuente el nuevo archivo.
Vamos a comenzar a insertar código PHP. Tenemos que hacerlo antes del formulario. Lo hemos puesto después del h2, porque hasta ahí siempre se mostrará el HTML. Añade, detrás del h2, las marcas del PHP <?php y ?>.
Copia el código PHP de la página enviar_mail.php, la definición de la función, y las instrucciones que asignan los datos a variables, incluyendo $algunerror = FALSE;.
Ahora, comprobaremos los datos. Pero sólo si se ha enviado el formulario. Para saberlo, comprobaremos si un determinado control se ha enviado. Los del formulario no nos sirven, porque podrían haberse quedado en blanco. Utilizaremos el botón de Enviar.
Añade al botón de envío (type="submit") el atributo name="enviado".

Ahora, si se ha enviado el formulario (isset($_REQUEST['enviado'])). Comprobaremos los valores. Pero en vez de mostrar un párrafo con el error, guardaremos el error en una variable que después mostraremos junto al control.
Dentro de un if con la condición, copia la comprobación de los datos. Cambia el echo por una asignación, como se ve a continuación:

 if (isset($_REQUEST['enviado'])){
   if($nombre==''){ //comprobamos que el nombre no haya quedado vacío
      $algunerror = TRUE;
      $error_nombre = '<span class="erroneo">Requerido</span>';
   } 
   if($email1==''){ //validamos los que el email no esté vacio
      $algunerror = TRUE; 
      $error_email1 = '<span class="erroneo">Requerido</span>';
   } elseif($email1!=$email2){ //si tiene algo, que concida con la repetición
      $algunerror = TRUE;
      $error_email2 = '<span class="erroneo">No conciden</span>';
   }
   if($consulta==''){ //comprobamos que el contenido de la pregunta no esté vacío
     $algunerror = TRUE;
     $error_consulta = '<br /><span class="erroneo">Requerido</span>';
   }
 }

Como vamos a utilizar las variables con los errores aunque no entremos en el if, tenemos que iniciarlas para que no se produzcan errores. Antes del if, y después de la instrucción $algunerror = FALSE;, asigna a todas la variables de error un valor vacío:
```
 $error_nombre = "";
 $error_email1 = "";
 $error_email2 = "";
 $error_consulta = "";
```
Después de if, tenemos que decidir si enviamos el correo o mostramos el formulario. ¿Cuándo enviaremos el correo? Cuando se haya enviado el formulario (isset($_REQUEST['enviado'])) y (&&) no haya ningún error ($algunerror==false o lo que es lo mismo, !$algunerror;).
Crea la condición, con un else. Dentro del else, estará el HTML del formulario, por lo que debes de cerrar el php (?>) y volver abrirlo después de cerrar el formulario y la caja de borde redondeado, pero antes de cerrar los otros div:
```
código HTML
<?php 
 instruciones php, función, recoger datos y comprobarlos;
 if (isset($_REQUEST['enviado'])&&!$algunerror){
  //aquí se enviará el correo;
} else { ?>
  html del formulario
  cerrar el div con borde naranja redondeado
<?php
} ?>
  cerrar el div redondeado
 </body></html>      
```
En el bloque si se cumple el if, copia y pega las instrucciones para enviar el mensaje, y los párrafos de confirmación que se muestran.
Ahora, vamos a cambiar el formulario para que se muestren en los controles los datos recogidos y los errores. Si no se ha enviado el formulario no importa, porque tanto los datos como los errores estarán en blanco. Para hacerlo, vamos a utilizar la forma corta de echo, que nos permite escribir un valor en el HTML con la instrucción <?=$valor;?>. En los campos de texto, escribiremos el valor en el atributo value, y junto al control el error.
Cambia los controles de texto para que queden:
```
<td><input type="text" name="nombre" id="nombre" value="<?=$nombre;?>" /><?=$error_nombre;?></td>
...
<input type="text" name="email1" id="email1" value="<?=$email1;?>" /><?=$error_email1;?>
...
<input type="text" name="email2" id="email2" value="<?=$email2;?>" /><?=$error_email2;?>
...
<td class="centrado" colspan="2">
<textarea cols="50" rows="5" name="consulta"><?=$consulta?></textarea><<?=$error_consulta?></td>
```

En las opciones de la lista, tendremos que comprobar para cada opción si la variable coincide con el texto de la opción. Si es así, la seleccionamos escribiendo selected="selected". Hay que tener cuidado y dejar espacios en blanco antes o después, según donde lo pongamos. Añade a las opciones:

<select name="conocio" id="conocio">
   <option<?=($conocio=="")?' selected="seleted"':'';?>></option>
   <option<?=($conocio=="Un amigo")?' selected="seleted"':'';?>>Un amigo</option>
   <option<?=($conocio=="Un blog")?' selected="seleted"':'';?>>Un blog</option>
   <option<?=($conocio=="Un buscador")?' selected="seleted"':'';?>>Un buscador</option>
   <option<?=($conocio=="Otros")?' selected="seleted"':'';?>>Otros</option>
</select>

Del mismo modo lo haremos con los radios, pero comparando la variable con el value, y marcando el radio con checked="checked". Añade a los radios:

  <td>
<label><input type="radio" name="referente" id="ref_web" value="web"<?=($referente=="web")?' checked="cheked"':'';?> /> 
    La Web </label><br />
<label><input type="radio" name="referente" id="ref_fotos" value="fotos"<?=($referente=="fotos")?' checked="cheked"':'';?> /> 
  Las fotos </label><br />
<label><input type="radio" name="referente" id="ref_asociacion" value="asociacion"<?=($referente=="asociacion")?' checked="cheked"':'';?> /> 
  La asocioaci&oacute;n </label>
  </td>

Por último, cambia el valor del atributo action del form a action="contacto.php".
Guárdalo y pruébalo.
Ahora, cambia el enlace de la pestaña Contacto a contacto.php en el archivo javascript del menú (js/funciones.js).

Nota: Como el JavaScript valida primero, no podemos comprobar que se realiza correctamente la validación en PHP, ya que si se envía es que ya es válido. Para probarlo, tenemos que saltarnos el JavaScript, por ejemplo, quitando la llamada a la función en el evento onsubmit del formulario.

Puedes ver el código fuente completo de esta página aquí:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml"><head>
       <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
       <title>Floramics</title>
       <link rel="stylesheet" href="estilo.css" type="text/css" />
       <script type="text/javascript" src="js/funciones.js"></script>
       </head>
       <body>
       <div>
       <h1>Floramics</h1>
       <script type="text/javascript">
       function validarForm(formulario) {
 if(formulario.nombre.value.length==0) { //¿Tiene 0 caracteres?
 formulario.nombre.focus();    // Damos el foco al control
 alert('No has escrito tu nombre'); //Mostramos el mensaje
 return false; //devolvemos el foco
 }
 if(formulario.email1.value.length==0) {
 formulario.email1.focus();
 alert('No has escrito tu e-Mail');
 return false;
 }
 if(formulario.email1.value!=formulario.email2.value) {
 formulario.email1.focus();
 alert('Los e-Mails no coinciden');
 return false;
 }
 if(formulario.consulta.value.length==0) {
 formulario.consulta.focus();
 alert('No has escrito ninguna consulta');
 return false;
 }
 return true;
 }
 </script>
 <script type="text/javascript">cargarMenu('contacto');</script>
 <noscript>
 <div class="sinscript">Atenci&oacute;n: Necesitas habilitar JavaScript para poder navegar por este sitio.</div>
 </noscript>
 </div>
 <div class="redondo">
 <div class="red_arriba"><div></div>
 </div>
 <div class="contenido">
 <h2>Contacto</h2>
 <?php 
       //comenzamos recogiendo los datos
       function recogeDato($campo){ 
       return isset($_REQUEST[$campo])?$_REQUEST[$campo]:'';
       } //la función recogeDatos comprueba si se ha recibido un dato y recoge su valor
   
       //si no se ha recibido, le asigna un valor vacío.
       $email1    = recogeDato('email1');
       $email2    = recogeDato('email2'); //asignamos cada valor a una variable
       $consulta  = recogeDato('consulta');
       $nombre    = recogeDato('nombre');
       $conocio   = recogeDato('conocio');
       $referente = recogeDato('referente');
       $algunerror = FALSE;
   
       $error_nombre = "";
       $error_email1 = "";
       $error_email2 = "";
       $error_consulta = "";
   
       if (isset($_REQUEST['enviado'])){
       if($nombre==''){ //comprobamos que el nombre no haya quedado vacío
       $algunerror = TRUE;
       $error_nombre = '<span class="erroneo">Requerido</span>';
       } 
       if($email1==''){ //validamos los que el email no esté vacio
       $algunerror = TRUE; 
       $error_email1 = '<span class="erroneo">Requerido</span>';
       } elseif($email1!=$email2){ //si tiene algo, que concida con la repetición
       $algunerror = TRUE;
       $error_email2 = '<span class="erroneo">No conciden</span>';
       }
       if($consulta==''){ //comprobamos que el contenido de la pregunta no esté vacío
       $algunerror = TRUE;
       $error_consulta = '<br /><span class="erroneo">Requerido</span>';
       }
       }
     if (isset($_REQUEST['enviado'])&&!$algunerror){
       $para="ejemplo.aulaclic@gmail.com"; //si todo es correcto, enviamos el correo
       $asunto="Contacto web Flores - consulta sobre ".$referente;
       $mensaje="Datos del formulario de contacto:\n". //creamos el mensaje con los datos
   "Nombre: ".$nombre." \n".
   "eMail:  ".$email1."\n".
   "Nos conoció por: ".$conocio." \n".
   "Pregunta: ".$cosnulta;
       mail($para, $asunto, $mensaje); //y lo enviamos
       echo "<p>Tu mensaje se ha enviado correctamente. Gracias por contactar con nosotros.</p>\n";
       echo "<p>Nos pondremos en contacto lo antes posible.</p>\n";
       } else {
        if (isset($_REQUEST['enviado'])){
       echo '<p>Por vavor, corrige los siguientes errores:</p>';
       } else {
       echo '<p>Para ponerte en contacto con nosotros, rellena el siguiente formulario:</p>';
       }
       ?>
   <div class="redondo_borde">
   <div class="red_arriba">
   <div></div>
   </div>
   <div class="contenido">
   <form method="post" action="contacto.php" onsubmit="return validarForm(this);">
   <table style="text-align: left; width: 100%;" cellpadding="3" rules="rows">
   <tbody>
   <tr>
   <td>Nombre:</td>
   <td><input type="text" name="nombre" id="nombre" value="<?=$nombre;?>" /><?=$error_nombre;?></td>
   </tr>
   <tr>
   <td>Correo electrónico:</td>
   <td><input type="text" name="email1" id="email1" value="<?=$email1;?>" /><?=$error_email1;?></td>
   </tr>
   <tr>
   <td>Repite tu correo:</td>
   <td><input type="text" name="email2" id="email2" value="<?=$email2;?>" /><?=$error_email2;?></td>
   </tr>
   <tr>
   <td>¿C&oacute;mo nos conociste?:</td>
   <td>
   <select name="conocio" id="conocio">
   <option<?=($conocio=="")?' selected="seleted"':'';?>></option>
   <option<?=($conocio=="Un amigo")?' selected="seleted"':'';?>>Un amigo</option>
   <option<?=($conocio=="Un blog")?' selected="seleted"':'';?>>Un blog</option>
   <option<?=($conocio=="Un buscador")?' selected="seleted"':'';?>>Un buscador</option>
   <option<?=($conocio=="Otros")?' selected="seleted"':'';?>>Otros</option>
   </select></td>
   </tr>
   <tr>
   <td>Tu pregunta es referente a:</td>
   <td><label><input type="radio" name="referente" id="ref_web" value="web"<?=($referente=="web")?' checked="cheked"':'';?> /> 
       La Web </label><br />
   <label><input type="radio" name="referente" id="ref_fotos" value="fotos"<?=($referente=="fotos")?' checked="cheked"':'';?> /> 
       Las fotos </label><br />
   <label><input type="radio" name="referente" id="ref_asociacion" value="asociacion"<?=($referente=="asociacion")?' checked="cheked"':'';?> /> 
       La asocioaci&oacute;n </label>
   </td>
   </tr>
   <tr>
       <td colspan="2">Escribe lo que
       quieres preguntarnos:</td>
       </tr>
       <tr>
       <td class="centrado" colspan="2">
       <textarea cols="50" rows="5" name="consulta"><?=$consulta?></textarea><?=$error_consulta?></td>
       </tr>
       <tr>
       <td class="centrado" colspan="2"><input type="submit" value="Enviar" name="enviado" />
   <input type="reset" value="Restablecer" /></td>
   </tr>
   </tbody>
   </table>
   </form>
   </div>
   <div class="red_abajo">
   <div></div>
   </div>
   </div>
   <?php
       }
   ?>
   </div>
   <div class="red_abajo">
   <div></div>
   </div>
   </div>
   <div class="pie">&copy; Todos los derechos reservados</div>
   </body>
   </html>

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies