Formulario de contacto (Javascript + PHP)

A continuación se ofrece un script utilizando AJAX. Será necesario modificar únicamente 2 líneas de código y configurar el código HTML del formulario tal y como se indica a continuacón:

1.- Descargar y descomprimir la carpeta que encontrarás aquí. La carpeta deberá estar en la misma ubicación que el fichero que contenga el formulario. En su defecto, deberá modificarse posteriormente la referencia a los archivos (ver apartado 'Referenciar archivos del script').

La estructura de ficheros quedará de la siguiente forma:

2.- Abrir el archivo config.php y editar las variables $email y $cuerpo. Posibles ejemplos son los siguientes:

$email = 'info@luiscanada.com';
$asunto = 'Formulario web';

Una vez modificadas estas variables deberán realizarse cambios en la cabecera de la página donde esté incluido el formulario(<head>) y en el propio formulario:

Referenciar archivos del script

Incluir esta línea de código antes de la etiqueta </head>:

<script type="text/javascript" src="script-form/script-form.js"></script>

Configurar parámetros del formulario HTML

Al formulario se le añadirán los atributos:

  1. name="formulario"
  2. id="formulario"
  3. method="post"
  4. action="procesa-form.php"

Deberá quedar de la siguiente manera:

<form method="post" action="script-form/procesa-form.php" name="formulario" id="formulario">

Añadir campo adicional de confirmación

Antes de cerrar el formulario (</form>), añadir la siguiente línea de código:

<div id="mensaje-confirmacion"></div>

Una vez se envíen los datos a la dirección de correo especificada en el archivo config.php, este div será el encargado de mostrar el mensaje de confirmación. Pueden aplicarse mediante CSS los estilos que se consideren oportunos.

Modificar el botón de envío de datos

La línea que contiene el código referenta al botón de envío de datos (<input type="submit" ... />) se reemplazará por esta otra (podrá modifcarse el valor del atributo 'value' pero no los demás):

<input type="button" id="alta" value="Enviar" onclick="DisplayFormValues();" />

Resultado final

Una vez el usuario envíe los datos, los datos serán procesados y enviados a la dirección de email especificada en el fichero 'config.php'. El aspecto final del formulario HTML debería ser como el siguiente:

<form method="post" action="script-form/procesa-form.php" name="formulario" id="formulario"> ...
...
<input type="button" id="alta" value="Enviar" onclick="DisplayFormValues();" />
<div id="mensaje-confirmacion"></div>
</form>

Índice