Als er iets is dat meestal heel gebruikelijk is voor elk type website, zijn dit de formulieren. De formulieren die we gebruiken om de contactgegevens in te vullen, voer bankgegevens in, log in op een sociaal netwerk of voer gewoon een zoekopdracht uit zoals we gewoonlijk dagelijks doen in de Google-zoekmachine.
Dus vandaag gaan we het je laten zien 40 formulieren in CSS variërend van contactformulieren, creditcardafrekeningen, logins, eenvoudig, abonnement of zelfs validatie. Een reeks vormen van grote elegantie en stijl om dat speciale punt aan uw website te geven, ongeacht het thema.
Minimalistisch contactformulier
Een eenvoudig contactformulier met een grote verscheidenheid aan effecten zoals zwevende markeringen of lijnanimaties. Elegante CSS-code met een beetje JavaScript. Als u op zoek bent naar een minimalistisch contactformulier dit is perfect voor jou.
Minimalistische vorm
anders minimale vorm, hoewel alleen in CSS om een eenvoudige en krachtige vorm Het heeft niet de minimalistische animaties van de vorige, maar het vervult zijn doel heel goed.
Vintage contactformulier
Vintage contactformulier, een zeer elegant ontwerp. Responsief voor die websites te zien vanaf mobiel, hoewel het geen validatie omvat.
Brief contactformulier
Oosten contactformulier het heeft een nogal merkwaardige animatie: er wordt een brief gevormd Simpel, maar erg handig met veel kleur.
Uitgebreid contactformulier
Oosten uitgebreid contactformulier Het is alleen de voorkant en heeft de extensie validatie met jQuery We klikken op de zwevende knop en het formulier verschijnt met een levendige animatie. Uitstekend.
Contactformulier UI
Contactformulier UI het is een formulier gemaakt in HTML en CSS. Het valt op door te zijn een eenvoudige contactkaart die we kunnen vullen zodat alleen het tekstveld verandert wanneer erop wordt geklikt.
Betaalkaart afrekenen
Un betaalkaart afrekenen gemaakt in HTML, CSS en JavaScript die onderscheidt zich door roterende animatie de creditcard wanneer we op het CVC- of beveiligingsnummerveld drukken.
Creditcard plat ontwerp
Pure CSS voor een afrekenen voor creditcards in vlakke kleuren Kleurrijk en heel eenvoudig, dat staat voor kwaliteit en professionaliteit.
Creditcard UI
Nog een creditcard in HTML, CSS en JavaScript die opvalt door hoe goed hij is koos het algehele ontwerp We zijn de animaties in dit stukje code voor je website vergeten. Download het via deze link.
Reageer op afrekenen
Reageer op afrekenen, gemaakt met React.js, onderscheidt zich door de zijfoto kunnen we aanpassen met de diensten of producten die we verkopen in onze eCommerce.
Betaalkaart afrekenen
Deze kassa valt op door de mogelijkheid om een afbeelding op de kaart te zetten. EEN eenvoudig en duidelijk formulier gemaakt met CSS3, HTML5 en een beetje jQuery. Hoge kwaliteit en anders dan de rest van de kassa's op deze lijst. Je kan downloaden hier deze betaalkaart afrekenen.
Creditcard betaling
Oosten creditcard betalingsformulier is geprogrammeerd om mee te oefenen JavaScript voor DOM-manipulatie U herinnert zich in het ontwerp de elegante code van Stripe, de digitale bankdienst die steeds dichter bij PayPal komt.
Kredietkaart
Een elegant afrekenen voor kaartbetaling verschillend van de anderen en gebaseerd op een creditcard bovenaan zodat we hieronder het volledige formulier hebben met de verschillende gegevens die de klant moet invullen om de betaling in de eCommerce te doen.
Stap voor stap vorm
Un stap voor stap vorm voor registratie in HTML, CSS en JavaScript. Vier stappen voor elk van de punten gelegen aan de linkerkant. Goed afgewerkte animaties voor een zeer afgewerkte vorm. Sterk aanbevolen.
Interactief formulier
Un interactieve vorm multi-pass gemaakt met HTML, CSS en JavaScript Het valt op door de overgangsanimatie tussen elk van de stappen. Het heeft een elegante touch die niet onopgemerkt zal blijven.
Stap voor stap vorm
Oosten stap voor stap vorm valt op door heel creatief te zijn. U beantwoordt de vragen zodat u er op elk moment naar kunt terugkeren door de hele tijd visueel op het scherm aanwezig te zijn.
Stap voor stap
Stap voor stap formulier gedaan in HTML, CSS en JavaScript Het wordt gekenmerkt door de overgangsanimatie tussen elk van de stappen.
JQuery-formulier met meerdere stappen
Als u een zeer lange vorm, dit is perfect voor verschillende secties met een zeer opvallende voortgangsbalk. Gebaseerd op jQuery en CSS, valt het op door zijn ontwerp en grote elegantie.
UI-animatieformulier
De overgangen hiervan UI-animatieformulier zijn gebaseerd op Domink Marskusic Let op het creatieve effect van het vak in blauw wanneer we op enkele van de twee velden van de login of login klikken.
Account aanmaken / login formulier
Een gimmick login en account aanmaken die is gebaseerd op animatie wat gebeurt er tussen die twee secties. Zeer actuele en opvallende aanwezigheid in HTML, JavaScript en CSS.
Snake hoogtepunt
Snake hoogtepunt is een van de meest opvallende login van elke lijst die valt op door de elegante animatie dat verschijnt snel op het moment dat we op een van de twee velden klikken.
Log in scherm
Goddelijk dit ontwerp Log in scherm zo zijn hun animaties en hoe creatief het is Als u de meest actuele wilt zijn op het gebied van webdesign, mag dit formulier niet ontbreken. Onmisbaar.
Login UI-ontwerp
Ontworpen met HTML, Sass en jQuery. Login UI-ontwerp es elegant en duidelijk over het onderwerp dat geen gebrek heeft aan subtiele animaties om een van de favorieten op de lijst te worden.
Login en UI-account aanmaken
Een speciale login-ontwerp en gebruikersinterface voor het maken van een account voor de kleuren en om in te presenteren een grote kaart de twee secties Nog een van de mooiste in de uitvoering die we niet mogen missen. Gemaakt in HTML, CSS en JavaScript.
Onaangename fouten
Onaangename fouten Het is een geweldige login vanwege de animatie van velden met onaangename.css Origineel om een leuke, zorgeloze en heel andere login te zijn. Origineel zonder enige twijfel voor onze website.
Inloggen CSS HTML
Een merkwaardige login door de verschillende pictogrammen die elk van de velden tonen om de bezoeker overal mee naartoe te nemen. Ook de tinten die in de kleuren zijn gekozen, vallen op. Het heeft geen animatie. Het is gemaakt in HTML en CSS om het op de website voor een klant of voor onszelf te implementeren.
Modaal inlogformulier
Oosten Modaal inlogformulier is geïnspireerd door de taal van ontwerp bekend van Material Design We hebben het in veel applicaties op mobiele apparaten gezien. In deze code hebben we een inlogpaneel en een registratiepaneel dat standaard verborgen is. Het registratiepaneel kan worden geactiveerd door op de blauwe kolom aan de rechterkant te klikken. Het heeft een geweldige animatie om een heel speciale en opvallende login te zijn.
Vorm flexbox
Hiermee starten we de zoekformulieren formulier gebaseerd op flexbox Het valt op door de rode kleur van de «zoeken» en voor weinig meer door een elegant zoekveld voor uw website.
Geanimeerde doos
Met deze geanimeerde doos klik op het vergrootglaspictogram en er verschijnt een helderblauwe animatie zodat we alleen de zoekopdracht hoeven in te typen die we op de website gaan uitvoeren. Gemaakt met HTML, CSS en JavaScript.
Zoekveld
een grote lijn loopt over het scherm zodat wanneer we erop drukken, we beginnen met het typen van de zoekopdracht. Een ophaalknop om dit te definiëren eenvoudig zoekformulier.
Eenvoudig zoekveld klikken op
Eenvoudig zoekveld klikken op is gebaseerd op een interactie gezien in de Waze Driver Community-app voertuig. Alle pictogrammen en afbeeldingen zijn gemaakt met CSS. Het valt op door die pictogrammen waarmee we specifieke zoekopdrachten naar een product of dienst kunnen uitvoeren. Opvallend door hoe cool het is.
CSS-tekstinvoereffect
CSS-tekstinvoereffect bevat een reeks van animaties in tekst- en zoeklade om een zorgvuldige zoeker in vorm te zijn.
Zoeken op volledig scherm
Dit bericht van zoeken op volledig scherm het werkt met elk type lay-out of positie. Vereist stijlen containerspecifiek en zoekoverlay-element zich in de root bevinden. Het wordt gekenmerkt door een stuiterende animatie op het moment dat we op de zoekknop drukken.
Zoek
Un zoekformulier simpel dat hij speelt graag met de verschillende standjes en animaties. We klikken op de zoekknop en de volledige la verschijnt om de woorden te typen. Zeer actueel en zeer aan te bevelen voor hoe eenvoudig het is.
Geen vragen
Geen vraag es eenvoudig formulier met tekstveld en de optie om enkele antwoorden te selecteren zodat de gebruiker ze kan selecteren. Visueel veel om een van de beste te zijn.
Pop-up inschrijvingsformulier
Met deze popup inschrijvingsformulier, we klikken op de zwevende knop en het brengt ons naar vorm met een heel grappige toon en een veld waar u de e-mail moet invoeren. Perfect voor e-mailmarketing.
Abonnementsvak UI
een abonnementsbox met een alarmbel en weinig meer dan platte kleuren In het ontwerp.
CSS-abonnementsbox
een slimme abonnementsdoos voor het feit van gebruik verlopen voor de abonneerknop, net als de paarse tint van het veld.
Abonnementsdoos
een eenvoudige abonnementsbox maar met een groot effect door ontwerp.
EMOJI-validatieformulier
In puur CSS dit validatieformulier om de sleutel te maken of wachtwoord. Terwijl we schrijven, meet de emoji het beveiligingsniveau van het formulier. Zonder twijfel grappig en nieuwsgierig.
Mis dit niet lijst met 23 geanimeerde pijlen in CSS.
Uitstekend voorbeeld van voorbeelden die hier worden gepresenteerd. De variatie en aanpassing aan verschillende contexten en het beste is dat de link van elke titel de demo en de broncode bevat, hoewel je deze moet markeren met een knop «Bekijk demo» omdat het uit nieuwsgierigheid was dat ik het ontdekte in de titel. Bedankt voor de bijdrage. Groeten uit Caracas.
Het heeft me erg geholpen, bedankt.