यदि कोई ऐसी चीज है जो आमतौर पर किसी भी प्रकार की वेबसाइट के लिए बहुत सामान्य है, तो ये फॉर्म हैं। संपर्क जानकारी में भरने के लिए हम जिन रूपों का उपयोग करते हैं, बैंक विवरण दर्ज करें, एक सामाजिक नेटवर्क में प्रवेश करें या बस एक खोज करें जैसे कि हम आमतौर पर Google खोज इंजन में दैनिक करते हैं।
इसलिए आज हम आपको दिखाने जा रहे हैं सीएसएस में 40 फॉर्म संपर्क फ़ॉर्म, क्रेडिट कार्ड चेकआउट, लॉगिन, सरल, सदस्यता या यहां तक कि सत्यापन से लेकर। विषय की परवाह किए बिना, अपनी वेबसाइट पर उस विशेष बिंदु को देने के लिए महान लालित्य और शैली के रूपों की एक श्रृंखला।
न्यूनतम संपर्क फ़ॉर्म
एक के साथ एक सरल संपर्क फ़ॉर्म विभिन्न प्रकार के प्रभाव जैसे कि फ्लोटिंग मार्क्स या लाइन एनिमेशन। जावास्क्रिप्ट के एक बिट के साथ सुरुचिपूर्ण सीएसएस कोड। यदि आप एक की तलाश कर रहे हैं न्यूनतम संपर्क फ़ॉर्म यह आपके लिए एकदम सही है।
न्यूनतम रूप
अन्य न्यूनतम रूप, हालांकि केवल CSS में ही a सरल और उच्च-प्रभाव रूप। इसमें पिछले वाले के न्यूनतम एनिमेशन नहीं हैं, लेकिन यह अपने उद्देश्य के साथ बहुत अच्छा करता है।
विंटेज संपर्क फ़ॉर्म
विंटेज संपर्क फ़ॉर्म, एक बहुत ही सुंदर डिजाइन। उन वेबसाइटों के लिए उत्तरदायी मोबाइल से देखा जा सकता है, हालांकि इसमें सत्यापन शामिल नहीं है।
पत्र संपर्क प्रपत्र
यह संपर्क प्रपत्र यह एक जिज्ञासु एनीमेशन है: एक पत्र बनता है। बहुत सारे रंग के साथ सरल, लेकिन बहुत उपयोगी है।
विस्तारित संपर्क फ़ॉर्म
यह संपर्क फ़ॉर्म का विस्तार हुआ यह केवल फ्रंट एंड है और है jQuery के साथ सत्यापन। हम फ्लोटिंग बटन पर क्लिक करते हैं और फॉर्म जीवंत एनीमेशन के साथ दिखाई देगा। बकाया है।
फॉर्म यूआई से संपर्क करें
फॉर्म यूआई से संपर्क करें यह HTML और CSS में बना एक रूप है। यह होने के लिए बाहर खड़ा है एक साधारण संपर्क कार्ड हम इसे भर सकते हैं ताकि क्लिक करने पर केवल पाठ फ़ील्ड बदल जाए।
पेमेंट कार्ड चेकआउट
Un भुगतान कार्ड चेकआउट HTML, CSS और जावास्क्रिप्ट में बनाया गया है घूर्णन एनीमेशन द्वारा प्रतिष्ठित है क्रेडिट कार्ड इस समय हम CVC या सुरक्षा नंबर फ़ील्ड पर दबाते हैं।
क्रेडिट कार्ड फ्लैट डिजाइन
शुद्ध सीएसएस के लिए के लिए चेकआउट फ्लैट रंगों में क्रेडिट कार्ड। रंगीन और बहुत सरल जो गुणवत्ता और व्यावसायिकता को दर्शाने में सक्षम है।
क्रेडिट कार्ड यूआई
HTML, CSS और जावास्क्रिप्ट में एक और क्रेडिट कार्ड है जो यह बताता है कि यह कितना अच्छा है समग्र डिजाइन चुना। हम आपकी वेबसाइट के लिए कोड के इस टुकड़े में एनिमेशन के बारे में भूल गए। इसे इस लिंक पर डाउनलोड करें.
रिएक्ट चेकआउट
रिएक्ट चेकआउट, React.js के साथ, द्वारा प्रतिष्ठित है पक्ष चित्र हम अनुकूलित कर सकते हैं उन सेवाओं या उत्पादों के साथ जो हम अपने ईकामर्स में बेचते हैं।
चेकआउट भुगतान कार्ड
यह चेकआउट कार्ड पर एक छवि डालने की संभावना के लिए बाहर खड़ा है। ए CSS3, HTML5 के साथ बनाया गया सरल और स्पष्ट रूप और jQuery का एक सा। उच्च गुणवत्ता और इस सूची के बाकी चेकआउट से अलग। आप डाउनलोड कर सकते हैं यहां यह चेकआउट भुगतान कार्ड।
क्रेडिट कार्ड से भुगतान
यह क्रेडिट कार्ड से भुगतान के लिए फॉर्म के साथ अभ्यास करने के लिए प्रोग्राम किया गया है डोम हेरफेर के लिए जावास्क्रिप्ट। आप डिजाइन में याद कर सकते हैं कि धारी के सुरुचिपूर्ण कोड, डिजिटल बैंकिंग सेवा जो पेपाल के करीब हो रही है।
क्रेडिट कार्ड
एक सुरुचिपूर्ण कार्ड भुगतान के लिए चेकआउट दूसरों से अलग और पर आधारित है एक क्रेडिट कार्ड शीर्ष पर स्थित है इसलिए कि नीचे हमारे पास अलग-अलग डेटा के साथ पूरा फॉर्म है जिसे ग्राहक को ईकामर्स में भुगतान करने के लिए भरना है।
स्टेप बाय स्टेप फॉर्म
Un स्टेप बाय स्टेप फॉर्म HTML, CSS और जावास्क्रिप्ट में पंजीकरण के लिए। प्रत्येक अंक के लिए चार चरण बाईं ओर स्थित है। उच्च तैयार फॉर्म के लिए अच्छी तरह से तैयार एनिमेशन। अत्यधिक सिफारिशित
परस्पर रूप
Un संवादात्मक रूप HTML, CSS और JavaScript के साथ बनाया गया बहु-चरण। यह प्रत्येक चरण के बीच संक्रमण एनीमेशन के लिए खड़ा है। इसमें एक सुरुचिपूर्ण स्पर्श है जो किसी का ध्यान नहीं जाएगा।
स्टेप बाय स्टेप फॉर्म
यह स्टेप बाय स्टेप फॉर्म काफी रचनात्मक होने के लिए बाहर खड़ा है। आप सवालों के जवाब देंगे ताकि आप हर समय स्क्रीन पर नेत्रहीन रूप से उपस्थित होकर किसी भी समय उन्हें वापस कर सकें।
कदम से कदम
स्टेप बाय स्टेप फॉर्म किया HTML, CSS और JavaScript में। यह प्रत्येक चरण के बीच संक्रमण एनीमेशन की विशेषता है।
मल्टी स्टेप जेकरी फॉर्म
यदि आपके पास है बहुत लंबा रूप, यह एक बहुत ही हड़ताली प्रगति पट्टी के साथ विभिन्न वर्गों के लिए एकदम सही है। JQuery और CSS के आधार पर, यह अपने डिजाइन और शानदार लालित्य के लिए खड़ा है।
यूआई एनीमेशन फॉर्म
इस के संक्रमण यूआई एनीमेशन फॉर्म हैं डोमिंक मारस्क्यूजिक पर आधारित। जब हम दो लॉगिन या सत्र फ़ील्ड में से कुछ पर क्लिक करते हैं, तो नीले बॉक्स के रचनात्मक प्रभाव पर ध्यान दें।
खाता निर्माण / लॉगिन फ़ॉर्म
एक नौटंकी लॉगिन और खाता निर्माण जो एनीमेशन पर आधारित है उन दो वर्गों के बीच क्या होता है। एचटीएमएल, जावास्क्रिप्ट और सीएसएस में बहुत वर्तमान और हड़ताली उपस्थिति।
साँप की हाइट
साँप की हाइट किसी भी सूची के सबसे हड़ताली लॉगिन में से एक है सुरुचिपूर्ण एनीमेशन के लिए बाहर खड़ा है वह क्षण दिखाई देता है जिस क्षण हम दो क्षेत्रों में से एक पर क्लिक करते हैं।
प्रवेश पट
इस डिजाइन को दिव्य करें लॉगिन स्क्रीन तो उनके हैं एनिमेशन और यह कितना रचनात्मक है। यदि आप वेब डिज़ाइन की बात करना चाहते हैं, तो यह फ़ॉर्म गायब नहीं हो सकता है। अपरिहार्य।
यूआई डिजाइन लॉगिन करें
HTML, Sass और jQuery का उपयोग करके बनाया गया है। यूआई डिजाइन लॉगिन करें es eस्पष्ट और स्पष्ट इस विषय पर कि सूची में पसंदीदा में से एक बनने के लिए सूक्ष्म एनिमेशन की कमी नहीं है।
लॉगिन और यूआई खाता निर्माण
एक विशेष लॉगिन डिजाइन और खाता निर्माण यूआई रंगों के लिए और में प्रस्तुत करने के लिए एक बड़ा कार्ड दो वर्गों। निष्पादन में सबसे सुंदर है कि हम याद नहीं कर सकते हैं। HTML, CSS और जावास्क्रिप्ट में बनाया गया।
अप्रिय त्रुटियां
अप्रिय त्रुटियां यह एनीमेशन के कारण एक महान लॉगिन है obnoxious.css के साथ फ़ील्ड। एक मजेदार, लापरवाह और बहुत अलग लॉगिन होने के लिए मूल। हमारी वेबसाइट के लिए किसी भी संदेह के बिना मूल।
CSS HTML लॉगिन करें
एक जिज्ञासु लॉगिन विभिन्न आइकन द्वारा जहाँ भी हम चाहते हैं आगंतुक को लेने के लिए प्रत्येक फ़ील्ड दिखाएं। रंगों में चुने गए शेड भी बाहर खड़े होते हैं। इसका कोई एनीमेशन नहीं है। इसे क्लाइंट या हमारे स्वयं के लिए वेबसाइट पर लागू करने के लिए HTML और CSS में बनाया गया है।
मोडल लॉगिन फॉर्म
यह मोडल लॉगिन फॉर्म की भाषा से प्रेरित है सामग्री डिजाइन के लिए जाना जाता डिजाइन। हमने इसे मोबाइल उपकरणों पर कई अनुप्रयोगों में देखा है। इस कोड में हमारे पास एक लॉगिन पैनल और एक पंजीकरण पैनल है जो डिफ़ॉल्ट रूप से छिपा हुआ है। पंजीकरण पैनल को दाईं ओर स्थित नीले कॉलम पर क्लिक करके सक्रिय किया जा सकता है। यह एक बहुत ही विशेष और हड़ताली लॉगिन होने के लिए एक महान एनीमेशन है।
फॉर्म फ्लेक्सबॉक्स
हम इसके साथ खोज फ़ॉर्म शुरू करते हैं प्रपत्र फ्लेक्सबॉक्स पर आधारित है। यह «खोज» के लाल रंग के लिए खड़ा है और आपकी वेबसाइट के लिए सुरुचिपूर्ण खोज क्षेत्र के लिए थोड़ा अधिक है।
एनिमेटेड बॉक्स
इसके साथ एनिमेटेड बॉक्स आवर्धक ग्लास आइकन पर क्लिक करें और एक चमकदार नीला एनीमेशन दिखाई देगा ताकि हम केवल उस खोज को टाइप करें जिसे हम वेबसाइट पर ले जा रहे हैं। HTML, CSS और जावास्क्रिप्ट के साथ बनाया गया।
खोज क्षेत्र
एक स्क्रीन पर बड़ी लाइन चलती है ताकि जब हम इसे दबाएं तो हम खोज लिखना शुरू करें। इसे परिभाषित करने के लिए एक पिक बटन सरल खोज फ़ॉर्म.
सरल खोज फ़ील्ड पर क्लिक करें
सरल खोज फ़ील्ड पर क्लिक करें में देखी गई बातचीत पर आधारित है Waze चालक सामुदायिक अनुप्रयोग वाहन सभी चिह्न और चित्र CSS के साथ बनाए गए हैं। यह उन आइकनों के लिए खड़ा है जो हमें किसी उत्पाद या सेवा के लिए विशिष्ट खोज करने की अनुमति देते हैं। कितनी ठंडी है इसके लिए प्रहार।
सीएसएस पाठ इनपुट प्रभाव
सीएसएस पाठ इनपुट प्रभाव की एक श्रृंखला शामिल है पाठ और खोज दराज में एनिमेशन रूप में एक सावधान साधक होना।
पूर्ण स्क्रीन खोज
इस प्रविष्टि से पूर्ण स्क्रीन खोज यह किसी भी प्रकार के लेआउट या स्थिति के साथ काम करता है। शैलियों की आवश्यकता है कंटेनर-विशिष्ट और खोज-ओवरले तत्व जड़ में स्थित होना। यह एक उछल एनीमेशन द्वारा विशेषता है जिस क्षण हम खोज बटन दबाते हैं।
खोजें
Un खोज प्रपत्र सरल है कि वह विभिन्न पदों के साथ खेलना पसंद करता है और एनिमेशन। हम खोज बटन पर क्लिक करते हैं और पूर्ण दराज शब्द टाइप करने के लिए प्रकट होता है। यह कितना सरल है, इसके लिए बहुत वर्तमान और अत्यधिक अनुशंसित है।
कोई सवाल नहीं
कोई सवाल ही नहीं es पाठ क्षेत्र के साथ सरल रूप और उन्हें चुनने के लिए उपयोगकर्ता के लिए कुछ उत्तर चुनने का विकल्प। सबसे अच्छी तरह से एक होने के लिए नेत्रहीन महान सौदा।
पॉपअप सदस्यता फार्म
इस के साथ सदस्यता फार्म पॉपअप, हम फ्लोटिंग बटन पर क्लिक करते हैं और यह हमें ले जाएगा एक बहुत ही अजीब स्वर के साथ फार्म और एक क्षेत्र जहाँ ईमेल दर्ज करना है। ईमेल मार्केटिंग के लिए बिल्कुल सही।
सदस्यता बॉक्स UI
एक सदस्यता बॉक्स एक खतरे की घंटी और सपाट रंगों से थोड़ा अधिक डिजाइन में।
सीएसएस सदस्यता बॉक्स
एक स्मार्ट सदस्यता बॉक्स के तथ्य के लिए ग्रेडिएंट का उपयोग करें क्षेत्र के बैंगनी रंग की तरह सदस्यता बटन के लिए।
सदस्यता बॉक्स
एक सरल सदस्यता बॉक्स लेकिन डिजाइन से बहुत प्रभाव पड़ता है।
EMOJI सत्यापन फ़ॉर्म
शुद्ध में इसे सीएसएस करें सत्यापन प्रपत्र कुंजी बनाने के लिए या पासवर्ड। जैसा कि हम लिखते हैं, इमोजी फॉर्म के सुरक्षा स्तर को मापेंगे। एक शक के बिना अजीब और उत्सुक।
इसे याद मत करो सीएसएस में 23 एनिमेटेड तीरों की सूची.
यहां प्रस्तुत उदाहरणों का उत्कृष्ट नमूना। विभिन्न संदर्भों के लिए विविधता और अनुकूलन और सबसे अच्छी बात यह है कि प्रत्येक शीर्षक के लिंक में डेमो और स्रोत कोड शामिल हैं हालांकि आपको इसे एक बटन के साथ उजागर करना चाहिए «डेमो देखें» क्योंकि यह जिज्ञासा से बाहर था कि मैंने इसे शीर्षक में खोजा था । योगदान के लिए धन्यवाद। काराकास की ओर से बधाई।
इससे मुझे बहुत मदद मिली, धन्यवाद।