Skip to main content

Inline Mode

Embed your form directly into your page content. The form becomes part of your page layout, flowing naturally with your other content.

How It Works​

The form is embedded as a standard HTML element within your page structure. It appears exactly where you place the code, just like any other content on your page.

Implementation Steps​

Step 1: Get Your Embed Code​

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

Step 2: Add Code to Your Website​

Paste the code where you want the form to appear in your HTML:

<!-- Interactive Form Inline -->
<div id="interactive-form-container"></div>
<script src="https://cdn.interactiveform.com/embed.js"></script>
<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'inline',
    container: '#interactive-form-container'
  });
</script>

Common Use Cases​

Landing Page​

Embed the form as the main content:

<section class="hero">
  <h1>Get Your Free Quote</h1>
  <p>Fill out the form below to receive a personalized quote.</p>
</section>

<section class="form-section">
  <div id="interactive-form-container"></div>
</section>

Add form to a sidebar:

<aside class="sidebar">
  
</aside>

Testing​

After adding the code:

  1. Save and publish your changes
  2. Visit your website
  3. Verify the form appears in the correct location
  4. Test form functionality
  5. Check responsive behavior on different devices
  6. Ensure form fits well with surrounding content

Troubleshooting​

Form doesn't appear​

  • Check that the container element exists
  • Verify the container ID matches your code
  • Check browser console for errors

Form overflows container​

  • Set appropriate width and maxWidth values
  • Check parent container CSS
  • Ensure no conflicting styles

Form doesn't fit page design​

  • Adjust styling options
  • Modify container CSS
  • Check padding and margins

Form not responsive on mobile​

  • Enable responsive mode
  • Test on actual mobile devices
  • Check viewport meta tag in HTML head

Best Practices​

  1. Container Placement: Place the container div where you want the form to appear before loading the script
  2. Loading Performance: Consider lazy loading for forms below the fold
  3. Styling Consistency: Match form styling with your site's design system
  4. Mobile First: Test mobile experience first, as most users browse on mobile devices
  5. Accessibility: Ensure proper heading hierarchy and ARIA labels

Next Steps​