تضمين نماذج Fillio

ثلاث طرق لإضافة نموذج Fillio إلى أي موقع إلكتروني: قياسي ونافذة منبثقة وصفحة كاملة.

أين تجد الكود

افتح النموذج، وانتقل إلى تبويب المشاركة واختر التضمين. يُولّد Fillio المقتطف بمعرّف نموذجك وخياراتك المحددة سلفًا. والأمثلة أدناه توضح ما ينتجه.

أوضاع التضمين

اختر الوضع المناسب لتخطيطك.

قياسي

تضمين مضمّن داخل قسم الصفحة

نافذة منبثقة

يفتح كطبقة عند تفعيله

صفحة كاملة

يستوعب صفحة HTML بالكامل

التضمين القياسي

الصق الكود في أي صفحة HTML. يُعرض النموذج كـ iframe مضمّن.

كود التضمين

<iframe data-fillio-src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="Form" loading="lazy"></iframe>
<script>var d=document,w="https://fillio.so/widgets/embed.js",v=function(){"undefined"!=typeof Fillio?Fillio.loadEmbeds():d.querySelectorAll("iframe[data-fillio-src]:not([src])").forEach((function(e){e.src=e.dataset.fillioSrc}))};if("undefined"!=typeof Fillio)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>

يأتي تغيير الحجم التلقائي من سكريبت الأداة الموجود في المقتطف. أبقِه، ليكبر iframe ويصغر مع النموذج بينما ينتقل المستجيبون بين الصفحات.

من دون السكريبت

إن كنت تفضل عدم تحميل الأداة، فاستخدم iframe عاديًا بارتفاع ثابت. لن يتغير حجم شيء، فاختر ارتفاعًا يناسب أطول صفحة لديك.

<iframe src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="Form" style="border: 1px solid #e5e7eb; border-radius: 8px;"></iframe>

الخيارات

أضف معاملات الاستعلام هذه إلى عنوان URL للتضمين لتخصيص السلوك.

المعامل	الوصف
?hideTitle=1	يخفي عنوان النموذج داخل التضمين
?transparentBackground=1	يزيل الخلفية البيضاء من إطار التضمين
?dynamicHeight=1	يغير حجم iframe تلقائيًا ليتناسب مع ارتفاع النموذج

تضمين النافذة المنبثقة

فعّل النموذج من أي زر أو رابط. يتطلب تحميل سكريبت Fillio.

1. أضف السكريبت

<script async src="https://fillio.so/widgets/embed.js"></script>

2. فعّل بزر

<button data-fillio-open="YOUR_FORM_ID" data-fillio-width="500">Open Form</button>

أي عنصر يحمل data-fillio-open يأخذ تنسيق زر Fillio الافتراضي. أضف فئتك الخاصة لتجاوزه.

الخاصية	الوصف
data-fillio-open	معرّف النموذج (مطلوب)
data-fillio-width	عرض النافذة المنبثقة بالبكسل
data-fillio-hide-title	اضبط على 1 لإخفاء عنوان النموذج

3. فعّل بـ JavaScript

Fillio.openPopup('YOUR_FORM_ID', {
  width: 500,
  hideTitle: false,
  onOpen: function () {},
  onClose: function () {}
});

أغلق النافذة المنبثقة من كودك في أي وقت.

Fillio.closePopup('YOUR_FORM_ID');

الفتح من رابط

يفتح جزء العنوان النافذة المنبثقة بمجرد تحميل الصفحة، ما يسهّل الوصول إلى النموذج من عنصر قائمة أو رسالة أو صفحة أخرى.

<a href="https://your-site.com/page#fillio-open=YOUR_FORM_ID&fillio-width=600">Open Form</a>

سلوك النافذة المنبثقة

عرض النافذة المنبثقة 500 بكسل ما لم تحدد عرضًا، وهي لا تتجاوز 90% من منفذ العرض في أي اتجاه. والنقر على الخلفية أو ضغط Esc يغلقها، ويُنفَّذ onOpen وonClose عند كل طرف.

تضمين الصفحة الكاملة

استخدم قالب HTML هذا عندما يجب أن يملأ النموذج منفذ العرض بالكامل.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Form</title>
    <script async src="https://fillio.so/widgets/embed.js"></script>
    <style type="text/css">
      html { margin: 0; height: 100%; overflow: hidden; }
      iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0; }
    </style>
  </head>
  <body>
    <iframe data-fillio-src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="Form"></iframe>
  </body>
</html>

الخيارات

أضف معاملات الاستعلام هذه إلى عنوان URL للتضمين لتخصيص السلوك.

المعامل	الوصف
?transparentBackground=1	يزيل الخلفية البيضاء من إطار التضمين

نصيحة

النموذج المضمّن يتصرف تمامًا كالنموذج المستضاف: المنطق الشرطي وتعدد الصفحات وسمة نموذجك تعمل كلها داخل iframe.