Envío de los datos del formulario

Profesores:JAB y Ester Torres
Cómo enviar la información del formulario
Como HTML (por si solo) no envía datos, vamos a utilizar un lenguaje llamado PHP.

Así, cuando el usuario haga clic en el botón enviar:

  1. El formulario cogerá individualmente cada uno de los datos que hay dentro del <form>, les pondrá un nombre (el especificado con el atributo name) y se los pasará a un fichero PHP correctamente empaquetados.
  2. Este fichero PHP recogerá los datos.
  3. Desempaquetará cada uno de los datos y mirará el nombre que le ha dado el formulario (el name) a cada uno de los datos para poder identificarlos.
  4. Con todo correctamente identificado enviará los datos a una dirección de correo electrónico, con un asunto y un cuerpo bien estructurado.
<form action="enviar.php method="post">
El primer paso se cumple gracias al atributo action="enviar.php" que añadimos en el <form> del formulario que creamos en el tema anterior.

Evidentemente nos falta este archivo enviar.php, que deberá estar en la misma carpeta del servidor que contacto.html.

IMPORTANTE: Un archivo PHP sólo se ejecuta si se encuentra en un servidor de Internet (en nuestro equipo local no funcionará).

Copia el siguiente código en cualquier editor y guárdalo como tipo de fichero:php con el nombre 'enviar.php' en la misma carpeta donde tienes 'contacto.html' o bien haz clic aquí para descargar el fichero.

El texto resaltado en verde corresponde a variables de PHP (que puede ser cualquier nombre sin espacios). Los textos en rojo tienen que corresponder obligatoriamente con los name especificados en el formulario, mientras que los textos azules son aquellos datos que no corresponden con ningún dato y que los podemos modificar a nuestro gusto. 

<?php

$destinatario = 'nombre@servidor.es';
$asunto = 'Petición de presupuesto';

$usuario = $_POST['nombre'];
$remitente = $_POST['mail'];
$proyecto = $_POST['descripcion'];
$estado = $_POST['proceso'];
$presu =  $_POST['presupuesto']."€";

if (!$_POST){
?>
<?php
}else{

  $cuerpo = "<span style='color:#781D22'>
    Petición de información de
  </span>: " . $usuario . "<br>"; 

  $cuerpo .= "<span style='color:#781D22'><b>
    Email
  </b></span>: " . $remitente . "<br><br><dd>";

  $cuerpo .= "<span style='color:#781D22'>
    Descripción del proyecto
  </span>: " . $proyecto . "<br>";

  $cuerpo .= "<span style='color:#781D22'>
    Estado actual</span>: " .
  $estado . "<br>";

  $cuerpo .= "<span style='color:#781D22'><b>
    Presupuesto aproximado
  </b></span>: " . $presu . "</dd>";

  $headers  = "MIME-Version: 1.0\r\n";
  $headers .= "Content-type: text/html; charset=utf-8\r\n";
  $headers .= "From:".$remitente."\r\n";

  mail($destinatario, '=?UTF-8?B?'.base64_encode($asunto).'?=',
  $cuerpo, $headers);
    
  include 'confirma.html';
}
?>


nombre@servidor.es se debe sustituir por la dirección de correo electrónico que recibirá los datos.
El valor de $asunto es el texto que aparecerá como asunto en el correo electrónico que lleve los datos.

Las 5 siguientes palabras en verde son variables de PHP que puedes inventarte y que podrían ser iguales que las rojas (siempre que empiecen con "$").
Las 5 palabras en rojo tienen que coincidir exactamente con las que se han especificado en el formulario bajo el atributo de name.


En este punto se empieza a construir el cuerpo del mensaje.
El texto resaltado en azul es el que aparecerá escrito en el cuerpo del correo electrónico antes de cada uno de los datos.

Aunque dificulta mucho la lectura, la mayor parte del texto que hay entre comillas es código HTML
("..<span style..>") que permite que el mail muestre la información en color granate (color:#781D22) y algunos datos en negrita (<b></b>).












Finalmente, después de enviar el mail se abre confirma.html, que es el fichero html (la página web de confirmación) que aparecerá agradeciendo el envío de los datos.
El mensaje de correo electrónico que se recibirá sería muy parecido a éste:
En el colocaremos un mapa de Google Maps a la derecha de nuestro formulario y en el siguiente le añadiremos una animación.