הצגת פופ אפ לאחר שליחת טופס

על מנת להציג פופ אפ לאחר שליחת טופס (תודה על הרשמתך/הטופס נשלח בהצלחה וכדומה), יש לבצע מספר שלבים:

1. בניית pop up בדף.
2. הפניית הדף (form_redirect) לאותו דף עצמו בתוספת פרמטר זיהוי ב-url.
3. הוספת סקריפט לבדיקת ה-url, על מנת לזהות אם אנו נמצאים בדף לפני או אחרי שליחה.
4. הצגת pop up במידה וקיים שרשור פרמטר בurl, כלומר במידה ואנו נמצאים בדף לאחר שליחת הטופס.

בניית pop up

בדוגמא זאת נעשה שימוש בספריית featherlight, מבוססת jquery לצורך יצירת pop up. כמובן שזה ניתן לשינוי לפי מה שנרצה.

1. נקשר את הדף ל-css  של featherlight  בתוך ה-head:

2. נקשר את הדף לjavaScript של featherlight לפני הסגירה של ה-body, יש לוודא שזה נעשה לאחר הקישור לספריית jquery:

3. בניית פופ אפ בדף, עטוף ב- div class=featherlight, בעל id ייחודי, מוגדר ב-css כ-display:none:

הפניית הדף לעצמו עם פרמטר ב-url:

לדוגמא אם שם הדף הוא www.website.co.il/contact_us, נבצע הפנייה לאחר שליחת הטופס:

הוספת script בדיקה:

ה-script בודק: אם משורשר פרמטר send=1 ב-url, כלומר אנו נמצאים בדף לאחר השליחה, אז תציג את הפופ אפ: