Los formularios de contacto son una parte indispensable de cada sitio web. En su mayoría, se implementan en una página separada y rara vez muestran creatividad, aunque hay muchas formas de mejorar su estilo visual. En este tutorial, verá cómo crear un formulario dinámico de contacto deslizable usando jQuery.

Veamos lo que estamos tratando de lograr con este tutorial. La imagen de abajo muestra el diseño de nuestro objetivo. En la esquina superior derecha del contenido está? Contáctenos? enlazar. Cuando el usuario haga clic en él, el formulario de contacto se deslizará hacia abajo. Cuando el usuario envíe el formulario, recibirá un mensaje de que su mensaje se envió con éxito y en dos segundos, todo el formulario se deslizará hacia arriba.

Nota: puede hacer que este formulario sea completamente funcional agregando validación y algún código real que envíe el correo electrónico.

Echa un vistazo a la demostración y descarga el código fuente completo aquí.

La estructura

Vamos a explicar la estructura primero.

Nombre * Dirección de correo electrónico * Su mensaje * <textarea id="?Message?" rows="?3"" cols="?20""> ¡Tu mensaje ha sido enviado exitosamente!

Logo de la compañía

?

El código CSS

Tenemos? ContactForm? y? contactLink? divs dentro del? contactFormContainer? que se posiciona absolutamente. ContactForm contiene elementos de formulario, y contactLink cambiará nuestro formulario de contacto al hacer clic. Bastante simple, ¿verdad? El código CSS lo hará más claro:

#contactFormContainer {position: absolute; izquierda: 600px; flotar derecho; } #contactForm {altura: 277px; ancho: 351px; imagen de fondo: url ('bkg.jpg'); pantalla: ninguna; } #contactForm fieldset {padding: 30px; frontera: ninguna; } etiqueta #contactForm {pantalla: bloque; color: # ffc400; } entrada #contactForm [tipo = texto] {pantalla: bloque; borde: sólido 1px # 4d3a24; ancho: 100%; margen inferior: 10px; altura: 24px; } #contactForm textarea {display: block; borde: sólido 1px # 4d3a24; ancho: 100%; margen inferior: 10px; } #contactForm input [type = submit] {background-color: # 4d3a24; borde: sólido 1px # 23150c; color: # fecd28; relleno: 5px; } #contactLink {altura: 40px; ancho: 351px; imagen de fondo: url ('slidein_button.png'); bloqueo de pantalla; cursor: puntero; } #messageSent {color: # ff9933; pantalla: ninguna; }

Vamos a deslizar a la gente!

Y para que esto funcione, tenemos que añadir un toque de jQuery.

$ (document) .ready (function () {$ (? # contactLink?). click (function () {if ($ (? # contactForm?). is (?: hidden?)) {$ (? # contactForm? ) .slideDown (? slow?);} else {$ (? # contactForm?). slideUp (? slow?);}});}); function closeForm () {$ (? # messageSent?). show (? slow?); setTimeout ('$ (? # messageSent?). hide (); $ (? # contactForm?). slideUp (? slow?)', 2000); }

Déjame explicarte brevemente el código de arriba. Al hacer clic en #contactLink div, se alternará la visibilidad del formulario de contacto. Una vez que el usuario envía el formulario, ¿un mensaje? ¡Su mensaje se envió con éxito! aparecerá y todo el formulario se deslizará hasta su estado original.

Echa un vistazo a la demostración y descarga el código fuente completo aquí.

¿Por qué todo esto?

Esto es solo una muestra de cómo puede mejorar la experiencia del usuario agregando contenido dinámico a sus páginas. Además de un formulario de contacto, puede crear un formulario de inicio de sesión deslizable, un formulario de búsqueda o cualquier cosa que crea que mejore la experiencia del usuario.

¿Hay algo que se pueda hacer mejor? ¿Conoces alguna otra forma de hacer esto? ¡Comparte algunos ejemplos!