הטמעה עם iframe

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

קבלת קוד iframe

גשו לניהול הטופס (/admin/form)
לחצו על לשונית הטמעה
מצאו את סעיף iFrame הטמעה
העתיקו את קוד ה-iframe שנוצר

קוד iframe בסיסי

קוד ה-iframe הסטנדרטי:

<iframe 
  src="https://supportretriever.com/form/your-form-id" 
  width="100%" 
  height="600" 
  frameborder="0" 
  style="border: none;">
</iframe>

מאפייני iframe

רוחב וגובה

width="100%" – הטופס תופס את רוחב המכל
height="600" – גובה ברירת מחדל (התאימו לפי צורך)

עיצוב

frameborder="0" – מסיר את המסגרת ברירת המחדל
style="border: none;" – מוודא שאין מסגרת

התאמת מידות

התאימו את גודל ה-iframe לפריסה:

<!-- Narrow sidebar -->
<iframe 
  src="https://supportretriever.com/form/your-form-id" 
  width="400" 
  height="800" 
  frameborder="0" 
  style="border: none;">
</iframe>

<!-- Full-width section -->
<iframe 
  src="https://supportretriever.com/form/your-form-id" 
  width="100%" 
  height="700" 
  frameborder="0" 
  style="border: none;">
</iframe>

דוגמאות יישום

ב-HTML

<section class="contact-section">
  <h2>Get in Touch</h2>
  <iframe 
    src="https://supportretriever.com/form/your-form-id" 
    width="100%" 
    height="600" 
    frameborder="0" 
    style="border: none;">
  </iframe>
</section>

ב-React/Next.js

<iframe
  src="https://supportretriever.com/form/your-form-id"
  width="100%"
  height="600"
  frameBorder="0"
  style={{ border: 'none' }}
  title="Contact טופס"
/>

ב-WordPress

הוסיפו בלוק Custom HTML
הדביקו את קוד ה-iframe
פרסמו את הדף

ב-Webflow

הוסיפו אלמנט הטמעה
הדביקו את קוד ה-iframe
התאימו מידות במעצב

עיצוב רספונסיבי

להטמעות ידידותיות למובייל, השתמשו בטכניקות רספונסיביות:

<div style="position: relative; padding-bottom: 100%; height: 0; overflow: hidden;">
  <iframe 
    src="https://supportretriever.com/form/your-form-id" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    frameborder="0">
  </iframe>
</div>

או עם CSS:

.contact-form-container {
  position: relative;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
}

.contact-form-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

עיצוב המכל

עטפו את ה-iframe במכל מעוצב:

<div class="form-wrapper" style="max-width: 800px; margin: 0 auto; padding: 20px;">
  <iframe 
    src="https://supportretriever.com/form/your-form-id" 
    width="100%" 
    height="600" 
    frameborder="0" 
    style="border: none; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
  </iframe>
</div>

יתרונות הטמעת iframe

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

שיקולים

גובה: וודאו שגובה ה-iframe מתאים לטופס
מובייל: נסו במכשירים ניידים לתצוגה נכונה
טעינה: תוכן ה-iframe נטען בנפרד מהדף
אבטחה: sandboxing של iframe מטופל אוטומטית

בדיקת ההטמעה

הדביקו את קוד ה-iframe בדף
צפו בתצוגה מקדימה בדסקטופ ובמובייל
נסו שליחת טופס
וודאו שהשליחה מתקבלת
בדקו שעיצוב הטופס תואם את המותג