To embed your form on WIX after it has been created, you need the external embed code. You can find this in the Funnelforms side menu under “Forms”. Click on “Generate” under “External embed code” for the desired form and copy the code:
There are then two different ways to integrate the external embed code on WIX. Which way you have to use depends on whether you are using the WIX Website Editor (self-created) or the WIX ADI (artificial intelligence).
WIX Website Editor
In the WIX editor, first click on the + symbol for add, then on “Stripes” and select the category “Classic” to add a new, classic stripe to your website in the desired area. Your form will be added to this area later:
The next element you need is a widget. To do this, click on the + symbol for add again, then on “Embed”, select the “Embed widget” element in the “Embedding” category and add it to your created strip:
When the widget element is added to your strip, it should appear as a small HTML box on the strip. Click here on “Enter HTML code” or on the cogwheel to enter your external embed code from Funnelforms:
After the embed code has been inserted, you have to make a small manual adjustment that is necessary with WIX, because the code must be defined as a DIV element here. To do this, add a <div> in the line before the embed code and a </div> in the line after the embed code so that it looks like this in the widget element:
Code example:
<div>
<script type="text/javascript" src="https://YOUR-DOMAIN.COM/wp-content/plugins/funnelforms-pro/res/scripts/af2_iframe_data.js" data-url=“https://YOUR-DOMAIN.COM/” data-content-id=“XXXX”></script>
</div>
Then click on “Update” to save the code.
IMPORTANT: Then manually drag the widget element to the required width and to the maximum possible height to avoid scrolling within the form or contact form. The display should then look something like this:
Then click on “Save” or “Publish” to apply all changes.
WIX ADI
If you are a WIX ADI user, first go to “Add” at the top left and select “Page section”. In the left sidebar, click on “HTML embedding” and drag one of the displayed areas into the section. Due to the width of the form, we recommend a full-width section here:
Click on “Edit” in the section and insert the external embed code from Funnelforms next in the left sidebar under the HTML settings. Below this, set the HTML section to full width and adjust the height to your form:
Code example:
<script type="text/javascript" src="https://YOUR-DOMAIN.COM/wp-content/plugins/funnelforms-pro/res/scripts/af2_iframe_data.js" data-url=“https://YOUR-DOMAIN.COM/” data-content-id=“XXXX”></script>
Then click on “Preview” to see the integrated form on the website and make any necessary adjustments. When you are happy with the result, click on “Publish”:
