XILO Forms can be embedded on a website. In order to this, you have to add a script to the page we want the forms to sit on. Here's you can get the script:

  1. Login to XILO

  2. Go to the Forms tab

  3. Click the options "..." icon on the form you wish to use

  4. Select "Copy Script"

  5. Voila! You've copied the script

Once copied, you will want to either send this script to your development team for them to add, or place it on the desired webpage within your site.

By default, XILO forms are designed to be displayed on a full webpage. Should you need to embed a XILO form as part of a webpage, you can extract the div and iframe from the XILO form script which can be more easily customized with CSS.

While on the webpage containing your embedded XILO form, Right-Click the page and select "Inspect". In the developer console, search the source code for "iframContainer" and copy the div with id="iframContainer" as well as the iframe within it, shown in the screenshot and code example below.

diviframe.png
<div id="iframContainer" style="position: absolute; top:0;left:0;right:0;bottom:0;height:100%;width:100%;overflow: hidden;background-color: white;z-index: 1000;"><iframe id="ifram" seamless="" src="https://forms.xilo.io?companyId=769677&amp;formId=9f660fd5-c8e5-435c-a78b-6614aeb076c2" onload="undefined" frameborder="0" style="position: relative; top: 0;left:0;bottom:0;right:0;width: 100%; height: 100%!important;z-index: 2000;"></iframe></div>

Replace the existing XILO Form Script with the div and iframe copied in the step above. Save and reload your webpage. This will allow easy adjustment of the containing element of the embedded form.

Formatting Tip:

We've found that many layout issues experienced with the form can be resolved starting with adding a fixed height to the iframe as well as ensuring that the position attribute is set to "absolute".

Did this answer your question?