הפיכת טופס לתהליך הרשמה

 

בהרבה אתרים, במיוחד אתרי קניות, אנחנו נתקלים בטפסים ארוכים. הטפסים מכילים פרטים אישיים, פרטי חשבון, פרטי משלוח ועוד ועוד ועוד. בהרבה מקרים צריך לגלול מטה מכיוון והטופס גבוה יותר מגובה העמוד. כל התיאור הנ"ל יוצר תוצאה לא כל-כך נוחה ורצויה, בהתחשב בכך שאנחנו מעוניינים שבסוף התהליך המשתמש ימלא את פרטי האשראי שלו וישלח לנו את כספו הטוב. אפשר אחרת! במדריך הבא אני אתן לכם פלאגין שהופך טופס פשוט, לתהליך של הרשמה שמחולק לפי שלבים ונושאים.

לפני הכל אני חייב לציין שאת הקוד לקחתי מאתר אהוב עליי "ג'אנקו את וורפ ספיד", החלפתי את האנגלית לעברית ועכשיו אתם יכולים להשתמש בזה בקלות.

מה אנחנו צריכים?

טופס. זה כמעט ומספיק, עוד דבר אחר שאנחנו צריכים לוודא שהטופס מחולק לfieldset שלכל אחד יש legend. בואו נביט במבנה:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form id="SignupForm">
    <fieldset>
        <legend>פרטי חשבון</legend>
        //...חלק אחד....
    </fieldset>
    <fieldset>
        <legend>פרטי חברה</legend>
        //...חלק שני...
    </fieldset>
    <fieldset>
        <legend>פרטי תשלום</legend>
        //...חלק שלישי...
    </fieldset>
   
    <input id="SaveAccount" type="button" value="שלח טופס" />    
</form>

המהות של fieldset הוא לחלק את הטופס לחלקים, בתוך כל fieldset אנחנו נתחום חלקי טופס הקשורים אחד לשני (הוא מחלק את הטופס לקבוצות). תפקיד ה-legend הוא לתת כותרת ל-fielset, הוא חייב לבוא מיד לאחר פתיחת התאג fieldset.

זה הכל מבחינת ה-HTML. כעת כל שעלינו לעשות זה להוסיף את הקוד ה-jQuery (שהורדתם בכפתור הקוד למעלה), ולהפעיל אותו על הטופס הרצוי. מה שקוד ה-JS שאנחנו נתמיע יעשה, זה להציג כל פעם fieldset שונה, ובעזרת הכפתורים שהסקריפט יצור יהיה אפשר לנווט בין ה-fieldsets.

הוספת קוד הפלאגין

ראשית נוסיף שלושה קבצים חיוניים:

  • jQuery
  • סקריפט הפיכת טופס לתהליך (formToWizard.js)
  • גליון עיצוב לתהליך (formToWizard.css)

ככה זה נראה (בין תגיות ה-Head):

1
2
3
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
<script type="text/javascript" src="formToWizard.js"></script>
<link rel="stylesheet" type="text/css" href="formToWizard.css" />

כעת נוסיף את קוד ההפעלה (נשים לב שלמעלה ה-ID של ה-form הוא SignupForm וה-ID של כפתור השליחה הוא SaveAccount):

1
2
3
4
5
6
7
<script type="text/javascript">
    $(document).ready(function(){
        $(function(){
            $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })
        });
    });
</script>

כעת הטופס אמור להפוך לתהליך. את השם לכל תהליך הוא לוקח מה-legend של כל fieldset.

זה הכל! אני ממש אהבתי את הסקריפט הזה מכיוון והוא לא מתערב (פולשני) בתוך קוד ה-HTML, ונותן מענה אמיתי לטפסים ארוכים.

מה איתכם? אהבתם? חושבים שהסקריפט שימושי? אשמח לשמוע על כך בתגובות!

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
אורןNo Gravatar 22 באוקטובר

מגניב, תודה! נראה שימושי מאוד.

[תגובה]

AmosexyNo Gravatar 22 באוקטובר

אהבתי לגמרי

תודה רבה

[תגובה]

שימיNo Gravatar 26 באוקטובר

מדליק ונעים לשימוש בהחלט ידידותי ומתקדם

[תגובה]

אורן רוטNo Gravatar 26 באוקטובר

תודה רבה על התגובות החיוביות :)

[תגובה]

AmosexyNo Gravatar 6 בנובמבר

אהבתי
אני מאמץ נראה לי

[תגובה]

AmosexyNo Gravatar 23 בנובמבר

חזק אהבתי
ואפילו השתמשתי

[תגובה]

אורן רוט

אני שמח לשמוע,
אשמח ללינק :)

[תגובה]

יוסי ב.No Gravatar 23 בנובמבר

מצוין, אך צריך להזהר מענין השלבים גם כן.
עדיף ליצור אקורדיאון ורטיקלי לטופס. מילאת חלק? חלק אחר נפתח..

[תגובה]

אורן רוט

אפשר גם לאפשר כפתור הבא רק שסיימת למלא חלק, בהחלט רעיון טוב בחלק מן המקרים.

[תגובה]

סתם אחדNo Gravatar 11 באפריל

לא עובד בIE7!!

[תגובה]

אורן רוט

צודק :)

[תגובה]

מיריNo Gravatar 29 במאי

אין

[תגובה]

רןNo Gravatar 13 בספטמבר

איך אפשר להוסיף לזה אימות בטופס שאם לא רשמת משהו שאתה חייב זה לא עובר לשלב הבא??

[תגובה]

Satellite TV softwareNo Gravatar 29 בפברואר

באמת אחלה מאמר תודה רבה :)

[תגובה]

שגיבNo Gravatar 2 במרץ

תודה רבה!
רק איך אני עושה שהטופס יחולק לכמה דפים בצורה אוטומטית, ולא ע"י לחיצה "הפוך לתהליך הרשמה" ?

[תגובה]

אורן רוט

קורא לשורה:
$("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })

[תגובה]

שגיב

ניסיתי להכניס את הקוד הנ"ל בכמה שורות.
לא מצאתי את השורה שגורמת לפונקציה לעבוד.
אשמח לעזרה,
שבת שלום, שגיב 😉

[תגובה]

אורן רוט

שלח לינק לקוד שלך ואנסה לעזור

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון