שיעור בו נבחן יצירת טופס משוב ב-CMF MODX Revolution באמצעות רכיבי AjaxForm ו-FormIt.
FormIt הוא רכיב (קטע) עבור MODX Revolution שנועד לעבד טפסים בצד השרת. הוא יכול לבדוק שדות טפסים (לאמת) לפני פעולות נוספות, להגן על האתר מפני קבלת דואר זבל, לשלוח נתוני טופס בדוא"ל, לאחסן עותקים של טפסים שהושלמו, להפנות לדף אחר (לדוגמה, לאחר שליחת טופס בהצלחה בדוא"ל), לבצע את פונקציה של משיב אוטומטי ועוד הרבה יותר.
אבל כדי לעבוד עם FormIt דרך AJAX, אתה צריך להשתמש ברכיב AjaxForm הנוסף.
לפני שנמשיך לפיתוח טופס משוב ב- MODX Revolution, בואו נבחן את האלגוריתם הבסיסי של פעולתו.
לאחר פתיחת דף עם טופס (הוא נלקח מהנתח שצוין בפרמטר &form של קריאת קטע הקוד של AjaxForm בעת יצירת העמוד בשרת), המשתמש ממשיך למלא אותו. לאחר השלמתו, המשתמש לוחץ על כפתור "שלח" ורכיב AjaxForm (קוד JavaScript) שולח אותו לשרת באמצעות AJAX. בשרת, רכיב זה מריץ את קטע הקוד של FormIt ומעביר אליו נתוני טופס. לאחר עיבוד הנתונים הללו, קטע ה-FormIt יוצר תגובה, אשר מועברת ללקוח דרך רכיב AjaxForm ומוצגת בדף למשתמש. התשובה יכולה להיות חיובית (משמעות הדבר היא שהטופס אומת ולמשל, הנתונים נשלחו בהצלחה בדוא"ל) או שלילית (לדוגמה, המשתמש עשה כמה טעויות בעת מילוי הטופס).
כדי ליצור טופס משוב ב- MODX Revolution, עליך לבצע את השלבים הבסיסיים הבאים:
בואו נסתכל על שלבים 2 ו-4 ביתר פירוט.
ניתן ליצור טופס משוב HTML על ידי העתקת התבנית tpl.AjaxForm.example. לדוגמה, בואו נקרא לנתח המועתק tpl.AjaxForm . הנתח הזה כבר מכיל טופס HTML מוכן המורכב מ-3 שדות: שם, דואר אלקטרוני והודעה. הפעולות העיקריות שצריך לבצע עם הטופס יסתכמו בעיקר בהוספת קטגוריות חדשות או מחיקת קיימות. בקטגוריה אנו מתכוונים לקבוצה של אלמנטים מחוברים: תווית, אלמנט טופס (קלט, בחירה, אזור טקסט) ואלמנט span (המשמש להצגת שגיאת אימות).
רגעים בסיסיים:
שימו לב: שימוש במציין המיקום [[+fi.name]] כערך של תכונת הערך של רכיב הטופס ומציין המיקום [[+fi.error.name]] כתוכן של רכיב span רלוונטי רק לעבודה קלאסית עם FormIt, כלומר. ללא AJAX. הם משמשים למילוי הטופס כאשר הוא נשלח מחדש על מנת לשמור את הערכים שהוזנו על ידי המשתמש ולהציג שגיאות אימות.
לדוגמה, בואו נוסיף שדה להזנת מספר טלפון לטופס ה-HTML:
כתוצאה מכך, נתח זה יכיל את קוד ה-HTML הבא:
נפתח את התבנית שתשתמש במשאב ונזין את הקוד שיטמיע את כל זה.
[[!AjaxForm? &form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm,email` &emailSubject=`הודעת בדיקה` &emailTo=` [מוגן באימייל]` &emailFrom=` [מוגן באימייל]` &emailTpl=`tpl.email` &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^` &validationErrorMessage=`הטופס מכיל שגיאות!` &successMessage=`ההודעה נשלחה בהצלחה` ] ]
בואו נסתכל על הפרמטרים העיקריים:
כל מה שנותר הוא ליצור chunk tpl.email, שיכיל את תבנית המכתב.
מאת: [[+שם]]
דואר אלקטרוני: [[+email]]
טלפון: [[+טלפון]]
הודעה: [[+הודעה]]
MODX - Chunk tpl.emailשימו לב: כדי להציג את הערכים של שדות טופס, משתמשים במצייני מיקום.
נדגים את עיקרי העבודה עם טופס המשוב בעמוד באמצעות התמונות הבאות.
ל- MODX יש תכונה מעניינת - אתה יכול לשנות את המראה של טופס עריכת המשאבים כמעט בכל דרך שתרצה. יתר על כן, אתה יכול ליצור טפסים שונים עבור קבוצות משתמשים שונות, ואפילו עבור משאבים שונים. ניתן לבחור פרופילי טופס שונים עבור משאב נתון בהתאם לתבנית, האב או מאפיינים אחרים שלו.
ובשביל זה אנחנו לא צריכים לכתוב שורת קוד אחת!
בוא נראה מה, למשל, אתה יכול לעשות עם טפסים:
ראשית, הבה נסיר את הפריטים המיותרים מהתפריט העליון לפריט כללי אחד - "מפתח". כדי לעשות זאת, עבור אל הקטע "מערכת" -> "פעולות", צור פריט תפריט חדש בשורש וגרור את כל הפריטים המיותרים לשם:
לאחר מכן, עבור אל הקטע "אבטחה" -> "הגדרות טופס" וצור פרופיל חדש, לדוגמה, "מנהל התוכן". לאחר מכן לחץ לחיצה ימנית עליו ובחר "ערוך", עבור ללשונית "קבוצות משתמשים" והוסף קבוצה שעליה יחולו הכללים החדשים.
בשלב הבא ניצור מערכת חוקים חדשה. ישנם שני סוגים שלהם - האחד לצורת יצירת משאב, השני - לצורת העריכה שלו (יצירה ועדכן, בהתאמה). יכולים להיות כמה מהכללים האלה - לפחות כלל אחד לכל משאב.
לאחר יצירת הכלל, תראה את דף ההגדרות - ישנן שלוש לשוניות: מידע על סט כללים, אזורים, שדות נוספים.
הכרטיסייה הראשונה מפרטת את שדות המשאבים הסטנדרטיים. ניתן להשבית או לשנות את שמם. אזורים הם כרטיסיות במשאב. אתה יכול ליצור אזור חדש ולהציב שם כמה פרמטרים של טלוויזיה, ואז המשאב יכלול אותם לא בכרטיסייה "שדות נוספים", אלא בכרטיסייה חדשה - שתציין. כאן אתה יכול להשבית כרטיסיות סטנדרטיות, למשל, "קבוצות משאבים".
בכרטיסייה השלישית אתה מציין את המיקום של פרמטר טלוויזיה מסוים.
הכנתי דף רמייה קטן על אזורים סטנדרטיים:
אז בואו נסיר מיד את כל הכרטיסיות עבור המשתמש מלבד הראשונה. בטל את הסימון של האזורים: modx-page-settings, modx-panel-resource-tv, modx-resource-access-permissions. לאחר מכן, מהשדות הסטנדרטיים נשאיר רק כותרת דף וכינוי. אנחנו מסירים את תיבות הסימון מהשאר. ציין שם חדש לשדה כותרת העמוד: "כותרת חדשות" וכינוי: "כתובת עמוד".
לאחר מכן, עבור ללשונית "שדות נוספים" וציין כי פרמטרי הטלוויזיה צריכים להיות באזור זה או אחר של הטופס (בהתאם לדף הצ'יט).
כל שנותר הוא לציין עבור אילו משאבים כלל זה חל - בפריט "תבנית" אנו מציינים על אילו משאבים עם אילו תבניות יש להחיל את הכלל. אם הכלל הוא עבור כל התבניות, אז אנחנו לא מציינים כלום. ויש עוד שני פריטים: "שדה מגביל" ו"ערך מגביל". אתה יכול לציין שדות אחרים כאן.
נציין כי כלל זה חל על משאבים הנמצאים ב"חדשות" - בפריט "השדה המגביל" אנו כותבים הוֹרֶה, וב"ערך מגביל" המזהה של המשאב "חדשות", למשל, 22 .
06-08-2014 22:30:00 3886 הערות ollserg & MaxWeb בשבילך
על אודותאנו יוצרים מהר מאוד טופס משוב באתר אינטרנט שבו פועל CMF MODX revo באמצעות חבילת FormIt.
לא אתאר בפירוט את תהליך התקנת החבילות ב- MODX revo בפוסט זה בשל פשטותו וכמות החומר הגדולה בנושא זה באינטרנט. הרשו לי רק להזכיר לכם את רצף הפעולות:
<Система> - <Управление пакетами> - <Загрузить дополнения> - <Поиск>(הכנס - FormIt)
נללחוץ<Загрузить>, ואז<Установить>
דלאחר מכן, בואו ניצור נתח חדש ונקרא לו
ממי:
טֵלֵפוֹן:
הוֹדָעָה:
כאן:
- שם השולח
- מספר הטלפון של השולח
- אימייל של השולח
- הודעה שנכתבה על ידי השולח באתר
דלאחר מכן, ניצור עמוד עם הודעה על הגשה מוצלחת ותודה על העובדה שהמשתמש שלח הודעה דרך טופס המשוב.
לדוגמה:
תודה על שליחת מכתבך!
מכתבך נשלח בהצלחה.
המומחה שלנו יענה לך בהקדם האפשרי.
נוהגדר הפניה עבור דף זה לפי המזהה שלו.
לֹאאנחנו שוכחים לשנות את הערך של הפרמטר &redirectTo=`178` במקום שבו נקרא קטע ה-FormIt (בקוד ה-chunk
תשובה
ollserg השיב ביום ו', 17/04/2015 - 11:07
קוד טופס המשוב הזה לא יכול לעבוד!
זו לא הסתגלות! הסרת את כל הפונקציונליות! קרא שוב את המאמר בעיון ותבין.
כאן תיארתי הכל בפירוט, אבל אם זה עדיין לא מסתדר, אתה יכול ליצור איתנו קשר דרך טופס "הזמנה" באתר זה.
תשובה
דניס השיב ביום שני, 20/04/2015 - 17:56
פתח את חלון הפופ-אפ
תודה! הבנתי את זה!
האם יש לך שיעור כיצד לגרום לכך שכאשר תלחץ על כפתור "שלח", ההודעה על שליחה מוצלחת תופיע בחלון מוקפץ, ולא בדף חדש?
תשובה
ollserg השיב ביום ה', 23/04/2015 - 14:56
חלון מודאלי
השתמש בו כחלון קופץ באתר שלך. ישנן שיטות יישום רבות, דוגמה אחת:
פתח את חלון 1
ובכן, ה-CSS עבור הקוד הזה.
תשובה
אלכסיי השיב ביום א', 31/05/2015 - 16:09
חלון מודאלי
צריך לכתוב בתבנית html, אבל הערך של #win1 לא ידוע לו? אני צריך לשאול את זה איפשהו?
תודה.
תשובה
אלכסיי השיב ביום א', 31/05/2015 - 16:17
חלון מודאלי
נא להבהיר, היכן צריך לכתוב את הפרמטר #win1 בנתח הטופס כדי שבתבנית ה-html הקישור יבין איך בדיוק צריך לקרוא? אולי לא הבנתי משהו, אבל השורה
צריך לכתוב בתבנית html, אבל הערך של win1 לא ידוע לו? אני צריך לשאול את זה איפשהו?
אני מכיר את modx רק 3 ימים, בבקשה, כמו כל מה שתואר למעלה, הסביר את זה בצורה פשוטה.
תודה.
תשובה
ollserg השיב ביום שני, 01/06/2015 - 12:28
קוד HTML של החלון המודאלי
תשובה
אלכס השיב ביום ג', 07/07/2015 - 10:18
בלי מכתב
שלך עבד, המכתב הגיע.
שיניתי את השדות לאלה שהיו נחוצים, ואבוי, המכתב הפסיק להגיע.
הנה הקוד
תשובה
ollserg השיב ביום ד', 08/07/2015 - 13:09
Q!FORMIT? תאר טקסט ואימייל
ב!FormIt? אתה צריך תיאור סוג - &validate=`email:email:required,text:required:stripTags`
תשובה
ויקטור השיב ביום שני, 19/10/2015 - 14:03
נושא ההודעה בטופס המשוב
יום טוב.
אני משתמש ב"&emailSubject=`מכתב מהאתר https://site/" - המכתב לא נשלח, הטופס חוזר למצב בו ישנה שגיאה בשדה.
.
ברור שהוא לא מבין את הקידוד הקירילי, אבל איפה לחפש?
בבקשה תגיד לי מה זה יכול להיות. גורם.
תודה.
תשובה
ollserg השיב ביום ג', 20/10/2015 - 22:47
גרסאות APACHE ו-PHP
הדבר הראשון שלדעתי אתה צריך לשים לב אליו במקרה שלך הוא הגרסאות של Apache ו-PHP בשרת שלך.
תשובה
AlexP השיב ביום ה', 29/10/2015 - 14:15
מחזיק מקום
מציין המיקום נחתך..
רציתי לעשות "שמך" בתוך הקלט ולעצב את ה-CSS אבל מסיבה כלשהי הקוד שאחרי value="" placeholder="Your name) נחתך" - обрезается!}
תודה
תשובה
ollserg השיב ביום ה', 29/10/2015 - 20:01
יש לבדוק את כל ה-CSS המחוברים
חיתוך "מציין המיקום" מתרחש בדיוק בגלל הפריסה
תשובה
רומן השיב ביום ו', 27/11/2015 - 13:43
פורמט ובעיות
יש חסרון גדול לפורנית או לתיעוד שלה. כאן יש לי חלון קופץ משוב יפה, אבל הוא לא נוצר על ידי מסמך נפרד, אלא צץ באמצעות jquery! אז פורמיט לא עובד עם זה.. ואני לא מצליח להבין איך להגדיר את זה! אולי נתקלת במשהו דומה.
תשובה
ollserg השיב ביום ג', 01/12/2015 - 23:23
שימוש ב-AJAXFORM למשוב קופץ
FormIt לא יכול ליצור Ajax מחוץ לקופסה... לזה, כלומר. יש לכתוב את FormIt כתוסף... או בשימוש ב-AjaxForm, שזה יהיה הפתרון הטוב ביותר למשוב קופץ.
תשובה
andreev888 השיב בשבת, 05/12/2015 - 22:26
משהו לא בסדר
אנשים, תגידו לי, נראה שההוראות הכי נגישות מכל מה שראיתי, עשיתי הכל לפי ההוראות, אבל אני לא רואה את הטופס באתר בכלל... לא הוק, ולא פסיק... זה פשוט לא מופיע... איפה אני יכול לחפש?
תשובה
ollserg השיב ביום א', 06/12/2015 - 23:37
MODX REVOLUTION - נקה מטמון
ואם בתפריט - אתר ואתר עדכון (נקה את המטמון של האתר) זה הדבר הראשון שעולה בראש. ובכן, הכל פשוט, תקרא שוב את הפוסט פעם או פעמיים ותצליח!!!
תשובה
רשע השיב ביום ו', 18/12/2015 - 07:00
כַּעַס
נמאס לך להעתיק את אותם מאמרים! תמציא משהו משלך או לפחות שנה את הקוד במאמר!
תשובה
ollserg השיב ביום ו', 18/12/2015 - 14:28
הקוראים כבר ניסו לשנות את הקוד של טופס זה
היו להם שאלות הקשורות לחוסר ההפעלה של הקוד הזה.
אתה יכול לקרוא את זה בתגובות למעלה.
שאלה נוספת היא שרבים (אין סטטיסטיקות מדויקות) מעתיקים ומדביקים ללא מחשבה את הקוד של מאמר זה לאתרים שלהם אפילו מבלי לקרוא אותו בעיון. העתקתי בכוונה את קוד טופס המשוב מהאתר שלי וציינתי במאמר את המקומות בקוד שצריך לשנות לשלי. וכמה מכתבים מאתרים נשלחו למייל שלי עד שתיקנתי את הכתובת בקוד?! לא היו מאות כאלה, רק עשרות.
תשובה
svbel השיב ביום ה', 02/06/2016 - 10:11
שגיאה בעת שליחת דואר
מהי ההודעה "אירעה שגיאה בעת ניסיון לשלוח דואר. לא ניתן להפעיל את פונקציית הדואר."?
תשובה
ollserg השיב ביום ה', 02/06/2016 - 10:54
לא ניתן להפעיל את פונקציית הדואר.
יכולות להיות הרבה סיבות. עיין ביומנים, האם תחום הדואר והדואר המצוינים ב-FormIt קיימים ופועלים כרגיל?
שאל שאלה לתמיכה של ספק האירוח שלך. באופן כללי, אין תשובה ברורה לשאלתך.
תשובה
דניס השיב ביום ד', 15/06/2016 - 15:53
מכתבים לא מגיעים בדואר אלקטרוני
אחר הצהריים טובים הכנתי טופס לפי התיאור שלך, הכל עובד, זה עובר לעמוד התודה, אבל שום דבר לא מגיע למייל.
אתר מתארח. בתיאוריה, הכל נורמלי בקוד
תגיד לי, מה הבעיה? תודה!
תשובה
ollserg השיב ביום ו', 17/06/2016 - 12:17
טופס משוב MODX הוא 100% נכון. בצע את ההוראות.
אנא קרא את המאמר בעיון. שימו לב לנתח
ניתוח קוד, הולך מלמעלה למטה:
&hooks - מתווספים כאן ווים שונים, כולל מותאמים אישית: במקרה שלנו, 2 סטנדרטיים: span - הגנה פשוטה נגד ספאם ודוא"ל - חובה, לשליחת נתונים לתיבת דואר. אני מדבר על שאר הווים בפירוט מספיק בסרטון.
&emailTpl - נתח עם עיצוב של אות, בעל הקוד הבא:
מאת: [[+שם]]
טלפון: [[+טלפון]]
דואר אלקטרוני: [[+email]]
הודעה: [[+הודעה]]
&emailTo - כתובת דוא"ל שאליה נשלחים הטפסים, במקרה זה צוינה הגדרת המערכת (מפתח) ++שולח דוא"ל
&emailSubject - נושא האימייל הנשלח
&אמת - אנו מציינים שדות חובה למילוי ולעיתים קרובות שדות כדי להגן מפני דואר זבל
&successMessage - הודעה לאחר שליחה מוצלחת
אני לא אנתח את קוד הטופס, אם אתה מעוניין, צפה בסרטון וקרא את התיעוד: docs.modx.com/extras/revo/formit
על מנת שתוכל לצרף ולשלוח קבצים מצורפים, עליך לכתוב בתג הטופס
Enctype="multipart/form-data"
ובהתאם להוסיף שדות לצירוף קובץ
טפסים מרובים בעמוד אחד
פשוט כתוב בקריאות של כל טופס
&submitVar=`שם טופס באנגלית`
לכל טופס יש שם משלו.
לא משנה מה יגידו, אתה בהחלט תיתקל בספאם - הדרך היעילה ביותר להילחם בו היא, אתה יכול גם לנסות.