Skip to main content

Inline Mode on Wix

Embed your form directly into your Wix page content using Wix's HTML iframe element. The form becomes part of your page layout.

Implementation Steps​

Step 1: Get Your Embed Code​

  1. Go to your form's Embed page
  2. Select Wix Website
  3. Choose Inline as the display mode
  4. Copy the generated iframe code

Step 2: Open Wix Editor​

  1. Log in to your Wix account
  2. Go to My Sites
  3. Click Edit Site on your website
  4. Navigate to the page where you want to add the form

Step 3: Add HTML Embed Element​

  1. Click Add (+) button on the left sidebar
  2. Select Embed Code
  3. Choose Embed HTML
  4. Drag the HTML element to your desired location

Step 4: Insert Your Code​

  1. Click on the HTML element you just added
  2. Click Enter Code
  3. Select Code tab
  4. Paste your embed code:
<iframe 
  src="https://app.interactiveform.com/embed/YOUR_FORM_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; overflow: hidden;"
  allowfullscreen>
</iframe>
  1. Click Update

Step 5: Adjust Size and Position​

  1. Resize the element by dragging corners
  2. Position it where you want on the page
  3. Use Wix's alignment tools for precise placement

Step 6: Publish Your Site​

  1. Click Publish in the top right
  2. Visit your live site to test the form

Customization in Wix​

Adjust Form Height​

The form height can be adjusted in two ways:

Method 1: In the iframe code

<iframe 
  src="https://app.interactiveform.com/embed/YOUR_FORM_ID"
  width="100%"
  height="800"
  frameborder="0">
</iframe>

Method 2: In Wix Editor

  1. Select the HTML element
  2. Drag the bottom edge to resize
  3. The element will maintain aspect ratio

Full Width Form​

To make the form span the full width of your page:

  1. Select the HTML element
  2. Click Stretch icon in the top toolbar
  3. Choose Stretch to full width

Or use a strip/section:

  1. Add a Strip from the Add menu
  2. Place the HTML element inside the strip
  3. Set strip to full width

Responsive Design​

Wix automatically handles responsive design, but you can optimize:

  1. Click Mobile icon in top bar
  2. Switch to mobile editor
  3. Adjust form size for mobile view
  4. Test form functionality

Styling the Container​

Add a background or border to the form container:

  1. Select the HTML element
  2. Click Design in the settings panel
  3. Choose a design preset or customize:
    • Background color
    • Border style
    • Shadow effects
    • Corner radius

Layout Examples​

Full-Width Landing Page​

<!-- Use in a full-width strip -->
<iframe 
  src="https://app.interactiveform.com/embed/YOUR_FORM_ID"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none;">
</iframe>

Wix Setup:

  1. Add a Strip (full width)
  2. Add HTML element inside strip
  3. Stretch HTML element to strip width

Two-Column Layout​

Create a layout with text on left, form on right:

  1. Add a Multi-Column layout (2 columns)
  2. Add text in left column
  3. Add HTML element with form in right column

Form in a Box​

Add form inside a styled container:

  1. Add a Box element
  2. Style the box (background, border, shadow)
  3. Add HTML element inside the box
  4. Adjust padding around the form

Tabbed Content​

Add form as one of multiple tabs:

  1. Add Tabs element from Add menu
  2. In one tab, add your HTML element
  3. Other tabs can have different content

Advanced Wix Integration​

Auto-Resize Height​

Use JavaScript to automatically adjust iframe height:

<iframe 
  id="interactive-form"
  src="https://app.interactiveform.com/embed/YOUR_FORM_ID"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

<script>
  window.addEventListener('message', function(e) {
    if (e.data.type === 'formHeight') {
      document.getElementById('interactive-form').height = e.data.height;
    }
  });
</script>
info

This requires adding custom code to your Wix site via Settings → Custom Code

Wix Velo Integration​

If you use Wix Velo, you can add advanced functionality:

// Page code in Wix Velo
$w.onReady(function () {
  // Listen for form submission
  $w('#htmlComponent1').onMessage((event) => {
    if (event.data.type === 'formSubmitted') {
      console.log('Form submitted:', event.data);
      
      // Show success message
      $w('#successText').show();
      
      // Or redirect to thank you page
      wixLocation.to('/thank-you');
    }
  });
});

Dynamic Form Loading​

Load different forms based on page context:

// In Wix Velo
$w.onReady(function () {
  let formId = 'DEFAULT_FORM_ID';
  
  // Get form ID from URL parameter
  let urlParams = new URLSearchParams(window.location.search);
  if (urlParams.has('form')) {
    formId = urlParams.get('form');
  }
  
  // Update iframe src
  let iframeSrc = `https://app.interactiveform.com/embed/${formId}`;
  $w('#htmlComponent1').src = iframeSrc;
});

Wix-Specific Considerations​

Wix Editor vs Editor X​

Wix Editor:

  • Use HTML iframe element
  • Drag and drop positioning
  • Basic responsive controls

Editor X:

  • More advanced layout options
  • CSS Grid and Flexbox support
  • Better responsive control
  • Same embed code works

Mobile Optimization​

  1. Switch to mobile editor in Wix
  2. Adjust form width for mobile screens
  3. Consider reducing height on mobile
  4. Test form usability on mobile

Wix Multilingual Sites​

For multilingual sites, create separate forms for each language:

  1. Create forms for each language in your dashboard
  2. In Wix, add HTML element to each language version
  3. Use appropriate form ID for each language

Or use URL parameters:

<iframe 
  src="https://app.interactiveform.com/embed/YOUR_FORM_ID?lang=es"
  width="100%"
  height="600">
</iframe>

Testing​

In Wix Editor​

  1. Click Preview button
  2. Test form functionality
  3. Try submitting the form
  4. Check responsive behavior

On Published Site​

  1. Publish your site
  2. Test on different devices
  3. Verify form submissions work
  4. Check email notifications

Common Checks​

  • Form loads correctly
  • All fields are visible
  • Form is responsive on mobile
  • Submit button works
  • Validation messages appear
  • Thank you message displays
  • Form fits within container

Troubleshooting​

Form doesn't appear​

  • Check that iframe code is correct
  • Verify form ID is valid
  • Ensure HTML element is visible (not hidden)
  • Check browser console for errors

Form is cut off​

  • Increase iframe height
  • Check container size in Wix
  • Verify no overflow:hidden on parent elements
  • Adjust mobile view separately

Form not responsive​

  • Check iframe width is set to 100%
  • Test in Wix mobile editor
  • Verify Wix responsive settings
  • Check form's own responsive settings

Scrolling issues​

  • Adjust iframe height to fit content
  • Use auto-resize script
  • Check for nested scrollbars
  • Set overflow: hidden if needed

Form doesn't submit​

  • Check form ID is correct
  • Verify internet connection
  • Check browser console for errors
  • Test form outside of Wix

Best Practices for Wix​

  1. Container Design: Style the HTML element container to match your site
  2. Appropriate Height: Set height to avoid scrollbars when possible
  3. Mobile Testing: Always test on mobile devices
  4. Loading State: Consider adding a loading indicator
  5. Error Handling: Test form validation and error messages
  6. Consistent Styling: Match form design with Wix theme
  7. Page Context: Place form where it makes sense in page flow

Comparison with Other Modes​

FeatureInlinePopupFloat Button
Page Integration✅ Best❌ Overlay❌ Overlay
User Flow✅ Natural⚠️ Interrupts⚠️ Requires click
Mobile Experience✅ Good⚠️ Can be intrusive✅ Good
Wix Implementation✅ Easy⚠️ Requires custom code⚠️ Requires custom code
Visual Editor✅ Full control❌ Limited❌ Limited

Next Steps​