Vamos a crear una practica:

Si lo introducimos todo correctamente y pulsamos el boton Enviar Correo, debe salir el

1
y sino introducimos los datos correctamente me tiene que sacar el mensaje
correspondiente:

ya sea correo, el nombre, el mensaje, uno de ellos o los tres .

2
Si hay algun dato que se ha introducido pero le falta otros campos, el usuario no tiene que
volver a escribir ese campo. Se queda en ese campo. Por ejemplo:

3
Vamos a dividir esta practica en varias partes:

1. Estructura HTML (index.view.php)

2. Los estilos CSS (estilos.css)

3. La lógica que va detras de todo esto.(index.php)

Lo primero que hay que hacer es crear una nueva carpeta llamada practicas, dentro del
cursoPHP que estamos usando, donde vamos a agregar todas las practicas que vamos a ir
haciendo.

creamos la nueva carpeta

y dentro voy a crear otra llamada formulario_contacto

4
Vamos a crear los tres archivos que vamos a usar para esta practica:

index.php , index.view.php, estilos.css

Pasos para realizar la practica:

1. Primer paso: En el archivo index.php incluir require 'index.view.php'

2.Paso: Ir al archivo index.view.php y poner nuestra estructura HTML donde escribiremos el

Añadir el esqueleto de un formulario y poner como titutlo: "Formulario Contacto" dentro de

y añadimos el link para los estilos css:

y comprobamos que todo funciona:

vamos al localhost hasta llegar a formulario contacto y ejecutamos:

Para comprobar que todo funciona , vamos añadir un mensaje en pantalla, escribimos

5
dentro de body un hola con h1.

Guardamos y actualizamos:

Una vez que comprobamos que todo sale correctamente, vamos a empezar a rellenar el
HEAD

Voy a incluir una fuente, en este caso la voy a usar de google Fonts, y eliges la que tu
quieras:

por ejemplo, yo voy a coger Roboto para ello,pinchas quicklick y copias el que te guste:

añadirlo antes de los estilos.css

6
Lo primero que vamos a hacer es crear un contenedor llamado wrap y donde vamos a
encerrar todo nuestro formulario:

Vamos a redirigir al usuario a la misma pagina de forma dinámica, una vez que se envien los
archivos:

Creamos dos input (nombre, correo de tipo texto) y un textarea para el mensaje

le añadimos el boton de enviar y arreglamos textarea:

7
añadimos una nueva clase que va a ser boton....

lo explicaré un poco más adelante...

Probar a introducir datos y comprobar que ocurre:

¿Cuando lo envias y no has añadido ningun campo?¿Cuando lo envias y solo has metido el
nombre?¿Cuando lo envias y solo has metido el correo?¿Cuando lo envias y solo has metido
el nombre y el correo? ¿Cuando lo envias y solo has metido el mensaje? ¿El nombre y el
mensaje?

¿El correo y el mensaje? y cuando lo rellenas perfectamente.

¿Porque metodo se estan enviando??

Como se esta enviando por get por lo que hay que cambiar por post y deja de ser accesible
para los usuarios.

8
Vamos a proceder a implementar estilos.css

padding:0; margin:0; el navegador deja espacios por defecto y es para que no lo use las
siguentes tres lineas es para que los bordes de la cajas sea dinámica

9
 Indico el fondo,el tamaño de la fuente y el tipo de letra del body: "Roboto" es el tipo de
fuente que hemos incluido en el codigo de html

10
El siguiente bloque nos permite definir el estilo de nuestro contenedor:

Le indicamos el ancho, el maximo y centrado

para el formulario: Indico el ancho,el magen, paddin, el color del fondo, sombra, un borde
en la parte de arriba del formulario. overflow:hidden; (por el boton de enviar).

11
Podemos agregar los inputs que nosotros queramos, en este caso voy a poner los más
generales:

12
Para que cuando se cliquea (cuando está seleccionado) se usa focus y le damos un efecto:

13
14
15
El textarea el tamaño es modificable pero podemos limitarlo o que sea fijo, en este ejemplo
el ancho es fijo y el alto está limitado a una altura minima y maxima.

Procedo a preparar los mensajes de alerta:

1.Paso creo uno para las dos mensajes que es común ,está pero como es blanco no se ve:

16
2.Paso añado rojo para el error y el verde para correcto

17
18
 Como los mensajes de error y de exito lo vamos a hacer con PHP procedo a borrarlo en el
codigo HTML pero ya tengo los estilos preparados para cuando lo ejecute desde pHP.

Ahora preparamos el boton de enviar:

19
Ahora procedemos a la tercera parte: VALIDANDO LOS DATOS DEL FORMULARIO CON PHP

procedemos a irnos a index.php

Para validar los datos lo primero que hacemos es comprobar si el boton de enviar ha sido

20
pulsado.

Dentro de ese if vamos a proceder a guardar en tres variables el nombre,correo,mensaje y

21
Regresamos a la pagina index_view.php y donde hemos quitado los div, vamos a proceder a
añadir codigo php para probar si el nombre es correcto.

procedemos a continuar:

primero vamos a comprobar si se ha producido algun error (nombre,email):

y si todos los campos son correctos:

22
Procedemos a enviar los datos recogido en el formulario:

23
El comando mail no funciona bien con los servidores locales, puesto que esta preparado
para enviar los archivos a un hosting...ahora lo comentamos con // para que no nos de
ningun error

24
Si relleno los tres campos y le doy al boton de enviar:

25
26
Procedemos a ir a index.view.php y escribimos dentro de value en el input de nombre:

placeholder="Nombre:" value="<?php if(!$enviado && isset($nombre)) echo $nombre?>">

con esto se consigue que se mantenga el valor dentro del campo nombre y no desaparezca
cuando le damos al boton de enviar.

27
procedo a añadir el correo:

placeholder="Correo:" value="<?php if(!$enviado && isset($correo)) echo $correo?>">

y si introducimos un nombre , correo y pulsamos enviar correo :

28
añadimos dentro del textarea para el mensaje:

placeholder="Mensaje:"><?php if(!$enviado && isset($mensaje)) echo $mensaje?>

y probamos con un ejemplo:

29
Investigar como puedo configurar XAMP para poder usar mail....

FIN de la practica.

30
31