Cómo crear un formulario de contacto con PHP y AJAX

¿Eres nuevo en el desarrollo web con HTML5?.  ¡Acabamos de aprender un truco increíble, el  cual consiste en hacer que un formulario de contacto estándar y funcional! Siempre puedes proceder al desarrollado con HTML, PHP, pero si quieres hacerlo aún mejor, debe usar AJAX para enviar los datos a PHP sin tener que volver a cargar la página.

Antes de comenzar, déjanos darte una breve idea del procedimiento. Utilizaremos AJAX para enviar datos de formulario y jQuery para simplificar el código de JavaScript. Un script de correo PHP estará allí para enviar los datos de nuestro formulario por correo electrónico.

Paso 1 – Creando un formulario HTML

Necesitas crear un formulario HTML para recopilar los datos del usuario.  Vamos a asignar al formulario la clase llamada: “contact__form ” y en el atributo action seria algo así: action=”mail.php”, el valor mail.php corresponde al archivo php que se va encargará de procesar los datos enviados desde nuestro formulario, dichos datos serán enviados usando la tecnología AJAX

Echa un vistazo a mi código HTML:

Hemos creado un formulario estándar que recopilará el nombre, el correo electrónico, el teléfono, el asunto y el mensaje. Puedes darle a tu formulario HTML el diseño que desees con Bootstrap, eso depende de tus habilidades usando CSS.

Para este ejemplo hemos hecho algo básico. Puedes observar que todos los campos tienen un atributo obligatorio que impedirá que el formulario se envíe si alguno de esos campos se deja vacío.

También hemos usado jQuery para enviar estos datos. Entonces, debes llamar a jquery-3.2.1.min.js al final o al principio (donde quieras) de tu archivo de formulario HTML. Ah, se olvidaba decirte, todas las funcionalidades de JavaScript tendrán lugar en un archivo llamado main.js

Eso es todo el HTML que necesitamos para crear nuestro formulario base de contacto. Puedes guardar este archivo como index.html

Paso 2: usar AJAX para enviar el formulario

Vamos a crear un archivo JavaScript y asígnarle el nombre main.js. Este archivo se encargará de todo el trabajo necesario para enviar nuestro formulario usando AJAX. A continuación el código del  main.js. No te preocupes, encontrarás este proyecto completo al final de este artículo.

Déjanos explicarte el código anterior. Al comienzo del código, declaramos pocas variables para almacenar los datos que obtenemos de nuestro formulario HTML.

La función de envío luego guarda los datos en la variable form_data. Más tarde con $.ajax enviamos nuestros datos al arhivo mail.php.  Ahora viene la parte de prueba, si nuestros datos pasan sin problemas, la función completa se ejecutará y mostrará un mensaje de éxito. Pero, si no lo hace, la función de error se ejecutará y mostrará un mensaje de error.

Paso 3: deja que PHP haga su trabajo y envíe el correo electrónico

¿Qué hacemos con los datos que obtuvimos del usuario? Lo almacenamos en algún lugar ¿verdad? Pero, podemos enviar un correo electrónico en su lugar. Para hacerlo, escribimos un script de correo PHP. Copia el siguiente código y guárdalo con el nombre mail.php

Ten en cuenta que debes reemplazar la dirección de correo:  demo@gmail.com por tu dirección de correo electrónico o por la dirección que desees que reciba los mensajes. Puedes descargar los archivos de este proyecto usando el botón de descarga a continuación.

Descargar formulario de contacto AJAX (472 descargas)

Esperamos que este pequeño script, pueda ser de utilidad en tus proyectos web. Si tienes alguna pregunta o no entendiste alguna parte, comunícate con nosotros a través de la sección de comentarios. Estamos siempre aquí para responder  a tus dudas o sugerencia. Gracias por leernos  🙂

Anuncios
  • Heron Picasso

    hola, primero te agradezco que subas este tipo de material.

    por otra parte me aparece un error al momento del hacer el envío, esto es lo que me aparece, en el recuadro verde:

    <?php if ($_SERVER["REQUEST_METHOD"] == "POST") { #Reemplazar este correo por el correo electrónico del destinatario $mail_to = "picasso@itesm.mx"; # Envío de datos $subject = trim($_POST["subject"]); $name = str_replace(array("r","n"),array(" "," ") , strip_tags(trim($_POST["name"]))); $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL); $phone = trim($_POST["phone"]); $message = trim($_POST["message"]); if ( empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL) OR empty($phone) OR empty($subject) OR empty($message)) { # Establecer un código de respuesta y salida. http_response_code(400); echo "Por favor completa el formulario y vuelve a intentarlo."; exit; } # Contenido del correo $content = "Nombres: $namen"; $content .= "E-mail: $emailnn"; $content .= "Telefono: $phonen"; $content .= "Mensaje:n$messagen"; # Encabezados de correo electrónico. $headers = "From: $name “; # Envía el correo. $success = mail($mail_to, $subject, $content, $headers); if ($success) { # Establece un código de respuesta 200 (correcto). http_response_code(200); echo “¡Gracias! Tu mensaje ha sido enviado.”; } else { # Establezce un código de respuesta 500 (error interno del servidor). http_response_code(500); echo “Oops! Algo salió mal, no pudimos enviar tu mensaje.”; } } else { # No es una solicitud POST, establezce un código de respuesta 403 (prohibido). http_response_code(403); echo “Hubo un problema con tu envío, intenta de nuevo.”; } ?>

    por que me pasa esto?

    espero me puedas ayudar,
    saludos,
    gracias.

  • Empanada Sama

    este si es un buen tutorial, no como otros que explican tanto que se enredan, gracias 12 de 10