Skip to main content
Embedding allows you to display your Formora forms directly on your own website, providing a seamless experience for your users without redirecting them to a separate Formora page. This guide covers the different embedding methods Formora offers, their customization options, and how to choose the best one for your needs.

​
Accessing Embed Codes

To get the embed code for your form:
  1. Navigate to your form in the Formora dashboard.
  2. Look for a “Share” or “Embed” button/tab, either in the Form Builder (after publishing) or in the form’s main settings/list actions.
  3. This will typically open an “Embed Form Dialog” where you can choose your preferred embed method and copy the corresponding code snippet.
Mockup of the Embed Form Dialog in Formora, showing different embed methods like Script, iFrame, etc.

Formora Embed Options Panel

​
Standard Embedding Methods

Formora offers two primary methods for standard website embedding:
An iFrame (Inline Frame) embeds your form as a separate document within a rectangular region on your webpage.How it Works: You add an <iframe> HTML tag to your page, setting its src attribute to your form’s unique URL.Embed Code Structure:
<iframe
  src="https://formora.site/f/YOUR_FORM_ID"
  title="Your Form Title"
  width="100%"
  height="600px"
  frameborder="0"
  loading="lazy"
  scrolling="no">
</iframe>
Benefits:
  • Simple to Implement: Very straightforward HTML.
  • Isolated: The form’s styles are completely isolated from your website’s styles, preventing CSS conflicts.
Customization Options (via iframe attributes):
  • src="https://formora.site/f/YOUR_FORM_ID": (Required) The direct URL to your published Formora form.
  • title="Your Form Title": Important for accessibility. Set a descriptive title.
  • width="100%": Set the width (e.g., "100%" for full width, or a specific pixel value like "600px").
  • height="600px": Set the height. You might need to adjust this based on your form’s content.
  • frameborder="0": Removes the default border around the iframe.
  • loading="lazy": Enables lazy loading, which can improve page performance.
  • scrolling="no": If you want to prevent scrolling within the iframe (though this might cut off content if the form is taller than the specified height).

​
Advanced Embedding Options

For a better user experience, especially with dynamic form content, you can implement responsive height adjustment:Using JavaScript:
// Add this script to your page
window.addEventListener('message', function(e) {
  if (e.origin === 'https://formora.site') {
    if (e.data.type === 'formora-height') {
      document.getElementById('formora-iframe').style.height = e.data.height + 'px';
    }
  }
});
Update your iframe:
<iframe
  id="formora-iframe"
  src="https://formora.site/f/YOUR_FORM_ID"
  title="Your Form Title"
  width="100%"
  height="600px"
  frameborder="0"
  scrolling="no">
</iframe>
This will automatically adjust the iframe height based on the form’s content.
While the form’s core styling is managed by Formora, you can customize its appearance within your site:For Script Embed:
<div 
  class="formora-embed custom-form-container" 
  data-form-id="YOUR_FORM_ID"
  data-theme="light"
  data-primary-color="#007bff"
  data-font-family="Arial, sans-serif">
</div>
Available Customization Attributes:
  • data-theme: “light” or “dark”
  • data-primary-color: Any valid CSS color
  • data-font-family: Any valid CSS font family
  • data-border-radius: CSS border-radius value
  • data-button-style: “filled” or “outlined”
Note: Available customization options may vary based on your Formora plan.
You can listen for form events to enhance the integration:
window.addEventListener('formora-event', function(e) {
  if (e.detail.type === 'form-submitted') {
    // Handle successful form submission
    console.log('Form submitted:', e.detail.data);
  } else if (e.detail.type === 'form-error') {
    // Handle form errors
    console.error('Form error:', e.detail.error);
  }
});
Available Events:
  • form-submitted: Triggered when the form is successfully submitted
  • form-error: Triggered when there’s an error during submission
  • form-started: Triggered when the user starts filling out the form
  • form-abandoned: Triggered when the user leaves the form without submitting

​
Best Practices for Embedding

  1. Choose the Right Method:
    • Use the Script Tag method for most modern websites where you want responsive behavior and better styling integration.
    • Use iFrame for simpler implementations or when you need complete style isolation.
  2. Responsive Design:
    • Always set the width to 100% or use responsive units.
    • Implement height adjustment for dynamic content.
    • Test the form on various screen sizes and devices.
  3. Performance:
    • Use loading="lazy" for iframes that are below the fold.
    • Consider using the Script Tag method for better performance.
    • Minimize the number of embedded forms on a single page.
  4. Accessibility:
    • Always include a descriptive title attribute for iframes.
    • Ensure the form is keyboard-navigable.
    • Test with screen readers.
  5. Security:
    • Only embed forms from trusted Formora domains.
    • Keep your form IDs and API keys secure.
    • Regularly update your embedding code to use the latest security features.

​
Troubleshooting Common Issues

Possible Causes:
  • Incorrect form ID
  • Network connectivity issues
  • Content Security Policy (CSP) restrictions
  • JavaScript errors on the parent page
Solutions:
  • Verify the form ID in your embed code
  • Check browser console for errors
  • Ensure your CSP allows Formora domains
  • Test in an incognito/private window
Possible Causes:
  • CSS conflicts between your site and the form
  • Missing or incorrect customization attributes
  • Browser-specific styling issues
Solutions:
  • Use the Script Tag method for better style isolation
  • Review and update customization attributes
  • Test in multiple browsers
Possible Causes:
  • Network connectivity problems
  • Form validation errors
  • Rate limiting or plan restrictions
Solutions:
  • Check network connectivity
  • Review form validation rules
  • Verify your Formora plan limits

​
Next Steps

Now that you understand how to embed your forms, you might want to:
⌘I