Kontaktformulare sind ein unverzichtbarer Bestandteil jeder Website. Sie werden meistens auf einer separaten Seite implementiert und zeigen selten Kreativität, obwohl es viele Möglichkeiten gibt, ihren visuellen Stil zu verbessern. In diesem Tutorial erfahren Sie, wie Sie mit jQuery ein dynamisches Kontaktformular erstellen.

Mal sehen, was wir mit diesem Tutorial erreichen wollen. Das Bild unten zeigt die Anordnung unseres Ziels. In der oberen rechten Ecke des Inhalts befindet sich? Kontaktiere uns? Verknüpfung. Wenn der Benutzer darauf klickt, rutscht das Kontaktformular nach unten. Wenn der Benutzer das Formular übermittelt, erhält er eine Nachricht, dass seine Nachricht erfolgreich gesendet wurde. Innerhalb von zwei Sekunden wird das gesamte Formular nach oben verschoben.

Hinweis: Sie können dieses Formular voll funktionsfähig machen, indem Sie eine Validierung und echten Code hinzufügen, der die E-Mail sendet.

Schauen Sie sich die Demo an und laden Sie den vollständigen Quellcode hier herunter.

Die Struktur

Lassen Sie uns zuerst die Struktur erklären.

Name * E-Mail-Adresse * Ihre Nachricht * <textarea id="?Message?" rows="?3"" cols="?20""> Ihre Nachricht wurde erfolgreich gesendet!

Firmenlogo

?

Der CSS-Code

Wir haben? Kontaktformular? und? contactLink? divs im? contactFormContainer? das ist absolut positioniert. ContactForm enthält Formularelemente und ContactLink schaltet unser Kontaktformular durch Klicken um. Einfach genug, richtig? Der CSS-Code macht dies klarer:

#contactFormContainer {Position: absolut; links: 600px; schweben rechts; } #contactForm {height: 277px; Breite: 351px; Hintergrundbild: URL ('bkg.jpg'); Anzeige: keine; } #contactForm fieldset {padding: 30px; Grenze: keine; } #contactForm label {Anzeige: Block; Farbe: # ffc400; } #contactForm Eingabe [Typ = Text] {Anzeige: Block; Rahmen: fest 1px # 4d3a24; Breite: 100%; Rand unten: 10px; Höhe: 24px; } #contactForm textarea {display: block; Rahmen: fest 1px # 4d3a24; Breite: 100%; Rand unten: 10px; } #contactForm input [type = submit] {Hintergrundfarbe: # 4d3a24; Rahmen: fest 1px # 23150c; Farbe: # fecd28; Polsterung: 5px; } #contactLink {height: 40px; Breite: 351px; Hintergrundbild: URL ('slidein_button.png'); Bildschirmsperre; Cursor: Zeiger; } #messageSent {color: # ff9933; Anzeige: keine; }

Lasst uns Leute schieben!

Und damit dies funktioniert, müssen wir jQuery hinzufügen.

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

Lassen Sie mich den Code oben kurz erklären. Durch Klicken auf #contactLink div wird die Sichtbarkeit des Kontaktformulars umgeschaltet. Nachdem der Benutzer das Formular übermittelt hat, wurde eine Nachricht "Ihre Nachricht wurde erfolgreich gesendet!" wird angezeigt und das gesamte Formular wird in den ursprünglichen Zustand verschoben.

Schauen Sie sich die Demo an und laden Sie den vollständigen Quellcode hier herunter.

Warum das alles?

Dies ist nur ein Beispiel dafür, wie Sie die Benutzererfahrung verbessern können, indem Sie Ihren Seiten dynamischen Inhalt hinzufügen. Neben einem Kontaktformular können Sie ein Slide-In-Anmeldeformular, ein Suchformular oder alles, was Ihrer Meinung nach die Benutzererfahrung verbessern wird, erstellen.

Gibt es etwas, was man besser machen könnte? Kennen Sie eine andere Möglichkeit, dies zu tun? Teilen Sie einige Beispiele!