Cómo hacer un formulario de contacto en jQuery

by admin

jQuery es una biblioteca populares marco de JavaScript que permite a los desarrolladores web para manejar la validación de formularios de presentación en tiempo real. la validación de formularios en tiempo real permite al usuario evitar la frustrante experiencia de volver a cargar toda la página Web cada vez que un campo de formulario no valida. jQuery es un framework de código abierto bajo una licencia MIT y GPL. En otras palabras, es libre de utilizar. La biblioteca es pequeña (144 KB) y se incorpora en un proyecto Web sin necesidad de utilizar una cantidad significativa de recursos.

Instrucciones

1 Descargar una validación jQuery plug-in. Este tutorial utiliza las jquery.validate.js plug-in desde el sitio web bassistance.de. Los desarrolladores web pueden hacer uso de un gran número de otros plug-ins de jQuery que también están disponibles en Internet, ya han sido codificados, son libres de usar y están personalizados para manejar los envíos de formularios. Grandes depósitos de código como Google Code, jQuery y SourceForge.net permiten a los desarrolladores para descargar estos plug-ins, sin costo (ver Recursos).

2 Iniciar un nuevo archivo PHP. Este archivo se creará un formulario de una campo, utilizar jQuery para validar que la entrada se ha colocado en el campo antes de la presentación de la forma y, de ser validado, enviará por correo electrónico el campo realizada para el desarrollador Web.

3 Escribir el código PHP para manejar los datos del formulario enviado. Este código de dos partes asegura que los datos se presentó, utiliza la función de correo de PHP para enviar los datos presentados y la variable $ emailSent a "true". A los efectos de este tutorial, el campo se ha asignado el nombre de "contactname".

<? Php
if (isset ($ _POST [ 'enviar'])) {
si (trim ($ _POST [ 'contactname']) == '') {
$ HasError = true; } Else {
$ Name = trim ($ _POST [ 'contactname']);}
if (! isset ($ hasError)) {
$ EmailTo = '[email protected]';
$ Cuerpo = "Nombre: $ \ n \ nemail: $ correo electrónico \ n \ nSubject: $ asunto \ n \ nComments: \ n $ comentarios";
$ cabeceras = 'De: Mi sitio <' $ emailTo.. '>'. "\ R \ n". 'Responder a: ' . $ correo electrónico;
mail ($ emailTo, $ asunto, $ cuerpo, $ cabeceras);
$ EmailSent = true;}}
?>

4 Importar el código de jQuery. En la cabecera del archivo, un enlace a la versión de jQuery ofrecida por Google, tire de los jquery.validate.js enchufe e inserte una función JavaScript para validar el formulario. A los efectos de este tutorial, la forma se refiere como "yourContactForm".

<Head>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot; type =" text / javascript "> </ script>
<Script src = "jquery.validate.js" type = "text / javascript"> </ script>
<Script type = "text / javascript">
$ (Document) ready (function () {
$ ( "# YourContactForm") validar ().;
});
</ Script>
</ Head>

5 Escribir el cuerpo del archivo. El cuerpo del archivo contiene el formulario de contacto envuelto en el div "contacto envoltorio". Una pequeña sección de PHP realiza una comprobación de isset en la variable $ emailSent y, si se establece la variable, el "Gracias por enviar mi formulario" aparece frase en lugar de la forma.

<Body>
<Div id = "contacto-wrapper">
<? Php if (isset ($ emailSent) && $ emailSent == true) {// Si se envía correo electrónico
print "Gracias por enviar mi formulario";
} Else {?>
<Form method = "post" action = "thisFile.php" id = "yourContactForm">
<Div> <label for = "nombre"> <strong> Nombre: </ strong> </ label>
<Input type = "text" size = nombre de "50" = "contactname" id = valor "contactname" = "" class = "required" /> </ div>
<Input type = "submit" value = "Enviar mensaje" name = "submit" />
</ Form> <? Php}?> </ Div> </ body>

ETIQUETA: