איך משבצים טופס Google באתר האינטרנט שלכם
תשובה מהירה: פתחו את הטופס שלכם, לחצו על Send, ואז לחצו על סמל השיבוץ < > כדי להעתיק את ה-HTML של ה-iframe. הדביקו את הקוד הזה בבלוק Custom HTML או Code באתר שלכם. התאימו את ערכי ה-width וה-height בקוד כדי שהטופס לא ייחתך, במיוחד אם הוא ארוך.
שליחת מבקרים מחוץ לאתר כדי למלא טופס מאבדת חלק מהם בדרך. שיבוץ טופס Google ישירות בדף שלכם שומר על אנשים בהקשר — שימושי לטפסי יצירת קשר, הרשמות לאירועים, ווידג'טים למשוב, או כל דבר שאתם רוצים שירגיש כחלק מהאתר שלכם ולא כמו הפניה החוצה. Google בונה את קוד השיבוץ בחינם; הנה איך להשתמש בו היטב.
קבלת קוד השיבוץ המובנה
- פתחו את הטופס שלכם ולחצו על Send בפינה הימנית-עליונה.
- בתיבת הדו-שיח, לחצו על סמל < > (embed HTML).
- Google מייצרת קטע iframe שנראה כך:
<iframe src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true" width="640" height="921" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
- לחצו על Copy, ואז הדביקו את הקטע הזה בכל מקום שהאתר שלכם מקבל HTML גולמי.
התאמת הרוחב והגובה
המידות המוגדרות כברירת מחדל שמייצרת Google הן ניחוש סביר, אך נדיר שהן מדויקות. ערכו את שני המספרים ישירות בקוד:
- Width — קבעו אותו כך שיתאים לעמודת התוכן של הדף שלכם. בחירה נפוצה היא
width="100%"בשילוב עם max-width במכל עוטף, כך שהטופס יתאים לגודל הדף במקום להישאר בגודל פיקסלים קבוע. - Height — זה מה שגורם לבעיות. Google Forms לא משנה את גודל ה-iframe אוטומטית כשאתם מוסיפים או מסירים שאלות, אז אם הטופס שלכם ארוך יותר מערך הגובה, התחתית נחתכת ומבקרים צריכים לגלול בתוך תיבה זעירה כדי למצוא את כפתור השליחה. במקרה של ספק, הגדירו את הגובה גבוה משמעותית ממה שאתם חושבים שאתם צריכים — 200-300 פיקסלים נוספים של שטח ריק מתחת לטופס קצר הם בעיה קטנה בהרבה מכפתור שליחה חתוך בטופס ארוך.
שיבוץ ב-WordPress
הוסיפו בלוק Custom HTML (בעורך הבלוקים) או ווידג'ט Text במצב HTML (עורך קלאסי), והדביקו את קוד ה-iframe ישירות. WordPress מציג אותו כפי שהוא — לא נדרש תוסף, אף שתוספי טפסים ש"מייבאים" טפסי Google מיותרים לשיבוץ פשוט כזה.
שיבוץ ב-Squarespace
הוסיפו Code Block לדף (מתפריט הבלוקים בעת עריכת דף), הדביקו את ה-HTML של ה-iframe, ושמרו. בלוקי הקוד של Squarespace מקבלים שיבוצים גולמיים כאלה ללא הגבלה, אך בדקו את הגדרת הרוחב של הבלוק מול רשת הדף שלכם כדי שהטופס לא יגלוש מהעמודה שלו.
שיבוץ ב-Wix
Wix דורשת שימוש באלמנט Embed > Embed a Widget (או "HTML iframe") מלוח ההוספה, ואז הדבקת הקוד בלוח ההגדרות שנפתח. בניגוד ל-WordPress ול-Squarespace, Wix מציגה HTML משובץ בתוך מעטפת ה-iframe שלה עצמה, כך שייתכן שתצטרכו להזיז את גודל האלמנט בקנבס בנוסף לעריכת ערך הגובה בקוד.
שיבוץ בדף HTML פשוט
אם אתם כותבים דף בקוד ידני, הדביקו את קטע ה-iframe ישירות בגוף המסמך במקום שבו אתם רוצים שהטופס יופיע — אין צורך בטיפול מיוחד. כדאי לעטוף אותו בתוך div מכל עם max-width כדי שהטופס לא ימתח מקצה לקצה במסכים רחבים.
בעיות נפוצות
- הטופס חתוך בתחתית. זו כמעט תמיד בעיית גובה — ראו את הערת ההתאמה למעלה. הגדילו את ערך הגובה עד שהטופס המלא, כולל כפתור השליחה וכל שגיאות "required" שעשויות להופיע, מתאים ללא פס גלילה פנימי.
- הטופס המשובץ לא נראה רספונסיבי בנייד. רוחב פיקסלים קבוע לא מצטמצם למסכים קטנים. הגדירו
width="100%"ב-iframe ותנו ל-max-width ב-CSS על האלמנט ההורה לשלוט בגבול העליון, כך שהוא יצטמצם באופן טבעי בטלפונים. - הטופס נטען ריק או מציג שגיאת "refused to connect". זה בדרך כלל אומר שהדף שבו הוא משובץ מוגש דרך רשת או פרוקסי CMS שחוסם iframes של צד שלישי. בדקו את הגדרות ה-Content-Security-Policy של האתר שלכם אם אתם מנהלים אותן ישירות, מכיוון שכלל frame-src מגביל יכול לחסום את הדומיין של Google בשקט.
- הטופס מהבהב "Loading…" ואף פעם לא מסיים. ודאו שהגדרת השיתוף של הטופס מאפשרת לכל מי שיש לו את הקישור לצפות בו — אם היא מוגבלת לאנשים ספציפיים או לארגון שלכם בלבד, iframe משובץ בדף ציבורי לא ייטען עבור מבקרים חיצוניים באותו אופן שקישור ישיר לא היה נטען.
- העיצוב נראה לא עקבי עם שאר הדף. Google Forms מציג את הגופנים והצבעים שלו בתוך ה-iframe ולא יורש את ה-CSS של האתר שלכם — אין דרך נתמכת לעצב מחדש את המראה הפנימי של הטופס מחוץ ל-iframe, רק את המכל סביבו.
שיבוץ וביצועי טעינת דף
טופס Google משובץ טוען את תוכן ה-iframe שלו בנפרד משאר הדף שלכם, מה שמוסיף בקשת רשת נוספת ועיכוב קטן לפני שהטופס עצמו מופיע — בדרך כלל לא מספיק כדי להבחין, אבל כדאי לדעת אם אתם בודקים מהירות דף. אם הטופס נמצא מתחת לקפל, שקלו טעינה עצלה של ה-iframe (הוספת loading="lazy" לתגית ה-iframe) כדי שהוא לא יתחרה על רוחב פס עם תוכן שמבקרים רואים מיד. זהו מאפיין HTML מקורי הנתמך בכל הדפדפנים המודרניים ולא דורש סקריפט נוסף.
שיקולי נגישות
מכיוון שתוכן הטופס נמצא בתוך ה-iframe של Google עצמה, הנגישות שלו — תוויות קורא מסך, ניווט מקלדת, סדר מיקוד — נקבעת על ידי Google Forms עצמו ולא על ידי משהו שאתם שולטים בו בדף שלכם. הדבר היחיד שאתם יכולים לשפר מהצד שלכם הוא הוספת מאפיין title תיאורי לתגית ה-iframe (למשל, title="Event registration form"), שקוראי מסך מכריזים עליו לפני הכניסה לתוכן המשובץ. להסתכלות רחבה יותר על מידת הנגישות של Google Forms מהקופסה, ראו את המדריך שלנו על נגישות ב-Google Forms.
שיבוץ לעומת קישור פשוט החוצה
שיבוץ שומר על המבקרים בדף שלכם, מתאים לעיצוב הסובב באתר שלכם, ויכול לצמצם את הנטישה שקורית כשמישהו מופנה לדומיין לא מוכר. זו הבחירה הטובה יותר לטפסים קצרים המוצבים בדף ייעודי — כמו טופס יצירת קשר או ווידג'ט משוב מהיר.
קישור החוצה פשוט יותר להגדרה (לא צריך לכוונן גובה), נותן לטופס את הפריסה המלאה והלא מוגבלת שלו, ונמנע מתחושת גלילה בתוך תיבה שטפסים ארוכים או רבי-מקטעים יכולים ליצור ב-iframe צפוף. אם הטופס שלכם ארוך, כולל העלאות קבצים, או משתמש בשאלות רשת, קישור אליו ישירות — ראו את המדריך שלנו על שיתוף טופס Google — הוא בדרך כלל החוויה הנוחה יותר עבור הממלאים.
שיבוץ עבור טופס יצירת קשר
שיבוץ פופולרי במיוחד להפיכת טופס Google לטופס יצירת קשר חינמי באתר עסקי או פורטפוליו — ללא backend, ללא הגדרת שרת אימייל, והתגובות נוחתות ישירות בגיליון Google Sheets שאפשר לבדוק בכל עת. אם זו המטרה הספציפית שלכם, המדריך הייעודי שלנו על שימוש ב-Google Forms כטופס יצירת קשר לאתר שלכם מכסה בחירות שדות והגדרות צמצום ספאם ששווה להוסיף מעבר לשיבוץ הבסיסי.
שאלות נפוצות
למה טופס Google המשובץ שלי חתוך?
קוד השיבוץ המוגדר כברירת מחדל משתמש בגובה קבוע, שיכול להיות קצר מהטופס בפועל שלכם. הגדילו את ערך הגובה במאפיין ה-style של ה-iframe, או קבעו אותו גבוה בהרבה מתוכן הטופס כדי שדבר לא ייחתך.
עדיף לשבץ טופס Google או פשוט לקשר אליו?
שיבוץ שומר על המבקרים באתר שלכם ומתאים לפריסת הדף שלכם, מה שיכול לשפר שיעורי השלמה. קישור החוצה פותח את חוויית הטופס המלאה והלא מוגבלת ופשוט יותר להגדרה. לטפסים קצרים בדף ייעודי, שיבוץ בדרך כלל עובד טוב יותר; לטפסים ארוכים או מורכבים, קישור החוצה נמנע מגלילה צפופה בתוך iframe.
האם אפשר לשבץ טופס Google ב-WordPress או ב-Squarespace?
כן. הדביקו את קוד שיבוץ ה-iframe לתוך בלוק Custom HTML ב-WordPress, או בלוק Code Block ב-Squarespace וב-Wix. שלוש הפלטפורמות תומכות בשיבוצי HTML גולמי למטרה זו.
למה טופס Google המשובץ שלי מציג תיבה ריקה או מסרב להתחבר?
זה בדרך כלל נגרם על ידי Content-Security-Policy מגביל באתר שלכם החוסם iframes של צד שלישי, או על ידי הגדרות שיתוף הטופס המוגבלות לאנשים ספציפיים במקום לכל מי שיש לו את הקישור. ודאו שהטופס משותף עם "Anyone with the link" ובדקו הגבלות frame-src שהאתר או מערכת הניהול שלכם עשויים לאכוף.