۱۰ قطعه کد برای ساختن فرم‌های زیبا

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 18 بهمن 1396
دسته بندی ها : css

هر وبسایتی به یک سری از فرم ها نیاز دارد، حال چه فرم های پیچیده‌ی پرداخت باشد و یا چه یک فرم تماس باما ساده. یکی از مهمترین مواردی که هنگام ساختن فرم باید در نظر بگیرید این است که فرم قابلیت استفاده پذیری بالایی داشته باشد. اما در کنار این مورد زیبا بودن فرم نیز مهم است. به این دلیل که فرم های زیبا همیشه کاربر را به کار کردن با آن ها بیشتر ترغیب می کند.

اگر برای طراحی این قسمت ایده‌ای ندارید، ممکن است که این مجموعه به کارتان بیاید. این مجموعه حاوی ۱۰ طراحی مربوط به فرم است که در کنار آن ها به صورت رایگان سورس مربوطه نیز قرار داده شده است. مطمئنا در این طرح می توانید، طرح‌بندی با رنگ های مختلف، استایل های مختلف ورودی، استایل های تایپوگرافی و مواردی از این دست را مشاهده کنید. 

جدای از آن این موارد همگی به صورت رایگان قرار داده شده اند، به این معنا که می توانید آن ها را دریافت کنید و به صورت رایگان در وبسایت خودتان مورد استفاده قرار دهید.

۱. Material Design

اگر با وبسایت راکت همراه بوده باشید مطمئنا با طراحی متریال آشنایی دارید. متریال یکی از اصول طراحی است که توسط گوگل عرضه شده و در چند سال قبل نظرات بسیاری را به خودت جلب نموده است. در ابتدا این طراحی صرفا برای توسعه اپلیکیشن های آندروید عرضه شده بود اما بعد از آن به سرعت سراغ وب نیز آمد.

اگر از طراحی مینیمالیستی گوگل متریال خوشتان می آید، پس بهتر است این طرح از Jon Uhlmann را بررسی کنید. 

این طرح از پیش پردازنده های PUG و Sass استفاده می کند که هر کدام به نوبت مربوط به HTML و CSS می شوند. این نمونه فرم بسیار سبک است. المان های متریال قرار گرفته در این طراحی می تواند در تمام مرورگرها رندر شود. 

۲. Under The Sea

با این طرح می توانید سفری به اعماق اقیانوس ها داشته باشید. پشت زمینه این طرح از یک الگوی تکرار شونده برای بازسازی حالت موج ها در آب استفاده می کند. در کنار این ها یکسری از ماهی نیز قرار گرفته که صحنه را طبیعی تر می کند. 

جدای از آن وقتی شما روی هر یک از ورودی ها کلیک می کنید در کنار آن ها یک اختاپوس زیبا نیز نمایان می شود. برای فیلد ایمیل نیز از قابلیت اعتبارسنجی استفاده شده است.

۳. Bootstrap 3 Form

قالب کلی فرم های بوت استرپ خسته کننده هستند. این در حالی است که بسیاری از وبسایت ها مبتنی بر بوت استرپ ساخته می شوند و همان استایل های پیشفرض روی آن ها قرار می گیرد. این در حقیقت نشان دهنده خسته بودن طراح و یا تمرکز بالای وی روی تجربه وبسایت بوده است. 

فرم BS3F براساس نسخه سه بوت استرپ طراحی شده است. در این طرح از یکسری المان های بوت استرپ که بازطراحی شده است استفاده می شود. در حقیقت با این کنار فریمورک بوت استرپ دوست داشتنی تر و کاربر پسند تر می شود. 

اگر مشغول استفاده از بوت استرپ و لایه بندی های مخصوص به آن هستید پیشنهاد می شود که حتما روی حالت های آن مجددا کار کنید و آن ها را بازطراحی نمایید.

۴. Elegant Contact

این طراحی از آیکن‌های مربوط به Font Awesome و چند طرح واکنشگرا تشکیل شده است. من به شخصه همیشه پیشنهاد کرده ام که برای طراحی های بزرگ‌تر از آیکن‌ها استفاده کنید. وقتی تعداد ورودی های شما بیشتر شود تامل و درنگی در کار شما بیشتر رخ می دهد و کاربر از این وضعیت راضی نیست. 

به همین دلیل قرار دادن آیکون ها در یک فرم به کاربر این کمک را می کند تا با دیدن آن سریع متوجه شود که ورودی از وی چه اطلاعاتی را می خواهد.

اگر به دنبال طرح منحصر به فردتری هستید می توانید از فونت آیکون دیگری استفاده کنید.

۵. Tiny Login

برخی اوقات کوچکترین موارد، بهترین موارد نیز هستند. این موضوع را می توان در این رابط کاربری با فرم لاگین کوچک‌ش مشاهده کرد. 

تایپوگرافی در کنار طراحی فرم ها موضوع بسیار مهمی است. به شخصه همیشه پیشنهاد می کنم که از طراحی کوچکی برای این قسمت استفاده کنید. البته این موضوع بسته به وبسایت خودتان است، باید توجه داشته باشید که آیا طراحی کوچک تایپوگرافی برای لایه بندی وبسایت‌تان مناسب است یا خیر. 

در کنار ورودی های این فرم یک قسمت به حالت قدم به قدم کوچک نیز قرار گرفته که مراحل تکمیل فرم را بررسی می کند. شاید به نظر این قسمت برای این طرح کوچک مناسب نباشید اما برای پروژه هایی که پیچیده تر است و تعداد فرم های آن زیاد است مطمئا راهکار خوبی خواهد بود و تجربه کاربری مناسبی را پیاده سازی خواهد کرد.

۶. Login & Signup Combo

اگر قصد دارید تا زمان فرایند ورود و ثبت نام را در کمتر کنید، ممکن است یکی از بهترین راه ها برای اینکار قرار دادن هر دو مورد در یک صفحه باشد. قرار دادن چنین حالتی بسیار آسان‌تر از چیزی است که فکر می کنید.

وقتی که روی هرکدام از کلمات Login / SignUp کلیک می کنید فرم های مورد نظر با یک انیمیشن مناسب نمایش داده می شود. تمام این قسمت ها از طریق جی‌کوئری ساخته شده اما می توان با سی‌اس‌اس نیز چنین حالتی را پیاده سازی کنید.

یکی از مشکلات این طرح که در پیشنمایش نیز می توانید پیدا کنید پنهان نشدن بخش پایین هر مورد بعد از انتخاب مورد بعدی است. برای حل این مشکل به سادگی می توانید از خاصیت Visibility سی‌اس‌اس استفاده کنید.

۷. Chalkboard Contact

در این مورد می توانید یک استایل منحصر به فرد مربوط به فرم ها را مشاهده کنید. در این طرح یک پس زمینه زیبا که حالت تخته سیاه را درست کرده پیاده سازی شده است و برای نمایش اطلاعات روی آن نیز از یک قلم سفید استفاده می شود.

گوشه های چوبی پس‌زمینه کمک می کند تا حالت نمایشی واقعی‌تر به نظر آید.

Greg Sweet توسعه دهنده این طرح از یک فونت مخصوص استفاده کرده که شکل و شمایل آن بیشترین شباهت و نزدیکی را با دست و خط انسان ها دارد. این موارد درست حس آنکه به مدرسه برگشته باشید را می دهد.

۸. Credit Card Checkout

به شخصه طراحی های بسیار زیادی در رابطه با صفحه خرید مشاهده کرده ام اما این مورد که توسط Fabio Ottaviani طراحی شده است واقعا مورد بخصوص و زیبایی است.

در این طرح از جاوا‌اسکریپت برای اعتبارسنجی ورودی ها استفاده می شود اما بقیه موارد در طراحی همگی براساس سی‌اس‌اس ساخته شده اند. محتوایی که روی کارت قرار می گیرد براساس ورودی هایی است که شما وارد می کنید و وقتی که CVV را وارد کردید با یک انیمیشن می توانید پشت کارت را مشاهده کنید و مقدار مورد نظر را روی کارت مشاهده نمایید.

۹. Custom Sign Up

اگر دنبال یک فرم ثبت نام که به صورت کامل با سی‌اس‌اس نوشته شده باشد می ‌گردید، این مورد واقعا می تواند برای‌تان مفید باشد.

وقتی روی هر کدام از ورودی ها کلیک کنید یک بردر به رنگ سبز در اطراف آن ظاهر می شود. با ظاهر شدن این مورد، آیکون ها نیز رنگ‌شان را تغییر می دهند. از طرفی دیگر جعبه های انتخابی و قسمت انتخاب کارت اعتباری نیز طراحی مخصوص به خود را دارند.

به نظر می رسد که ساختن چنین موردی در سی‌اس‌اس واقعا کار پیچیده ای باشد که واقعا نیز چنین است اما توسعه دهنده José Carneiro این کار را به خوبی انجام داده است.

۱۰. Floating Labels

برچسب هایی که به صورت متحرک در فرم قرار دارند، یکی از علایق بنده به حساب می آیند. این موارد همیشه استفاده پذیری بالایی را ارائه می دهند و به کاربری که قرار است فرم را پر کند توضیح مناسبی را ارائه می دهند. 

انیمیشن های مربوط به این برچسب ها از طریق سی‌اس‌اس ۳ و Compass اجرا می شوند. در کنار این موارد از جی‌کوئری نیز استفاده شده است. راهکاری که این توسعه دهنده ارائه داده است برای همه ورودی‌ها قابلیت پیاده سازی دارد.

مهم نیست که دنبال چه حالت ها و استایل هایی برای فرم ها هستید، امیدوارم که این گالری از کارها به شما ایده ها و نگرش هایی برای پیشرفت و رفتن به جلو را بدهد. مطالعه بیشتر الگوهای طراحی به شما کمک بسیاری برای رشد و پیاده سازی ایده‌هایتان می دهد.CodePen مکان بسیار مناسبی برای چنین کاری است.

منبع

مقالات پیشنهادی

10 قطعه کد jquery که هر طراحی باید بدانند | قسمت اول

امروزه jquery به یکی از عضوهای جدایی ناپذیر طراحی وب تبدیل شده که همه طراحا یا با اون آشنا هستن یا خیلی خوب اونو میشناسن و میدونن که چه نقش مهمی درطرا...

10 قطعه کد jquery که هر طراحی باید بدانند | قسمت دوم

امروزه jquery به یکی از عضوهای جدایی ناپذیر طراحی وب تبدیل شده که همه طراحا یا با اون آشنا هستن یا خیلی خوب اونو میشناسن و میدونن که چه نقش مهمی درطرا...

10 قطعه کد ساده برای ایجاد تب‌های زیبا

تب‌ها برای سال‌های متمادی بخش اساسی و مهمی را از وب تشکیل می‌دهند. در حال حاضر نیز با وجود توسعه دهندگانی که پروژه های متن باز را ایجاد می کنند، قطعه...

۱۰ قطعه کد خالص CSS برای ساختن Modal Window

تا به حال اکثر Modal windowهایی که مشاهده کرده‌ایم مبتنی بر جاوا اسکریپت بوده اند، به همین دلیل می توانید اسکریپت های نمونه بسیاری را در اینترنت دانلو...