Kontaktformulär är en oumbärlig del av varje hemsida. De implementeras mestadels på en separat sida och de visar sällan kreativitet, även om det finns många sätt att förbättra sin visuella stil. I den här handledningen ser du hur du skapar en dynamisk inskjutningsformulär med jQuery.

Låt oss se vad vi försöker uppnå med denna handledning. Bilden nedan visar uppställningen av vårt mål. I övre högra hörnet av innehållet är? Kontakta oss? länk. När användaren klickar på den, kommer kontaktformuläret att glida ner. När användaren skickar formuläret får de ett meddelande om att deras meddelande har skickats och inom två sekunder, hela formuläret glider upp.

Obs! Du kan göra det här formuläret fullt funktionellt genom att lägga till validering och någon riktig kod som skickar e-postmeddelandet.

Kolla in demoen och ladda ner full källkod här.

Strukturen

Låt oss förklara strukturen först.

Namn * E-postadress * Ditt meddelande * <textarea id="?Message?" rows="?3"" cols="?20""> Ditt meddelande har skickats!

Företagslogotyp

?

CSS-koden

Vi har? Contactform? och? contactLink? divs inom "contactFormContainer" som är placerad absolut. ContactForm innehåller formulärelement och kontaktLink kommer att byta vårt kontaktformulär på klicka. Enkelt nog, eller hur? CSS-koden kommer att göra detta tydligare:

#contactFormContainer {position: absolute; vänster: 600px; float: höger; } #contactForm {höjd: 277px; bredd: 351px; background-image: url (bkg.jpg '); display: none; } #contactForm-fält {vaddering: 30px; kant: none; } #contactForm label {display: block; color: # ffc400; } #contactForm inmatning [typ = text] {display: block; gräns: fast 1px # 4d3a24; bredd: 100%; margin-bottom: 10px; höjd: 24 bildpunkter; } #contactForm textarea {display: block; gräns: fast 1px # 4d3a24; bredd: 100%; margin-bottom: 10px; } #contactForm inmatning [typ = skicka] {bakgrundsfärg: # 4d3a24; gräns: fast 1px # 23150c; color: # fecd28; padding: 5px; } #contactLink {höjd: 40px; bredd: 351px; background-image: url (slidein_button.png '); display: block; markören: pointer; } #messageSent {color: # ff9933; display: none; }

Låt oss glida folk!

Och för att göra detta arbete måste vi lägga till en touch av jQuery.

$ (dokument) .ready (funktion () {$ (? # contactLink?). klicka (funktion () {if ($ (? # contactForm?). är (?: dold?)) {$ (? # contactForm? ) .slideDown (? slow?);} else {$ (? # contactForm?). slideUp (? slow?);}});}); funktion closeForm () {$ (? # messageSent?). visa (? långsam?); setTimeout ('$ (? # messageSent?). hide (); $ (? # contactForm?). slideUp (? slow?)', 2000); }

Låt mig kort förklara koden ovan. Om du klickar på #contactLink div ändras kontaktformulärets synlighet. När användaren skickar formuläret, ett meddelande? Ditt meddelande har skickats! !? kommer att visas och hela formuläret glider upp till dess ursprungliga tillstånd.

Kolla in demoen och ladda ner full källkod här.

Varför allt detta?

Detta är bara ett exempel på hur du kan förbättra användarupplevelse genom att lägga till dynamiskt innehåll på dina sidor. Förutom en kontaktformulär kan du skapa en inloggningsblankett, sökformulär eller något som du tycker kommer att förbättra användarupplevelsen.

Finns det något som kan bli bättre? Känner du till något annat sätt att göra detta? Dela några exempel!