Om det finns något som vanligtvis är mycket vanligt för alla typer av webbplatser, är det här formuläret. De formulär som vi använder för att fylla i kontaktinformationen, ange bankuppgifter, logga in på ett socialt nätverk eller helt enkelt göra en sökning som den vi brukar göra dagligen i Googles sökmotor.
Så idag ska vi visa dig 40 formulär i CSS allt från kontaktformulär, kreditkortskassor, inloggningar, enkel, prenumeration eller till och med validering. En serie former av stor elegans och stil för att ge den speciella poängen till din webbplats, oavsett tema.
Minimalistiskt kontaktformulär
Ett enkelt kontaktformulär med en stor variation av effekter som flytande märken eller linjeanimationer. Elegant CSS-kod med lite JavaScript. Om du letar efter en minimalistiskt kontaktformulär det här är perfekt för dig.
Minimalistisk form
Andra minimal form, även om det bara är i CSS att vara en enkel och högeffektiv form. Den har inte de minimalistiska animationerna från den förra, men den klarar sig mycket bra med sitt mål.
Vintage kontaktformulär
Vintage kontaktformulär, en mycket elegant design. Responsiv för dessa webbplatser att ses från mobilen, även om det inte inkluderar validering.
Kontaktformulär för brev
detta kontaktformulär den har en ganska nyfiken animation: ett brev bildas. Enkelt men mycket användbart med mycket färg.
Utökat kontaktformulär
detta kontaktformulär utökat Det är bara frontend och har validering med jQuery. Vi klickar på den flytande knappen och formuläret visas med en livlig animation. Utestående.
Kontaktformulär UI
Kontaktformulär UI det är ett formulär i HTML och CSS. Det sticker ut för att vara ett enkelt kontaktkort att vi kan fylla i så att endast textfältet ändras när det klickas.
Betalningskassa
Un betalningskortskassa gjord i HTML, CSS och JavaScript som kännetecknas av roterande animering kreditkortet när vi trycker på fältet CVC eller säkerhetsnummer.
Kreditkorts platt design
Ren CSS för en kassan för kreditkort i platta färger. Färgglatt och väldigt enkelt som kan beteckna kvalitet och professionalism.
Gränssnitt för kreditkort
Ett annat kreditkort i HTML, CSS och JavaScript som sticker ut för hur bra det är valt den övergripande designen. Vi glömde bort animationer i denna kod för din webbplats. Ladda ner den på den här länken.
Reagera kassan
Reagera kassan, gjord med React.js, kännetecknas av sidobilden vi kan anpassa med de tjänster eller produkter som vi säljer i vår e-handel.
Kassa betalkort
Denna kassa sticker ut för möjligheten att sätta en bild på kortet. A enkel och tydlig form gjord med CSS3, HTML5 och lite jQuery. Hög kvalitet och skiljer sig från resten av kassorna i den här listan. Du kan ladda ner här denna betalningskortskassa.
Keditkortsbetalning
detta kreditkortsbetalningsformulär är programmerad att öva med JavaScript för DOM-manipulation. Du kan komma ihåg i designen den eleganta koden för Stripe, den digitala banktjänsten som närmar sig PayPal.
Kreditkort
En elegant utcheckning för kortbetalning skiljer sig från de andra och baseras på ett kreditkort högst upp Så att nedan har vi hela formuläret med de olika uppgifter som klienten måste fylla i för att göra betalningen i e-handeln.
Steg för steg-form
Un steg för steg-form för registrering i HTML, CSS och JavaScript. Fyra steg för var och en av punkterna på vänster sida. Väl färdiga animationer för en mycket färdig form. Högt rekommenderad
Interaktiv form
Un interaktiv form flersteg gjord med HTML, CSS och JavaScript. Det sticker ut för övergångsanimationen mellan vart och ett av stegen. Den har en elegant touch som inte går obemärkt förbi.
Steg för steg-form
detta steg för steg-form sticker ut för att vara ganska kreativ. Du kommer att svara på frågorna så att du kan återvända till dem när som helst genom att vara visuellt närvarande på skärmen hela tiden.
Steg för steg
Steg för steg formulär gjort i HTML, CSS och JavaScript. Det kännetecknas av övergångsanimationen mellan vart och ett av stegen.
Jquery-form i flera steg
Om du har en mycket lång form, detta är perfekt för olika sektioner med en mycket slående förloppsindikator. Baserat på jQuery och CSS sticker den ut för sin design och för sin stora elegans.
UI-animationsformulär
Övergångarna till detta UI-animationsformulär är baserad på Domink Marskusic. Uppmärksamhet på den kreativa effekten av den blå rutan när vi klickar på några av de två inloggningsfälten.
Kontoskapande / inloggningsformulär
En gimmick inloggning och skapande av konto som är baserad på animering vad som händer mellan dessa två avsnitt. Mycket aktuell och slående närvaro som ska göras i HTML, JavaScript och CSS.
Snake Highlight
Snake Highlight är en av de mest slående inloggningarna i någon lista som sticker ut för den eleganta animationen det visas snabbt när vi klickar på ett av de två fälten.
Inloggningsskärm
Divine denna design inloggningsskärm så är deras animationer och hur kreativt det är. Om du vill vara den senaste när det gäller webbdesign kan det här formuläret inte saknas. Oumbärlig.
Inloggningsgränssnittsdesign
Designad med HTML, Sass och jQuery. Inloggningsgränssnittsdesign es elegant och tydlig om ämnet som inte saknar subtila animationer för att bli en av favoriterna i listan.
Inloggning och UI-konto
En speciell inloggningsdesign och användargränssnitt för skapande av konto för färgerna och för att presentera i ett stort kort de två sektionerna. En annan av de vackraste i utförandet som vi inte får missa. Tillverkad i HTML, CSS och JavaScript.
Motbjudande fel
Motbjudande fel Det är en bra inloggning på grund av animationen av fält med motbjudande.css. Original för att vara en rolig, bekymmersfri och väldigt annorlunda inloggning. Original utan tvekan för vår webbplats.
Logga in CSS HTML
En nyfiken inloggning av de olika ikonerna som visar vart och ett av fälten för att ta besökaren vart vi vill. De nyanser som valts i färgerna sticker också ut. Det har ingen animering. Den är gjord i HTML och CSS för att implementera den på webbplatsen för en klient eller vår egen.
Modal inloggningsformulär
detta Modal inloggningsformulär är inspirerad av språket i design känd för Material Design. Vi har sett det i många applikationer på mobila enheter. I den här koden har vi en inloggningspanel och en registreringspanel som är dold som standard. Registreringspanelen kan aktiveras genom att klicka på den blå kolumnen till höger. Det har en fantastisk animation för att vara en mycket speciell och slående inloggning.
Forma flexbox
Vi startar sökformuläret med detta formen baserat på flexbox. Det sticker ut för den röda färgen på «sökningen» och lite mer för ett elegant sökfält för din webbplats.
Animerad ruta
Med detta animerad ruta klicka på förstoringsglasikonen och en ljusblå animation visas så att vi bara behöver skriva den sökning som vi ska utföra på webbplatsen. Tillverkad med HTML, CSS och JavaScript.
Sökfält
en stor linje går över skärmen så att när vi trycker på det börjar vi skriva sökningen. En pickup-knapp för att definiera detta enkelt sökformulär.
Enkelt sökfält klicka på
Enkelt sökfält klicka på bygger på en interaktion som ses i Waze Driver Community-appen fordons. Alla ikoner och bilder är gjorda med CSS. Det sticker ut för de ikoner som tillåter oss att utföra specifika sökningar efter en produkt eller tjänst. Slående på grund av hur coolt det är.
CSS textinmatningseffekt
CSS textinmatningseffekt innehåller en serie animationer i text- och söklåda att vara en noggrann sökande i form.
Helskärmssökning
Denna post från helskärmssökning det fungerar med alla typer av layout eller position. Kräver stilar container-specifikt och sök-overlay-element att ligga i roten. Det kännetecknas av en studsande animation när vi trycker på sökknappen.
Sök
Un sökformulär enkelt det han gillar att spela med de olika positionerna och animationer. Vi klickar på sökknappen och hela lådan visas för att skriva orden. Mycket aktuell och rekommenderas för hur enkelt det är.
Inga frågor
Ingen fråga es enkel form med textfält och alternativet att välja några svar för användaren att välja dem. Mycket visuellt för att vara en av de bästa.
Popup-prenumerationsformulär
Med detta popup-prenumerationsformulär, vi klickar på den flytande knappen och det tar oss till form med en mycket rolig ton och ett fält där e-postmeddelandet ska anges. Perfekt för e-postmarknadsföring.
Prenumerationsruta UI
en prenumerationslåda med en alarmklocka och lite mer än platta färger I designen.
CSS-prenumerationsruta
en smart prenumerationslåda för det faktum att använd lutningar för prenumerationsknappen precis som fältets lila nyans.
Prenumerationsruta
en enkel prenumerationslåda men med stor effekt av design.
EMOJI-valideringsformulär
I ren CSS detta valideringsformulär för att skapa nyckeln eller lösenord. När vi skriver kommer emoji att mäta formulärets säkerhetsnivå. Roligt och nyfiken utan tvekan.
Missa inte detta lista över 23 animerade pilar i CSS.
Utmärkt exempel på exempel som presenteras här. Variationen och anpassningen till olika sammanhang och det bästa är att länken till varje titel innehåller demo och källkod även om du bör markera den med en knapp «Se demo» eftersom det var av nyfikenhet att jag upptäckte det i titeln . Tack för bidraget. Hälsningar från Caracas.
Det hjälpte mig mycket, tack.