Embedding Options

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:

Navigate to your form in the Formora dashboard.
Look for a “Share” or “Embed” button/tab, either in the Form Builder (after publishing) or in the form’s main settings/list actions.
This will typically open an “Embed Form Dialog” where you can choose your preferred embed method and copy the corresponding code snippet.

Formora Embed Options Panel

Standard Embedding Methods

Formora offers two primary methods for standard website embedding:

Script Tag (Recommended)

This is the recommended method for most websites as it offers a dynamic and responsive integration.

How it Works: You add a placeholder <div> element to your HTML where you want the form to appear, and include a JavaScript file from Formora. The script will then dynamically render the form into the placeholder.

Embed Code Structure: You’ll typically need two parts:

Placeholder Div:

<div class="formora-embed" data-form-id="YOUR_FORM_ID"></div>

Script Tag (usually placed before your closing </body> tag):

<script src="https://formora.site/js/formora-embed.js" async defer></script>

Benefits:

Responsive: Automatically adjusts to the container width.
Dynamic Height: The script usually handles adjusting the height of the form container to fit its content, preventing scrollbars within the form.
Potentially Better Styling Integration: May inherit some styles from your site for a more native feel (depending on Formora’s script capabilities and your site’s CSS).

Customization Options (via data- attributes on the placeholder div):

data-form-id="YOUR_FORM_ID": (Required) Your unique form ID.
class="formora-embed your-custom-class": You can add your own custom classes for additional styling.
data-no-resize="true": Add this attribute if you want to disable the script’s automatic height adjustment (default is false, meaning auto-resize is enabled).
data-api-key="YOUR_API_KEY": If your embedding scenario requires an API key for authentication or specific features.

Basic iFrame

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

Responsive Height Adjustment

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.

Custom Styling

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.

Form Events & Callbacks

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

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.
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.
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.
Accessibility:
- Always include a descriptive title attribute for iframes.
- Ensure the form is keyboard-navigable.
- Test with screen readers.
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

Form Not Loading

Styling Conflicts

Form Submission Issues

Next Steps

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

Learn about Custom Domains for a more branded experience
Explore Form Analytics to track form performance
Set up Form Notifications to stay informed about submissions

Welcome

Get Started

Form Building

Sharing & Embedding

Response Management

Analytics & Insights

Integrations

Account & Settings

Accessing Embed Codes

Standard Embedding Methods

Advanced Embedding Options

Best Practices for Embedding

Troubleshooting Common Issues

Next Steps

Welcome

Get Started

Form Building

Sharing & Embedding

Response Management

Analytics & Insights

Integrations

Account & Settings

​Accessing Embed Codes

​Standard Embedding Methods

​Advanced Embedding Options

​Best Practices for Embedding

​Troubleshooting Common Issues

​Next Steps

Accessing Embed Codes

Standard Embedding Methods

Advanced Embedding Options

Best Practices for Embedding

Troubleshooting Common Issues

Next Steps