Fillio फ़ॉर्म एम्बेड करना

किसी भी वेबसाइट पर Fillio फ़ॉर्म जोड़ने के तीन तरीके: स्टैंडर्ड, पॉपअप और फ़ुल पेज।

आपका कोड कहाँ मिलेगा

फ़ॉर्म खोलें, शेयर टैब पर जाएँ और एम्बेड चुनें। Fillio आपके फ़ॉर्म ID और आपके चुने हुए विकल्पों के साथ स्निपेट तैयार कर देता है। नीचे के उदाहरण दिखाते हैं कि वह क्या बनाता है।

एम्बेड मोड

अपने लेआउट के अनुसार मोड चुनें।

स्टैंडर्ड

पेज सेक्शन के अंदर इनलाइन एम्बेड

पॉपअप

ट्रिगर होने पर मोडल ओवरले के रूप में खुलता है

फ़ुल पेज

पूरे 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	फ़ॉर्म ID (आवश्यक)
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');

लिंक से खोलना

URL का फ़्रैगमेंट पेज लोड होते ही पॉपअप खोल देता है, जिससे मेन्यू आइटम, किसी मैसेज या किसी दूसरे पेज से फ़ॉर्म तक पहुँचना आसान हो जाता है।

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

पॉपअप कैसे चलता है

जब तक आप चौड़ाई तय न करें, पॉपअप 500 px चौड़ा रहता है, और किसी भी दिशा में व्यूपोर्ट के 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 के अंदर काम करते हैं।