جاگذاری فرم‌های 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 دارد.
۱. اسکریپت را اضافه کنید
<script async src="https://fillio.so/widgets/embed.js"></script>۲. با دکمه فعال کنید
<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 | برای پنهان کردن عنوان فرم روی ۱ تنظیم کنید |
۳. با JavaScript فعال کنید
Fillio.openPopup('YOUR_FORM_ID', {
width: 500,
hideTitle: false,
onOpen: function () {},
onClose: function () {}
});هر وقت خواستید، پاپ‌آپ را از کد خودتان ببندید.
Fillio.closePopup('YOUR_FORM_ID');باز کردن از یک لینک
یک قطعهٔ URL به‌محض بارگذاری صفحه پاپ‌آپ را باز می‌کند؛ همین کار رسیدن به فرم از یک آیتم منو، یک پیام یا صفحه‌ای دیگر را ساده می‌کند.
<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 کار می‌کنند.