כיצד ליצור טופס עם אלמנטור בחינם

במאמר זה תגלו כיצד ליצור טופס עם Elementor בחינם.

למרות שהווידג'ט טופס זמין רק ב פרו Elementorזה לא אומר שלא ניתן להוסיף טופס עם הגרסה החינמית של אלמנטור.

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

Elementorבגרסאות המקצועיות והחינמיות, הוא מציע שני ווידג'טים ליצירת טפסים: ווידג'ט HTML ווידג'ט Shortcode. ווידג'ט ה-HTML מאפשר לך להטמיע טופס באמצעות קוד HTML, בעוד ווידג'ט Shortcode מאפשר לך להטמיע טופס מתוספי טפסים המשתמשים בקודים קצרים, כגון Contact Form 7.

---

תוכן

---

צור טופס עם גרסה חינמית של Elementor באמצעות ווידג'ט HTML ב-7 שלבים

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

שלב 1: צור דף חדש או ערוך את הדף הקיים

כדי להתחיל, צור דף חדש וערוך אותו עם Elementor (עמודים -> הוסף). אתה יכול גם לערוך עמוד קיים אם תרצה.

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

שלב 2: הכן את קוד HTML של טופס

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

שלב 3: הוסף מדור חדש ב-Elementor

בעורך Elementor שלכם, התחילו ביצירת מקטע חדש בדף שבו תרצו להוסיף את הטופס. לחצו על כפתור "+" כדי להוסיף מקטע.

לאחר מכן בחר את הפריסה המתאימה ביותר לטופס שלך.

שלב 4: הכנס את ווידג'ט HTML

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

שלב 5: הדבק את קוד ה-HTML של הטופס

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

שלב 6: התאם אישית וסגנון את הטופס

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

שלב 7: תצוגה מקדימה ופרסום

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

ראה גם: כיצד להשתמש ברכיבי ווידג'טים/תבניות של אלמנטור כבלוקים של גוטנברג

דבר אחד חשוב לציין: אם טופס ה-HTML שלך משתמש ב-CSS חיצוני, תמונות או JavaScript לעיצוב, הקפד להעלות את התיקיות המכילות את קבצי ה-CSS, התמונות ו-JavaScript לספריית הבסיס של האתר שלך.

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

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

---

צור טופס חינם של Elementor באמצעות טופס יצירת קשר 7 ב-7 שלבים

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

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

שלב 1: התקן והפעל את טופס יצירת קשר 7

כדי להתחיל, עליך להתקין ולהפעיל את התוסף Contact Form 7 באתר וורדפרס שלך. עבור אל לוח המחוונים של וורדפרס, עבור אל הרחבות> הוסףלאחר מכן חפשו "Contact Form 7". לאחר שתמצאו את התוסף, לחצו על להתקין עכשיוואז להפעיל לאחר השלמת ההתקנה.

שלב 2: צור טופס חדש

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

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

אם ברצונך להוסיף שדה חדש, מקם את הסמן באזור שבו ברצונך להוסיף את השדה החדש (ניתן למקם אותו מתחת או מעל שדה קיים). הוסף תווית לשדה הטופס החדש בפורמט. <label> votre label préféré </label>.

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

מלא את השדות ולחץ על הכנס את התג (אתה יכול להשאיר הכל כברירת מחדל).

טופס יצירת קשר 7 ישלח פניות שהתקבלו דרך הטופס שלך לכתובת דוא"ל. ניתן להגדיר את כתובת הדוא"ל מהכרטיסייה. דואר אלקטרוני.

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

לחץ על הכפתור Enregistrer לאחר שתסיים לערוך את הטופס.

שלב 3: התאם אישית את הטופס

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

קרא את המדריך שלנו בנושא: כיצד להתאים אישית את טופס טופס יצירת 7

שלב 4: קבל את קוד הקיצור של הטופס

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

שלב 5: הטמע את הטופס ב-Elementor

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

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

שלב 6: התאם אישית וסגנון את הטופס

טופס Contact Form 7 המשולב באלמנטור ישתמש כברירת מחדל בסגנון של ערכת הנושא של וורדפרס שלכם. אם תרצו להתאים אישית עוד יותר את מראה הטופס, ניתן לעשות זאת על ידי הוספת... CSS מותאם אישית. אתה יכול לשנות צבעים, שוליים, טיפוגרפיה ועוד כדי להתאים את הטופס למראה הכללי של האתר שלך.

קראו גם: כיצד להשבית חלון קופץ של Elementor בסמארטפונים

שלב 7: בדיקה ושחרור

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

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

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

אם אתה רוצה התאמה אישית קלה יותר, אתה יכול לעיין במאמר זה כיצד לעשות זאת התאם אישית טופס צור קשר 7 באמצעות תוספות חיוניות ו-Elementor.

---

שאלות נפוצות: כיצד ליצור טופס עם הגרסה החינמית של Elementor

משאבים קשורים אחרים

• כיצד לשלב עם ActiveCampaign Elementor
• כיצד לשלב את AWeber עם Elementor
• Elementor כיצד להוסיף את אנימציית לוטי
• Elementor : כיצד ליצור עוקב התקדמות אנכיקבל את Elementor Pro עכשיו!!!

סיכום

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

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

אבל בינתיים, שתף מאמר זה ברשתות החברתיות השונות שלך.

...