Ενσωμάτωση Φορμών Fillio

Τρεις τρόποι για να προσθέσετε μια φόρμα Fillio σε οποιοδήποτε ιστότοπο: Τυπική, Αναδυόμενο Παράθυρο και Πλήρης Σελίδα.

Πού θα βρείτε τον κώδικά σας

Ανοίξτε τη φόρμα, πηγαίνετε στην καρτέλα Κοινοποίηση και επιλέξτε Ενσωμάτωση. Το Fillio φτιάχνει το απόσπασμα με το ID της φόρμας σας και τις επιλογές σας ήδη συμπληρωμένες. Τα παραδείγματα παρακάτω δείχνουν τι παράγει.

Λειτουργίες Ενσωμάτωσης

Επιλέξτε τη λειτουργία που ταιριάζει στη διάταξή σας.

Τυπική

Ενσωματωμένο inline σε τμήμα σελίδας

Αναδυόμενο Παράθυρο

Ανοίγει ως επικάλυψη modal όταν ενεργοποιηθεί

Πλήρης Σελίδα

Καταλαμβάνει ολόκληρη HTML σελίδα

Τυπική Ενσωμάτωση

Επικολλήστε τον κώδικα σε οποιαδήποτε HTML σελίδα. Η φόρμα αποδίδεται ως inline 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>

Η αυτόματη αλλαγή μεγέθους προέρχεται από το script του widget μέσα στο απόσπασμα. Κρατήστε το και το iframe μεγαλώνει και μικραίνει μαζί με τη φόρμα καθώς οι ερωτώμενοι αλλάζουν σελίδες.

Χωρίς το script

Αν προτιμάτε να μη φορτώσετε το widget, χρησιμοποιήστε ένα απλό 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 ώστε να ταιριάζει με το ύψος της φόρμας

Ενσωμάτωση Αναδυόμενου Παραθύρου

Ενεργοποιήστε τη φόρμα από οποιοδήποτε κουμπί ή σύνδεσμο. Απαιτεί τη φόρτωση του script widget του Fillio.

1. Προσθήκη Script

<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	Πλάτος αναδυόμενου παραθύρου σε pixels
data-fillio-hide-title	Ορίστε σε 1 για απόκρυψη τίτλου φόρμας

3. Ενεργοποίηση με JavaScript

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

Κλείστε ένα popup από τον δικό σας κώδικα οποιαδήποτε στιγμή.

Fillio.closePopup('YOUR_FORM_ID');

Άνοιγμα από σύνδεσμο

Ένα θραύσμα URL ανοίγει το popup μόλις φορτώσει η σελίδα, πράγμα που κάνει εύκολη την πρόσβαση στη φόρμα από ένα στοιχείο μενού, ένα μήνυμα ή μια άλλη σελίδα.

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

Συμπεριφορά του popup

Ένα popup έχει πλάτος 500 px εκτός αν ορίσετε πλάτος, και δεν ξεπερνά ποτέ το 90% του παραθύρου προβολής σε καμία κατεύθυνση. Το κλικ στο φόντο ή το πάτημα του Esc το κλείνει, ενώ τα onOpen και onClose εκτελούνται στα δύο άκρα.

Ενσωμάτωση Πλήρους Σελίδας

Χρησιμοποιήστε αυτό το πρότυπο HTML όταν η φόρμα πρέπει να γεμίζει ολόκληρο το viewport.

<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.