How To Create Your Own Ajax Formulario de contacto

AJAX (Asynchronous JavaScript and XML) se ha convertido en una herramienta muy popular en el diseño web. Este tutorial te enseñará cómo hacer un formulario de contacto AJAX utilizando PHP y jQuery. Vea el código en acción aquí.

Paso 1 - El HTML

Para comenzar las cosas fuera permite crear un archivo nuevo y lo llaman contact.html, dentro de él queremos crear un formulario HTML simple, así:

  class="loader"> <div </ div> 
  class="bar"> <div </ div> 
  <div id="container"> 
    <form id="contactForm" method="" action="mail.php"> 
    <p> 
      <label for="name"> Nombre </ label> 
      <input id="name" name="name" /> 
    </ p> 
    <p> 
      <label for="email"> E-Mail </ label> 
      <input id="email" name="email" /> 
    </ p> 
    <p> 
      <label for="message"> Su mensaje </ label> 
      <textarea id="Message" name="mensaje" rows="4" cols="30"> </ textarea> 
    </ p> 
    <p> 
      <input class="submit" type="submit" value="submit"/> 
    </ p> 
    </ form> 
  </ div> 

Ahora tenemos un formulario de contacto estándar que se someterá a mail.php

Paso 2 - El PHP

Ahora queremos crear un archivo php llamado mail.php este se encargará de los resultados de nuestro formulario.

  <? php 
  / / declarar nuestras variables 
  $ nombre = $ _GET [ 'nombre']; 
  $ email = $ _GET [ '']; 
  $ comment = $ _GET [ 'comment']; 
  / / obtener la fecha del día de hoy 
  $ todayis = date ( "l, F j, Y, g: ia"); 
  / / establecer un título para el mensaje 
  $ subject = "un mensaje"; 
  $ message = "Mensaje: $ comentario \ r \ n De: $ nombre \ r \ n Responder a: $ email"; 

  / / ponga su dirección de correo electrónico aquí 
  mail ( "email@address.com", mensaje $ asunto, $); 
  ?> 
  <! - Mostrar un mensaje de Gracias en la devolución de llamada -> 
  <h1> <span> Gracias <h10> <? php echo $ nombre?> </ h10> </ span> </ h1> 
  <p> 
    <span> Su mensaje será respondido tan pronto como sea posible. </ span> 
  </ p> 
  <h3> Mensaje enviado el: </ h3> 
  <p> 
    <span> <? php echo $ todayis?> </ span> 
  </ p> 

En esta página que creamos algunas variables, que recogen el nombre, email y mensaje de la forma, a continuación, utilizando el correo php () función que se lo enviará a la dirección especificada. por el bien de este tutorial que han utilizado email@example.com, pero se puede usar lo que quiera.

Una vez que todo esto ha llevado a cabo nos mostrará un mensaje de agradecimiento. utilizando parte de la información que hemos reunido.

Paso 3 - La JQuery

Ahora viene la parte más inteligente. Para iniciar Tendremos que incluir el marco jQuery. se puede descargar desde la página web jQuery, a continuación, adjuntarlo como así.

  <script type="text/javascript" src="yourDirectory/jquery.js"> 

JQuery es un framework javascript creado para hacer la vida mucho más fácil, si es la primera vez de usarlo, echa un vistazo a los 15 días de Jquery. Queremos crear una función para enviar el formulario, sin que nos lleva a otra página. Podemos hacer esto, como así.

  / / participar en la carga de la página 
  $ (function () ( 
    / / AJAX gatillo de presentar 
    $ ( '# formulario de contacto'). submit (function () ( 

      / / ocultar el formulario 
      $ ( '# formulario de contacto'). hide (); 

      / / mostrar la barra de carga 
      $ ( '. loader'). añadir ($('. bar ')); 
      $ ( '. bar'). css ((display: 'block')); 

      / / enviar la solicitud de AJAX 
      $. get ( 'mail.php', (Nombre :$('# '). val (), 
                       correo electrónico :$('# correo electrónico '). val (), 
                       comentario :$('# mensaje '). val ()), 

      / / devuelve los datos 
      los datos function () ( 
        / / ocultar el gráfico 
        $ ( '. bar'). css ((display: 'none')); 
        $ ( '. loader'). append (datos); 
      )); 

    / / estancia en la página 
    return false; 
    )); 
  )); 

Este código se disparará un evento cuando se envía el formulario, que se oculta el formulario y mostrar una barra de carga. Los $. Get () es la línea que hace la llamada AJAX para mail.php que envía los detalles de la forma a través de un método GET. Una vez que el Ajax ha sido un éxito el resultado se mostrará en la pantalla. Esto inyecta el contenido de mail.php a la página de contact.html.

Paso 4 - La CSS

El último paso es añadir algo de estilo CSS para el formulario para asegurarse de que podemos mostrar y ocultar las cosas correctamente. Su no un neccesity, sino que lo hace parecer más limpio.

  body ( 
    font-family: helvetica; 
  ) 

  . gestor ( 

  ) 

  . bar ( 
    display: none; 
    background: url ( 'ajax-loader.gif') no-repeat; 
    margin-left: 20px; 
    margin-top: 50px; 
    height: 20px; 
    width: 230px; 
  ) 

  # contactform ( 
    float: left; 
    position: relative; 
    background-color: # fdfdfd; 
    height: 200px; 
  ) 

  # container ( 
    padding: 20px; 
    float: left; 
    position: relative; 
    height: 200px; 
    width: 100px; 
  ) 

Paso 5 - Put It Together

Si pones todo el código junto a su contact.html debería tener este aspecto.

 <html> <head> <script type="text/javascript" src="../jquery.js"> </ script> <script type="text/javascript"> / / participar en la carga de la página $ (function () (/ / AJAX gatillo en enviar $ ( '# formulario de contacto'). submit (function () (/ / ocultar el formulario $ ( '# formulario de contacto'). hide (); / / mostrar la barra de carga $ ( '. loader '). añadir ($('. bar')); $ ( '. bar'). css ((display: 'block')); / / enviar la solicitud ajax $. get ( 'mail.php', (Nombre :$('# '). val (), correo electrónico :$('# de correo electrónico'). val (), comentario :$('# mensaje '). val ()), / / retorno de la función de los datos (datos) (/ / ocultar el gráfico $ ( '. bar'). css ((display: 'none')); $ ( '. loader'). append (datos);)); / / estancia en la página return false;));)); </ script> <style type="text/css"> body (font-family: helvetica;). gestor de (). bar (display: none; background: url ( 'ajax - loader.gif ') no-repeat; margin-left: 20px; margin-top: 50px; height: 20px; width: 230px;) # contactform (float: left; position: relative; background-color: # fdfdfd; altura: 200px;) # container (padding: 20px; float: left; position: relative; height: 200px; width: 100px;) </ style> </ head> <div <body> class="loader"> </ div> class="bar"> <div </ div> <div id="container"> <form id="contactForm" method="" action="mail.php"> <p> <label for="name"> nombre </ label> <input id="name" name="name" /> </ p> <p> <label for="email"> E-Mail </ label> <input id = "email" name = "correo electrónico" /> </ p> <label for="message"> Su mensaje </ label> <textarea id="Message" name="mensaje" rows="4" cols="30"> < / textarea> </ p> <input class="submit" type="submit" value="submit"/> </ p> </ form> </ div> </ body> </ html> 

Así mediante el uso de sólo 2 archivos que se han creado su propia forma de gran alcance conatct AJAX. Es un simple como eso. Descarga el código y probarlo por ti mismo.