Un cordial saludos a todos los miembros de esta extraordinaria comunidad, en esta oportunidad quiero compartir con ustedes como crear un sencillo formulario de contacto con HTML, CSS y PHP y a como configurar el servidor web (Xampp) para que realice la tarea de enviar los correos electrónicos.
Para ellos necesitamos tener Instalado los siguientes programas:
Para realizar el formulario debemos de hacer lo siguiente:
Crear la estructura (HTML)
Diseño (CSS)
Funcionamiento (PHP)
Configuración del servidor (xampp)
Configurar el correo electrónico
Luego de tener definido lo que tenemos que hacer, abrimos nuestro editor de texto, inicializamos nuestro servidor web y creamos 3 nuevos archivos, los cuales almacenaremos en la carpeta htdocs ubicada en nuestro disco duro y dentro de ella crearemos otra carpeta llamada Formulario_Contacto.
Los archivos pueden llevar el nombre que deseen, en este caso yo les asigné:
Index.php: Contiene el código php
Index.view.php: Contiene la vista de nuestro formulario (código HTML enlazado con CSS).
Estilos.css: contiene todo el código CSS (Aquí es donde especificamos el tipo de letra, tamaño, posición y colores de nuestro formulario).
Como podemos observar, cada archivo tiene su propia extensión, esto identifica el tipo de archivo con el que estamos trabajando.
Y por último, enlazamos los archivos con la etiqueta y su atributo href, para que se comuniquen entre ellos, y poder empezar a escribir nuestro código.
Estructura HTML.
Lo primero que debemos hacer es escribir nuestro código de cabecera HTML.
En el atributo action colocamos la ruta a la que nos enviara nuestro formulario, y en el atributo method establecemos el método por donde enviaremos la información (POST o GET).
Y luego creamos los contenedores de información (Donde el usuario escribirá la información), en este caso se crearan 3 (Nombre, correo y mensaje):
type : Colocamos el tipo de información que se almacenara (Texto, fecha, correo…)
class : Nombre de la clase (para trabajar en CSS)
name: Nombre del atributo.
Id: identificador (este nombre no se debe repetir)
Placeholder: Nombre que se mostrara dentro del contenedor
Value: Valor que se le asignara
Luego que realizamos todo esto abrimos nuestro navegador web, colocamos en la url la siguiente dirección: http://localhost/Formulario_Contacto/. Y observamos cómo va quedando nuestro formulario.
El código CSS se ordenó mediante bloques, les comentaré brevemente cual es la función que realiza cada bloque de código.
* : Limpia los elementos HTML y establecemos un ancho dinámico en los diferentes navegadores
body: Establecemos el tamaño de la letra, el tipo de letra y el color de fondo.
.wrap: Indicamos que el ancho del contenedor sea de un 90%, el ancho máximo sea de 500px y que se centre automáticamente.
form: Agregamos el color de fondo, establecemos valores dinámicos (para que se adapte a cualquier tipo de pantalla), colocamos una línea en la parte superior y agregamos una sombra
Luego le damos valores y propiedades a cada uno de los contenedores (nombre, correo, mensaje).
También asignamos las propiedades de los errores (en el caso que ingrese un dato erróneo y en el caso que rellene todos los campos correctamente). Colocamos los tipos de letra, el color de fondo y la posición.
Y por último asignamos las propiedades del botón de enviar.
Primero que nada, queremos comprobar si la información ha sido enviada (si el usuario dio clic en enviar), establecemos la condición, y luego como el formulario nos redirecciona a la misma página, queremos extraer esa información que el usuario envió, y realizar una serie de validaciones:
Queremos que la información no tenga espacios en blanco: función trim
Limpiaremos nuestro código (en caso de que el usuario quiera inyectar codigo html): función filter_var(FILTER_SANITIZE_STRING)
Comprobaremos que el correo sea válido: filter_var(FILTER_VALIDATE_EMAIL).
Convertiremos los caracteres especiales en entidades HTML: htmlspecialchars.
Elimina los espaciados con HTML (\n, \r): stripcslashes
Si el usuario no ingresa alguno de estos valores, o deja todo los campos vacíos del formulario, mostraremos los respectivos mensajes en pantalla: “Por Favor ingrese el nombre, correo o mensaje” respectivamente.
Todos estos errores los almacenaremos en una variable, que será llamada en el caso de que haya un error.
Luego en el caso de que errores == false (que no hayan errores) queremos que se envié la información y creamos la condición donde almacenaremos la información que se enviara, en el orden adecuado.
Después de configurar nuestro servidor web, nuestro proveedor de correos (Gmail), nos pide que configuremos la seguridad de nuestro correo, debido a que ha detectado que estamos accediendo a él mediante terceras aplicaciones, se nos envía un mensaje automático a nuestra bandeja de entrada.
Luego damos clic para permitir el acceso.
Y por último nos llegara otro correo que nos indicara que le hemos damos acceso a aplicaciones menos seguras
Al momento que nos llega el primer correo, verificamos inmediatamente que el servidor se ha configurado de manera exitosa, y se pondrán enviar los correos.
Nota: Este formulario no es para un envío masivo de correos, solo es para realizar pruebas, si se intenta utilizar para enviar correos masivos no funcionara.
Envió de Correos
Esto es todo amigos, espero les sea de utilidad este post, aqui les dejo algunos sitios web de donde recopile la información. Cualquier duda pueden dejarla en los comentarios.
