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

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

 

בניית pop up

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

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

link href="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.css" type="text/css" rel="stylesheet"

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

script src="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"

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

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

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

  input type="hidden" name="form_redirect" value="http://www.website.co.il/contact_us?send=1"

 

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

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

האם מידע זה היה שימושי?