G 2 ხაზგასმული ველი უნდა შეავსოთ. ფაილის შევსების მიზნით (ZS)

დანართი №4.
ხელშემკვრელი ორგანიზაციის დასახელება: ___________________________________________

მონაწილეობს წინასწარი შერჩევა ლოტი:

მონაწილის დოკუმენტების ინვენტარიზაცია

ამ გაკვეთილში, ჩვენ გავაკეთებთ პატარა სასიამოვნო თვალის ეფექტს სავალდებულო ველების ფორმაში. ყველაზე ვებ ფორმები შემუშავებულია მინიმალური აღსრულებით, მხოლოდ მომხმარებლის მონაცემების შეგროვება. დაფიქრდით იმაზე, თუ რამდენი სია უარი თქვა გამოსხივებაზე, რადგან მას ბევრი რამ შეიცავს. მაგრამ არსებობს ასევე ბევრი ფორმები, რომ არჩევითი სფეროებში მოითხოვონ დამატებითი ინფორმაცია, რომ სტუმარს სურს ან უნდა უზრუნველყოს. მაგალითად, შეკვეთის ფორმა ან კლასიფიკაციის ფორმა.

იდეა არის მხოლოდ სავალდებულო, რათა შეავსოთ ველი. ეს ამოცანა, როგორც წესი, მოგვარდება მცირე სიმბოლო * ან მსგავსი აღნიშვნით. მაგრამ ჩვენ კიდევ დავუბრუნდებით და დავამატებთ ინტერაქტიული ეფექტი სავალდებულო დარგების უკეთესი ვიზუალური გამოყოფისთვის.

განახორციელოს იდეა ეტიკეტების ეტიკეტების და ფორმის სფეროებში ორი div ელემენტებში, რომელიც საშუალებას მოგვცემს გამოიყენოს სხვადასხვა ეფექტი. გარე კონტეინერი ექნება დამატებით კლასს, თუ ველი ვალდებულია შეავსოს ( საჭირო):

განვიხილოთ დემონსტრაციის მეორე მაგალითის სტილის, რომელიც იყენებს ჰერცულ არჩევანს. ჩვენ შევამცირებთ სხვა კონტეინერის სიმაღლეს, როდესაც შიდა შემცირდება მასშტაბით.

დაამატეთ გარდამავალი გარე კონტეინერისთვის, ჩვენ განსაზღვრავს ფიქსირებული სიმაღლე და დააყენეთ დამალული ნაწილების დამალვა შინაარსის დამალვა სიმაღლის შემცირებისას.

AF-OUTER (overflow: დამალული; სიმაღლე: 70px; ყუთი ჩრდილი: 0 1px 0 # F5F5F5 Inset; გარდამავალი: ყველა 0.5s ხაზოვანი;)

შიდა კონტეინერისთვის, "ცენტრის ყველაზე" ღირებულებას გადასცემს გარდამავალი ცენტრი, რათა იხილოთ სიმაღლის შემცირების პროცესი. თავდაპირველად, მასშტაბი არის ღირებულება 1 (არ არის აუცილებელი დააყენოთ):

AF-Inner (Padding: 15px 20px 15px 20px; ტრანსფორმაციის წარმოშობა: ცენტრის ზედა; ტრანსფორმაცია: მასშტაბი (1); გარდამავალი: ყველა 0.5 წლიური;)

ფორმის ზედა ნაწილში არის ღილაკი (ჩამრთველი) პირადობის მოწმობით af-showreq. ღილაკზე დაჭერით, შეიცვლება დამატებითი დარგების მასშტაბი. ჩვენ ვიყენებთ ფსევდო-კლასს : არა საჭიროების მისაღწევად, შესაძლებელია დამატებითი სფეროსთვის კლასების დაყენება და მათთან დაკავშირება ნათესავი კომბინებით.

შემცირდა გარე კონტეინერის სიმაღლე და შიდა მასშტაბის სიმაღლე:

# AF-Showreq: შეამოწმეს ~ .Af-outer .Af-Outer: არ არის (სიმაღლე: 0px; ხილვადობა: დამალული;) # AF-Showreq: შეამოწმეთ ~. (AAFAF- ის) .AF- ის შიდა (ტრანსფორმაცია: მასშტაბი (0); Opacity: 0;)

სამონტაჟო ქონება ხილვადობა: დამალული. ის უზრუნველყოფს გარანტიას, რომ შესაძლებელი იქნება კლავიატურის გამოყენებით სხვა სფეროებში გადართვა. აქ არ შეგიძლიათ გამოიყენოთ ჩვენება: არა, რადგან გარდამავალი არ იქნება მუშაობა.

ნებისმიერი ონლაინ მარკერმა იცის, რომ მომხმარებელთა კომფორტული, როდესაც სადესანტო ურთიერთქმედებისას მნიშვნელოვანი ნაბიჯია კონვერტაციის მიმართ. ამ პროცესში მნიშვნელოვან როლს ასრულებს, რადგან ეს დამოკიდებულია მის საქმიანობაზე, არა მხოლოდ კომპანიის საერთო შთაბეჭდილებას, არამედ თუ არა მომხმარებლის მოზიდული მომხმარებელი დარჩება გვერდზე ან მიდიან კონკურენტი სადესანტო.

ამ მიზეზით, უკუკავშირის ფორმის განვითარება განსაკუთრებულ ყურადღებას საჭიროებს, მაშინაც კი, თუ ეს მარტივია და არ შეიცავს ბევრ ველს. ამ სტატიაში, ჩვენ გავაგრძელებთ 15 მომენტს, რომელიც კრიტიკულია იდეალური საკონტაქტო ფორმის შექმნისას.

და უზრუნველყონ მათი უნარ-ჩვევების მიღება და პრაქტიკა, რომელიც შეიცავს ყველა საჭირო ტექნიკურ ფუნქციას, რათა შეიქმნას მრავალფეროვანი სახურავი ფორმები.

1. ნათელი და ლაკონური სასაქონლო პოზიცია

სათაურის მთავარი მიზანი არის რამდენიმე სიტყვის არსი, შესაბამისი ფრაზის და კომპლექსური წინადადებების თავიდან ასაცილებლად. იდეალურია, სტუმარი მკაფიოდ უნდა იყოს და ცალსახად გაიგოს, თუ რატომ არის განკუთვნილი სახურავი ფორმა, მხოლოდ მისი სათაურით.

მიუხედავად იმისა, რომ კარგი header განმარტავს lid-ფორმის დანიშვნა, ინფორმაციული აღწერა საშუალებას გაძლევთ დამატებით მოტივაცია სტუმრებს, რომლებიც ეჭვქვეშ აყენებენ მიზანშეწონილად. ამის მიღწევა შესაძლებელია სტრატეგიულად მნიშვნელოვანი ელემენტის 2 ტექსტში:

• რომელიც სპეციალურად მოითხოვს მომხმარებლის მიერ;
• რა ხდება სტუმარი მისგან მოსალოდნელი ქმედებების შესრულების შემდეგ.

სათაური (სათაური): "შეავსეთ ფორმა, რათა მიიღოთ დირექტორია მწარმოებლის ფასებით." აღწერა (აღწერა): "Toril! შეავსეთ ფორმა დღის ბოლომდე და მიიღეთ 20% ფასდაკლება ". ყველა სადესანტო შეიძლება იყოს.

3. არავის არ მოსწონს ხანგრძლივი ფორმების შევსება

არ გადაიტანოთ სახურავი ფორმის მრავალრიცხოვანი ველი, რათა შეავსოთ საჭიროების გარეშე. გამოიყენეთ მხოლოდ მათთვის, რაც თქვენს ბიზნესს ძალიან მნიშვნელოვანია. თუ შესაძლებელია, თავიდან იქნას აცილებული მოთხოვნილი ინფორმაციის დუბლირება (მაგალითად, "ელფოსტა" და "დაადასტურეთ ელფოსტა"). არ გამოიყენოთ პირადი და პირადი მონაცემების მოთხოვნები (მაგალითად, "ტელეფონის ნომერი", "მისამართი" ან "კომპანიის სახელი"). თუ ჯერ კიდევ ასეთი სფეროები იმყოფებიან, მოდით ვიცოდეთ მომხმარებლის (ტექსტი და გრაფიკულად), რომ მისი პირადი მონაცემები საიმედოდ დაცულია და მესამე მხარეს არ გადაეცემა.

ქვემოთ მოცემულია 2 სურათი, რომელიც ილუსტრირებულია ხანგრძლივი და მოკლე სახურავიდან:

ადვილია გამოიცანით, რომელი ფორმებისგან უფრო ადვილად შეავსეთ სამიზნე გვერდის სტუმარი. აბსოლუტური უმრავლესობა აშკარად გაჭირვებული, ხვდება იმას, რომ ასეთი რაოდენობის მონაცემები, რომელთა უმრავლესობა სავარაუდოდ არასაკმარისია.

4. შევსების ველების ზემოთ ტექსტური ეტიკეტების მოთავსება.

ჩატარებული კვლევები, აჩვენებს, რომ ველის ზედაპირებზე მდებარე ველებს, რომლებიც უკეთესად მუშაობენ, ვიდრე სწორ ზღვარზე ან შესაბამის საპირისპიროდ განთავსებასთან დაკავშირებით. თუ თქვენ უნდა გააკეთოთ ფორმა უფრო კომპაქტური ან ვიზუალურად მოკლე, ეტიკეტების სახელები შეიძლება განთავსდეს შიგნით სფეროებში, რომელიც მათ გასწვრივ მარცხენა ზღვარზე (ამ შემთხვევაში, ისინი ასრულებენ Playcold- ს როლს):

5. ასი ღილაკზე წარწერების მნიშვნელობა

• ასოცირებული სახურავი ფორმის შინაარსთან
• აჩვენე, რომ ადამიანი მიიღებს ასი ღილაკს დაჭერით.

6. პოზიცია პირველ ეკრანზე

ლოგიკა აქ არის მარტივი: თუ სტუმარი დაუყოვნებლივ ხედავს სახურავი ფორმის შემდეგ დატვირთვის გვერდზე, ეს უფრო სავარაუდოა, რომ ყურადღება მიაქციოს მას, რაც, თავის მხრივ, შეიძლება გაზარდოს კონვერტაციის. ე.წ. ფორმის განთავსება, თქვენ გაზრდის ალბათობას, რომ მომხმარებელი არ მიდის. კიდევ უფრო უარესი, თუ ფორმა არის პირველი და მეორე ეკრანების გადაკვეთაზე. ამ შემთხვევაში, ეს ძალიან უხერხულია.

7. დახმარება სტუმრებს საკონტაქტო ფორმით შევსებისას

9. განათებული სფეროები შევსებული

შეცდომის შეტყობინებების გარდა, მიზანშეწონილია ორგანიზება ნებისმიერი შესამჩნევი (მაგრამ არა წითელი) ფერის განაწილება, მაშინ ის, რომ მომხმარებელი ამ მომენტში ავსებს. ეს საშუალებას მისცემს მას განადგურების შემთხვევაში, სწრაფად დაბრუნდეს სახურავი ფორმის ნაწილში, რომელზეც ის შეწყდა.

გარდა ამისა, შეგიძლიათ დაამატოთ ზემოთ აღწერილი მიღწეული კურსორის ავტომატური განთავსება და განათების პირველი სფეროში შევსებისას. ასეთი პატარა რამ არა მხოლოდ დროის დაზოგვას, არამედ გაურკვევლობას უბიძგებს კონვერტაციის მოქმედებას:

10. სტილი და შრიფტის ზომა, ასევე ფონის ფერი

სრულყოფილი გამოხმაურების ფორმის ერთ-ერთი მნიშვნელოვანი მოთხოვნაა მისი წაკითხული, რომელიც შეიძლება მიღწეული იყოს ეგზოტიკური შრიფტისა და ფერის გადაწყვეტილებების თავიდან აცილების გზით, რაც ხელს უშლის კითხულობს (მაგალითად, თეთრი ტექსტი სინათლის ნაცრისფერი ფონზე).

11. სავალდებულო და სავალდებულო ველების ანაზღაურება შევსების მიზნით

სავალდებულო ველის იდენტიფიცირების საუკეთესო საშუალებაა მათ ვარსკვლავით (*) აღსანიშნავად:

LID- ფორმა რედაქტორი LPGenerator სფეროებში, სახელი, გვარი, ასაკი, ელ, თარიღი და URL შეგიძლიათ დააყენოთ სხვადასხვა კონფიგურაციები, მათ შორის აღსანიშნავად სფეროში, როგორც სავალდებულო შევსების (ვარიანტი № 2)

Fields, სავალდებულო შევსება, აღინიშნება asterisks. ყველა სადესანტო შესაძლებელია

ასეთი განსხვავება აუმჯობესებს და, რის შედეგადაც ხელს უწყობს კონვერტაციის მაჩვენებელს.

12. მობილური ტრაფიკის ფორმის ოპტიმიზაცია

მობილური მოწყობილობების მომხმარებელთა სწრაფი ზრდა გვერდების მფლობელების წინ და მიზნად ისახავს რთულ ამოცანას - მაღალხარისხოვან UX- სთვის, ვინც სხვადასხვა სახის მოწყობილობების დახმარებით შეავსებს. აქედან გამომდინარე, ეს აზრია მომხმარებლების მზარდი კატეგორიის სფეროებში საველე სფეროებში.

ზოგიერთი სფეროში შევსების მიზნით, შესაძლო პარამეტრების გრძელი სიიდან. თუ ძალიან ბევრი მათგანი, ეს შეიძლება ძნელი აღმოჩნდეს საჭირო ინფორმაცია და პროვოცირება სტუმარი ზრუნვა გვერდზე. აქედან გამომდინარე, ჩამოსაშლელი მენიუ სახურავი ფორმებში უნდა იყოს გამოყენებული გონებით. თუ არსებობს ძალიან ბევრი მონაცემები, ავტომატური შევსების ტექნოლოგიები შეიძლება გამოყენებულ იქნას ალტერნატივად.

ყველაზე ხშირად, ფორმებში ხანგრძლივი ჩამოსაშლელი მენიუ მოიცავს საცხოვრებელი ადგილის არჩევანს. ამ შემთხვევაში ალტერნატიული ვარიანტი შეიძლება იყოს მომხმარებლის რეგიონის ავტომატური განმარტება IP მისამართით.

14. სახლის ფორმების შევსების შემდეგ პერსონალიზაციის ელემენტების გვერდი

მოდით, მომხმარებელმა იცოდეს ფორმის შევსების შედეგები შესაბამისი გააქტიურების გზით. თუ სტუმარი შევიდა მისი სახელი, ტოვებს საკონტაქტო დეტალები, დაუკავშირდით მას სახელით, და დამოკიდებულია დევნილი მარკეტინგული ამოცანების შესახებ, შეატყობინეთ პროცედურას თქვენი შემდგომი ურთიერთქმედების ან სხვა შესაბამისი და სასარგებლო ინფორმაციისთვის.

15. გამოიყენეთ მარტივი CAPTCHA

მიუხედავად იმისა, რომ PIN საკმაოდ ეფექტურია სპამის წინააღმდეგ, უნდა აღინიშნოს, რომ თუ მომხმარებელს არ მოახერხა პირველად სწორად სწორად შესვლის უფლება, ალბათ, ის არის, რომ ის უარს ამბობს თქვენი ფორმის შევსებაზე. ასეთი შემაშფოთებელი გაუგებრობის თავიდან ასაცილებლად, მარტივი ფაილების გამოყენება და მოთხოვნილი კოდის შეცვლის უნარი.

თქვენ ასევე შეგიძლიათ გამოიყენოთ მარტივი გამშვები ყუთი, რომელშიც საკმარისია იმისათვის, რომ მიუთითოთ, რომ სამიზნე გვერდის სტუმარი ცოცხალი ადამიანია, არ არის რობოტი:

ინსპექტით "მე არ ვარ რობოტი" (მე არ ვარ რობოტი), რომელიც გააქტიურებულია მხოლოდ ამისათვის შერჩეული კვადრატული ველი

დასკვნა

სადესანტო ურთიერთქმედების იდეალური გამოცდილების შექმნა ხშირად მცირდება იდეალური სახალისო ფორმის განვითარებაზე, რომელსაც აქვს შემდეგი მახასიათებლები:

• მისი მიზანი შეიძლება სწრაფად და ცალსახად გაგებული იყოს სათაურისა და აღწერით;
• ადვილია შეავსოთ;
• ეს არის შესაბამისი და მიზნად ისახავს გარკვეულ სამიზნე აუდიტორიას.

იდეალიზმი ამ შემთხვევაში გულისხმობს, პირველ რიგში, არ არის განსაცვიფრებელი დიზაინი და ამ ელემენტის სადესანტო გვერდი "შესვლის კონტაქტში" სამიზნე გვერდის სტუმართან ერთად. გარდა ამისა, ყველაფერს, ეფექტური საკონტაქტო ფორმა შეიცავს საჭირო რჩევებს მომხმარებლისთვის, რომელიც ხელს უშლის სანუკვარ მიზანს - ინფორმაციის შესახებ ინფორმაციის შესახებ.

თითქმის ყველა თანამედროვე საიტებზე და ახალს აქვს ფორმები, რომლებიც შეამოწმებენ გვერდის გადატვირთვის გარეშე. ე.წ. - სავალდებულო ფორმა. მაგრამ რა მეთოდები უნდა შეიქმნას ასეთი ფორმები?

ბოლო დრომდე, ყველაზე პოპულარული გზა იყო JavaScript- ის გამოყენება. ძალიან მოსახერხებელი ბიბლიოთეკა არის jQuery validation. ეს მეთოდი თანამედროვე, მაგრამ მისი ინტეგრაციისთვის ფორმაში, საჭიროა სამუშაოების ზოგიერთი უნარ-ჩვევები და დრო.

ერთად Advent hTML 5. და მისი გავრცელებული ინტეგრაცია თანამედროვე საიტებზე შეიძლება უარი თქვას JavaScript- ის გამოყენებაზე. ამავდროულად, იმისათვის, რომ მოედანი სავალდებულო სახით შეავსოთ მხოლოდ თქვენ უნდა დაამატოთ საჭირო ატრიბუტი.

საჭირო ატრიბუტით, ბრაუზერი შეამოწმებს თუ არა კონკრეტული ველი შევსებულია თუ არა. თუ არა, მომხმარებელი მითითებულია სავალდებულო შევსებისას ან ფორმის ყველა სფეროშიც კი.

და ასეთი სფეროების შესაქმნელად, საჭიროა არა უმეტეს ერთი წუთი.

ასე რომ, ვთქვათ, არსებობს პატარა ფორმა:

ასე რომ, როგორც ჩანს, ბრაუზერში:

ახლა ჩვენ გავაკეთებთ გარკვეულ ველებს სავალდებულო სახით შეავსოთ:

Სულ ეს არის. ჩვენ ყველა მინდვრის სავალდებულო გავხდით 1 წუთზე ნაკლები შევსების მიზნით. თუ არ შეავსებთ აუცილებელ სფეროს, მაშინ ვნახავთ შემდეგ შეტყობინებებს:

და, მნიშვნელოვანია. ეს შემოწმება მუშაობს ყველა თანამედროვე ბრაუზერში და მხოლოდ HTML სპეციფიკაციისთვის 5. Uninitiated- ისთვის - HTML- ის დასაწყისში თქვენ უნდა ჩაწეროთ ტეგი.

განაცხადების სტრუქტურული ფაილების შევსება ფულადი სახსრებისთვის, როდესაც Orfk- ში დოკუმენტების გადმოტვირთვის დოკუმენტების გადმოტვირთვა

თუ Orfk- ზე გადასცემს ფაილების გენერირებას, შეცდომის შეტყობინებები გამოჩნდება ფაილის სტრუქტურაში, რაც იმას ნიშნავს, სავალდებულო რეკვიზიტები დოკუმენტი ცარიელი დარჩა. თუ ძნელია გაგზავნა, რათა დადგინდეს, თუ რა სახის props, აუცილებელია მოვძებნოთ ცხრილში (მაგიდა აშენებულია ფორმატების გაზიარების მოთხოვნების საფუძველზე) შესაბამისი ბლოკი (ბლოკები ხაზს უსვამენ ყვითელ მაგიდას ) და მასზე აღწერა სასურველი ველის შევსების მიზნით (მსუბუქი ნაცრისფერი ფერის გამოყოფილი ველის სავალდებულო შევსების მიზნით), დანომრჩეველია. მიღებული ინფორმაციის საფუძველზე, აუცილებელი ცვლილებების მიღება და დოკუმენტის ხელახალი გადატვირთვა.

_______________________________________________________

* ჩვენი ვებ-გვერდის გაზიარების მოთხოვნების სრული ტექსტი გამოქვეყნდა ჩვენს ვებ-გვერდზე

(ვერსია 7.0)