التضمين بـ iframe

ضمّن نموذج الاتصال مباشرة في أي صفحة ويب باستخدام iframe للتكامل السلس.

الحصول على كود iframe

1. انتقل إلى إدارة النموذج (/admin/form)
2. انقر تبويب تضمين
3. ابحث عن قسم iFrame تضمين
4. انسخ كود 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 ليتناسب مع تخطيطك:

<!-- شريط جانبي ضيق -->
<iframe 
  src="https://supportretriever.com/form/your-form-id" 
  width="400" 
  height="800" 
  frameborder="0" 
  style="border: none;">
</iframe>

<!-- قسم بعرض كامل -->
<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

1. أضف كتلة HTML مخصصة
2. الصق كود iframe
3. انشر الصفحة

في Webflow

1. أضف عنصر تضمين
2. الصق كود iframe
3. عدّل الأبعاد في المصمم

التصميم المتجاوب

للتضمينات الملائمة للجوال، استخدم تقنيات متجاوبة:

<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 يُحمّل منفصلاً عن صفحتك
• الأمان: عزل iframe يُعالج تلقائياً

اختبار التضمين

1. الصق كود iframe في صفحتك
2. اعرض معاينة على سطح المكتب والجوال
3. اختبر إرسال النموذج
4. تحقق من استلام الإرسالية
5. راجع تطابق تنسيق النموذج مع هويتك

استكشاف الأخطاء

النموذج لا يظهر

• تحقق من صحة رابط النموذج
• تحقق من تعيين أبعاد iframe
• تأكد من عدم وجود CSS يخفي iframe
• اختبر رابط النموذج مباشرة في المتصفح

مشاكل الارتفاع

• زد قيمة الارتفاع إن كان النموذج مقطوعاً
• استخدم تقنيات متجاوبة للجوال
• فكّر في استخدام min-height في CSS

تعارضات التنسيق

• محتوى iframe معزول عن CSS صفحتك
• النموذج يستخدم تنسيقه (المُعدّ في محرر النموذج)
• خصّص مظهر النموذج في SupportRetriever، وليس عبر CSS

مواضيع ذات صلة

• الحصول على رابط النموذج
• التضمين برابط HTML
• تخصيص مظهر النموذج