40 CSS-formulär som inte kan saknas på någon webbplats

Inloggningsformulär

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

form-minimalistisk

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.

Relaterad artikel:
23 högkvalitativa CSS-bibliotek för webbdesign

Minimalistisk form

minimalista

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

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

Carta

detta kontaktformulär den har en ganska nyfiken animation: ett brev bildas. Enkelt men mycket användbart med mycket färg.

Relaterad artikel:
27 gratis HTML- och CSS-kort för bloggar, e-handel och mer

Utökat kontaktformulär

Expansivt 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

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

Kassa kortbetalning

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

Rent CSS-kreditkort

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

Snacks

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

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

Popov

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

Rand

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

Dagligen

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

Steg för steg

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

interaktiv

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

Steg för steg

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

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

JQuery flersteg

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

Animeringsformulä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

Inloggningsskapande

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

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

Logga in

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

Inloggningsformulär

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

Inloggningsregistrering

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

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

CSS

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

Kapital

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

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

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

Push-sökning

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å

waze

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-ingång

CSS textinmatningseffekt innehåller en serie animationer i text- och söklåda att vara en noggrann sökande i form.

Helskärmssökning

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

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

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

Prenumerera

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

Teckning

en prenumerationslåda med en alarmklocka och lite mer än platta färger I designen.

CSS-prenumerationsruta

Teckning

en smart prenumerationslåda för det faktum att använd lutningar för prenumerationsknappen precis som fältets lila nyans.

Prenumerationsruta

Prenumerationsruta

en enkel prenumerationslåda men med stor effekt av design.

EMOJI-valideringsformulär

Emoji

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.


Innehållet i artikeln följer våra principer om redaktionell etik. Klicka på för att rapportera ett fel här.

En kommentar, lämna din

Lämna din kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.

  1.   Juan José Perez sade

    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.