Expand Form Functionality Using a Custom Wix Tracking and Analytics Tool

By Nadia A. on July 17, 2020

The Wix website development platform uses iframes to embed third-party apps. While this is a valuable security feature, it can also limit the performance of online form functionality. Features such as autoscaling for responsive design, PayPal payment processing and any redirect links often won’t work.

You can, however, easily enable these features by creating your own custom Tracking & Analytics tool in Wix.

Please note: Your Wix account must be on a plan that allows Tracking & Analytics in order to create the custom tool that enables advanced form functionality.

How to create a Wix Tracking & Analytics tool

  1. Log in to your Wix account and open the site editor. Go to Settings > Tracking & Analytics.

  2. Select + New Tool > Custom.
    Add the custom code to create a new tool.

  3. In the Paste the code snippet here section, place the following embed script: <script src="https://www.cognitoforms.com/scripts/embed.js"></script> (This script can also be found in the Iframe embed code on your form’s Publish page.)

  4. Give your tool a name (ex: “My Contact Form”).

  5. In the Add Code to Pages section, select the page(s) where you want to add the embed script. Select Choose specific pages to just include the script on the same page(s) where your form is embedded, or select All pages to load the code on every page. Because the embed script is the same for all forms, you can use this script just once on every page – even when you’re embedding different forms on multiple pages.

  6. In the Place Code in section, choose Body - end. Then, hit the Apply button.

  7. Next, open the page(s) where you want to embed your form. Go to Add > More. Then, select HTML iframe or Embed a Site.

  8. When the widget appears, select either Enter Code or Enter Website Address and choose the Website Address option.
    Paste your form's Iframe code url into Wix.

  9. In Cognito Forms, open your form’s Publish page, and copy/paste the Iframe embed code into Notepad or another text editor. From your embed code, copy just the url between the quotation marks (ex: https://www.cognitoforms.com/f/UUJUeho0SidRnyo38nvA?id=97) into paste it into either the Add your code here (HTTPS only) or What’s the website address? section.

  10. Select Update or Apply. Finally, save and publish your changes. Your form should now appear on your website.
    Save and publish your changes in Wix.

This will enable advanced form features to work as intended on your website, so you can use all of the automation and workflow tools available through your Cognito Forms subscription.

To further enhance the forms on your Wix site, you can also add custom CSS.

Adding custom CSS to your Wix site

You can enhance the appearance of any Cognito Forms you use on your Wix website using CSS. To customize your CSS, insert the setCss script directly below the script tag in the Tracking & Analytics code:

<script src="https://www.cognitoforms.com/scripts/embed.js"></script>
<script>Cognito.setCss('body { background-color: #AABCBF; }');</script>

In the example above, the setCss script changes the form background color:
Customize the background of your embedded form with CSS.

Learn more about passing CSS into an Iframe.


Nadia

Nadia is the Marketing Coordinator for Cognito Forms. In her spare time, Nadia enjoys listening to French house, drinking iced coffee, and talking about herself in third person.