La página reservas.html.
Partimos de misma estructura que el resto de páginas.
Al principio tenemos dos tablas. Copia el siguiente código en tu página, dentro del div con clase contenido_abajo:
<h2>Reservas</h2>
<p>El acceso al parque es libre y gratuito, siempre que se respeten las normas de conducta y preservación del entorno. </p>
<p>No obstante, también disponemos de servicios adicionales, como visita guiada o aula educativa para niños.</p>
<h3>Horarios y reservas</h3>
<table border="0" cellspacing="3" cellpadding="3" class="reservas">
<tr>
<th colspan="5">Visitas con guía:</th>
</tr>
<tr>
<td> </td>
<td colspan="2" class="titulo">Temporada de Verano</td>
<td colspan="2" class="titulo">Temporada de Invierno</td>
</tr>
<tr>
<td class="titulo">Horarios:</td>
<td colspan="2">10:00 - 13:00<br />
16:00 - 19:00</td>
<td colspan="2">11:00 - 14:00</td>
</tr>
<tr>
<td rowspan="2" class="titulo">Tarifas:</td>
<td>Individual:</td>
<td>Grupos:</td>
<td>Individual:</td>
<td>Grupos:</td>
</tr>
<tr>
<td>5 € persona</td>
<td>3 € persona</td>
<td>4 € persona</td>
<td>2 € persona</td>
</tr>
</table>
<table border="0" cellspacing="3" cellpadding="3" class="reservas">
<tr>
<th colspan="3">Aula educativa (sólo grupos):</th>
</tr>
<tr>
<td> </td>
<td class="titulo">Temporada de Verano</td>
<td class="titulo">Temporada de Invierno</td>
</tr>
<tr>
<td class="titulo">Horarios:</td>
<td>9:00 - 10:00<br />
15:00 - 16:00</td>
<td>10:00 - 11:00</td>
</tr>
<tr>
<td class="titulo">Tarifas:</td>
<td>25 €</td>
<td>25 €</td>
</tr>
</table>
Esas tablas, tienen aplicadas estilos CSS. Añade los siguiente estilos a la hoja de estilo:
table.reservas { font-size: 90%; background-color: #EFD3B3; text-align: center; margin: 10px auto; width: 410px; border: #BF823B 1px solid; } table.reservas td { background-color: #EFFFEF; } table.reservas th { background-color: #EFD3B3; color: #5F8F11; } table.reservas td.titulo { background-color: #D6EFC2; }
A continuación, tenemos el formulario. Usamos una tabla para organizar los campos. Asegúrate de poner en el atributo action del formulario la página a la que queremos enviar los datos. Copia el código fuente siguiente después de las tablas:
<h3>Contacto</h3>
<p>Si estás pensando visitar el parque con un grupo, por favor, rellena este formulario:</p>
<form id="form1" method="post" action="enviar_reserva.php">
<table cellspacing="2" cellpadding="4">
<tr>
<td>Nombre:</td>
<td><input name="nombre" class="texto" type="text" id="nombre" size="25" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="email" class="texto" type="text" id="email" size="25" /></td>
</tr>
<tr>
<td>Fecha de la visita:</td>
<td><input name="fecha" class="texto" type="text" id="fecha" size="8" />
(DD/MM/AAA)</td>
</tr>
<tr>
<td>Número de personas:</td>
<td><input name="numero" class="texto" type="text" id="numero" size="4" /></td>
</tr>
<tr>
<td>Edad del grupo:</td>
<td><label><input type="radio" name="edad" id="edad" value="5a8" /> De 5 a 8</label><br />
<label><input type="radio" name="edad" id="edad" value="9a14" /> De 9 a 14</label><br />
<label><input type="radio" name="edad" id="edad" value="15a184" /> De 15 a 18</label>
<label><br />
<input type="radio" name="edad" id="edad" value="adultos" />
Adultos</label>
</td>
</tr>
<tr>
<td colspan="2"><label>
<input type="checkbox" name="aula" id="aula" />
Deseamos asistir al aula educativa (sólo niños)</label></td>
</tr>
<tr>
<td>Observaciones:</td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<textarea name="observaciones" id="observaciones" class="texto" cols="45" rows="5"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<input type="submit" value="Enviar" class="boton" />
</td>
</tr>
</table>
</form>
Observa que hemos usado clases en algunos de los elementos. Por tanto, hemos de defiir los estilos para el formulario y sus clases. Añade los siguiente sestilos a la hoja de estilos:
form { width: 410px; border: #BF823B 1px solid; margin: auto; } form table { width: 410px; font-size: 90%; border: #EFD3B3 3px solid; background-color: #EFFFEF; } .texto { border-width: 1px; border-style: solid; border-color: #BF823B #EFD3B3 #EFD3B3 #BF823B; } .boton { border-width: 1px; border-style: solid; border-color: #EFD3B3 #BF823B #BF823B #EFD3B3; }
La página enviar_reservas.php.
Partimos de una página con la estructura normal de las páginas del sitio, pero la guardamos con la extensión php.
Dentro del contenido, delimitamos el código php por sus marcas:
<div class="contenido">
<div class="contenido_abajo"> <h2>Reservas</h2>
<p>El acceso al parque es libre y gratuito, siempre que se respeten las normas de conducta y preservación del entorno.</p> <?php ?> </div> </div>
Dentro de esas marcas, coloca el código PHP. Primero, recogemos los datos. Copia el siguiente código:
//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.
$nombre = recogeDato('nombre');
$email = recogeDato('email'); //asignamos cada valor a una variable
$fech = recogeDato('fecha');
$numero = recogeDato('numero');
$edad = recogeDato('edad');
$aula = isset($_REQUEST['aula'])?'Sí':'No';
$observaciones = recogeDato('observaciones');
$algunerror = FALSE;
Una vez recogidos los datos, comprobamos que no estén vacíos los campos obligatorios. Copia el siguiente código:
if($nombre==''){ //comprobamos que el campo no haya quedado vacío
$algunerror = TRUE;
echo "<p class=\"erroneo\">No has introducido tu nombre.</p>\n";
}
if($email==''){
$algunerror = TRUE;
echo "<p class=\"erroneo\">No has introducido eMail.</p>\n";
}
if($fecha==''){
$algunerror = TRUE;
echo "<p class=\"erroneo\">No has indicado al fecha de la visita.</p>\n";
}
if($numero==''){
$algunerror = TRUE;
echo "<p class=\"erroneo\">No has indicado el número de personas del grupo.</p>\n";
}
if($edad==''){
$algunerror = TRUE;
echo "<p class=\"erroneo\">No has indicado la edad del grupo.</p>\n";
}
Y por último, si los datos son correctos, enviamos el correo. Copia el siguiente código:
if ($algunerror){ //comprobamos si ha habido algún error
echo "<p> </p>\n"; //si los hay, se lo indicamos al usuario
echo "<p>No se ha enviado la reserva por los errores que se detallan arriba.</p>\n";
echo "<p>Por favor, vuelve a rellenar el formulario.</p>\n";
echo "<p class=\"centrado\"><a href=\"reservas.html\">Volver al formulario</a></p>\n";
}else{
$para="ejemplo.aulaclic@gmail.com"; //si todo es correcto, enviamos el correo
$asunto="Reserva de grupos ";
$mensaje="Datos de contacto:\n". //creamos el mensaje con los datos
"Nombre: $nombre\n".
"eMail: $email\n".
"Información de la reserva:\n".
"Día de la visita: $fecha \n".
"Personas del grupo: $numero \n".
"Con edades $edad \n".
"Aula educativa: $aula \n".
"Observaciones: $observaciones";
mail($para, $asunto, $mensaje); //y lo enviamos
echo "<p>Tu reserva se ha enviado correctamente.</p>\n";
echo "<p>Nos pondremos en contacto lo antes posible. Esperamos que disfrutes del parque.</p>\n";
}
Sólo queda añadir a la hoja de estilo un estilo para los párrafos con el mensaje de error:
.erroneo {
color: #DF7E0D;
}
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.