Formulario de Contacto

Estructura HTML.

<#!DOCTYPE html>

<#html lang="en">

<#head>

<#meta charset="UTF-8">

<#title>Formulario Contacto

<#link rel="stylesheet" type="text/css" href="estilos.css">

<#/head>

Luego elegimos el tipo de letra con el que trabajaremos, para ello nos vamos a: https://fonts.google.com/

Seleccionamos nuestro tipo de letra preferido (En este caso yo use Roboto).

Revisamos el tipo de fuente que hemos elegido, y por último la seleccionamos.

Copiamos el siguiente texto, y lo pegamos, arriba de nuestro enlace con los estilos.css.

Luego creamos un contenedor en el cual almacenaremos nuestro formulario:

 <#div class ="nombre_del_contenedor"> 

Después empezamos a trabajar directamente con nuestro formulario y colocamos la siguiente etiqueta:

<#form action="ruta_enlace" method="método_envio">

<input type=" " class=" " name=" " id=" " placeholder=" " value" ">

• 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

Codigo HTML

• * : 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.

1. Queremos que la información no tenga espacios en blanco: función trim
2. Limpiaremos nuestro código (en caso de que el usuario quiera inyectar codigo html): función filter_var(FILTER_SANITIZE_STRING)
3. Comprobaremos que el correo sea válido: filter_var(FILTER_VALIDATE_EMAIL).
4. Convertiremos los caracteres especiales en entidades HTML: htmlspecialchars.
5. Elimina los espaciados con HTML (\n, \r): stripcslashes

• Subimos los archivos a un hosting, y configuramos la opción de enviar correos
• Configuramos nuestro servidor web, y enviamos correos de manera local

En este caso, yo elegí la segunda opción, aquí les dejo el enlace de un vídeo donde explica detalladamente, como configurar nuestro servidor web.

Configuración Xampp

Configurar el correo electrónico

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.

https://www.udemy.com/php-y-mysql/

http://librosweb.es/libro/css/capitulo_4.html

https://www.w3schools.com/html/