Your Wix account must be on a premium plan in order to add custom code.

You can easily embed your forms into your Wix website with the help of our responsive Iframe option.

How to embed a form into Wix

  1. Log in to your Wix account. From your site dashboard, go to Settings > Advanced > Custom code.

  2. Select + Add Custom Code.

  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.
    Add your form script to the Body - End section.

  7. Next, open your site editor and go to the page(s) where you want to embed your form. Go to Add > Embed. Then, select Embed a Widget.

  8. When the widget appears, select Website Address.

  9. In Cognito Forms, open your form’s Publish page and copy 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) and paste it into the What’s the website address? section.

  10. Select Apply. Finally, save and publish your changes. Your form should now appear on your website.

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 Custom Code section:

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