Técnicas Utiles

Plugins

Volver Home

Modal Form Contact

JQuery plugin

Demo 1Demo 2Demo 3
Descripcion:

Modal Form Contact 1.0 es un plugin de jquery que le permite convertir un formulario de contacto convencional , en un formulario de tipo modal con procesamiento asincrónico y validación de errores.

Desarrollado por: estudio alconadadiseño

Download:

jquery.formcontact (zip file)

Dependencias:

jquery.js
jquery.validate.js

Configuracion:

1. Armá tu propio formulario con tu mejor estilo y diseño.

2. Poné el formulario en cualquier parte del Html

                        <html>
                          <body>
                             <form id="miForm" action="sendmail.php">
                                <input type="text" name="nombre"/>
                                <input type="text" name="telefono"/>
                                <input type="submit" value="enviar"/>
                                <a id="closeform"> close form </a>
                             </form>
                          </body>
                        </html>

3. A los campos que quieras validar, agregale la regla de validación correspondiente. 

                        <input type="text" name="nombre" class="required"/>

Visitá: http://bassistance.de/jquery-plugins/jquery-plugin-validation/ Para conocer todas las reglas de validación.

4. Agregá un link de contacto. 

                        <a href="#" id="contactame"> Contacto </a >

5. Instalá los scripts necesarios

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

6. Agregá el siguiente código 

                        $(document).ready(function(){

                           $("#contact").formContact({
                                      formid: 'miForm',
                                      event:'click',
                                      animation:{height: "show"},
                                      opacity:0.65,
                                      close:' closeform%u2019
                                   
                             }); 

                        });
Opciones de configuración:
Propiedades:
Propiedad Descripción Valor por defecto
formid Debe indicarse el id del form a transformar form-contact
event El evento que mostrara el formulario: click, mousemover,… click
animation Animación con la que se muestra el formulario { "height": "toggle", "opacity": "toggle" }
duration Duración de la animación slow
opacity Nivel de opacidad de la capa overlay 0.75
overlaycolor Color de la capa overlay. #000
close Debe indicarse el id del elemento que cierre el formulario. En caso de que no haya un elemento para tal fin, el plugin agregara una X en la parte superior derecha de la ventana.
validate Activar o desactivar la validación de el formulario. true
Eventos:
Evento Descripción Funcion por defecto
succes Se dispara si el envió del formulario correctamente. Para su correcto funcionamiento el servidor que procesa el submit del formulario debe retornar la palabra "ok" function() { alert("Se envio con exito") }
error Se dispara si el envió del formulario produce un error durante su procesamiento en el servidor. Para su correcto funcionamiento el servidor que procesa el submit del formulario debe retornar la palabra "error" function() { alert("Ocurrio un error al intentar el envio") }

Por cualquier duda o comentario escribinos alconadadiseno@gmail.com