Menu

Enviar Email con Bootstrap Modal Popup Ajax & PHP

Enviar Email con Bootstrap Modal Popup Ajax & PHP. Hoy en día muchas sistemas y páginas web utilizan en su aplicación el Framework de estilos “Bootstrap”, la integración “modal popup” con tu proyecto es muy fácil, simplemente agregas las librerías necesarias para que funciones que detallaremos más abajo. Bootstrap le ayuda a añadir botones interactivos y también un popup al presionar un botón sin requerir código adicional. También, usando la librería Bootstrap, usted puede construir un formato HTML bien estructurado respetando los altos estándares web y lo más importante en el menor tiempo posible.

Enviar Email con Bootstrap Modal Popup Ajax & PHP

El actual articulo trataremos de cómo podemos integrar un formulario web emergente Modal Popup” a su sitio web utilizando bootstrap y enviar la información del formulario a un correo electrónico para realizar esta tarea nos apoyaremos en los lenguajes de programación como es el PHP, jQuery y Ajax.

Enviar email con Bootstrap

Enviar email con Bootstrap

Detalles del Script

  • Popup modal con formulario usando librería Bootstrap.
  • Validación de los datos antes de enviarlos usando jQuery.
  • Usaremos jQuery, Ajax y php.
  • Enviar el Email usando PHP.

Nuestro sistema consta de 2 ficheros

  • Index.html, Albergara las librerias y el Modal Popup
  • EnviarForm.php, Lado del lenguaje de programación que se encargara del envio del correo.

Biblioteca de bootstrap & jQuery

La implementación de la librería Bootstrap que se utilizara para hacer funcionar nuestro modal popup y el código HTML, primeramente, incluir las librerías en la etiqueta head de nuestro fichero, nos referimos al bootstrap y jQuery.

Código HTML que usaremos para el modal popup Form

El código HTML que mostraremos a continuación al presionar sobre un objeto crea una ventana de diálogo emergente usando Bootstrap. Para este ejemplo se usará botón con lo cual al presionarlo activará la ventana modal y este mostrará un formulario para enviar un formulario de contacto. Sin embargo, el div debe tener y atributo ID que es fundamental para que la ventana emergente funcione correctamente.

Modal Formulario de contacto

Modal Formulario de contacto


Código JavaScript, validación y envió del formulario

Implementaremos la función EnviarFormulario() que se ejecutara si el usuario da un clic en el botón Enviar formulario. La función EnviarFormulario(), validara los datos enviados mediante el formulario.

Envíe el email de la petición del contacto (EnviarForm. php)

En el archivo EnviarForm. php, se realizan los siguientes trabajos para procesar la solicitud de envío del formulario.

Enviar Email con Bootstrap Modal Popup Ajax & PHP

Enviar Email con Bootstrap Modal Popup Ajax & PHP

Conclusión

Este pequeño código consta de dos ficheros y nos proporciona una forma fácil y rápida de integrar la ventana emergente y enviar los datos del formulario por Email. Sin embargo, si se desea almacenar datos de ese envio en una base de datos, nos haría falta incorporar cláusulas de conexión y “insert into” para almacenarlo en MySQL para futuras consultas.

Les dejo los archivos para que puedan implementarlo.

Obtener cosas como esta
En tu E-Mail

Suscríbase a nuestra lista de correo y obtenga cosas interesantesa su E-mail.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Si continuas utilizando este sitio aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar