Seamlessly Embedding Dynamic Forms in an Inline iframe

Intro

While dynamic forms or surveys can be delivered as standalone pages, they frequently need to be embedded in existing websites or applications. Ideally, the form should be embedded inline within the rest of the host site’s contents. Inline embedding requires a certain level of developer access to that site, which may not always be available. In those cases, using an iframe is the only feasible alternative. This is why many reputable form management systems, such as Form.io, LimeSurvey, Formbricks, and of course Endatix Hub, include iframe embedding as an end-user feature.

Challenges

When the embedded forms and surveys include dynamic elements, however, the iframe may cause serious layout and styling issues. This is particularly true when using a powerful form engine like SurveyJS, which supports advanced conditional logic and validation rules.

The most common problem is related to the form’s height, which may frequently grow or shrink, depending on the activities of the person filling out the form. Here are some examples of what might cause such changes:

• In a multipage form, some pages may be taller than others, depending on the number of questions each of them contains.
• When validation messages render, they increase the height of the form.
• Conditional logic that makes a question hidden or visible can drastically affect the height of a form.
• Dynamic question types, such as a matrix, which allow for rows to be added or removed, also affect the height of the form.

When the form or survey’s height is dynamically changed, this results in one of two layout-related problems in a traditional iframe:

1. When the height of the form increases, a vertical scrollbar appears on the iframe, which makes the form no longer seamlessly embedded within the rest of the site’s contents.
2. When the height decreases, the iframe doesn’t automatically contract, leaving an unpleasant empty area below the form, pushing the rest of the site’s contents down.

Solution

An iframe’s height can also be changed dynamically. Doing that in response to changes to the form’s height can ensure that no unwanted vertical scrollbars appear where the form is embedded. The only thing we need is a reliable way of getting changes to the form’s height reported to it.

Luckily, the event-oriented architecture of the SurveyJS form library, which powers Endatix Hub, provides the means to easily solve this problem.

Monitoring height changes in SurveyJS requires tracking lifecycle events that alter the DOM structure, element visibility, or layout dimensions.

Events Associated with Potential Changes in a Form’s Height

The following SurveyJS events may be used to monitor for changes to a form’s height:

Page Navigation

• onCurrentPageChanged: Triggers after switching pages, which resets the entire rendered layout and height.
• onCurrentPageChanging: Triggers prior to page navigation, useful for preparing height adjustments.

Element Visibility & Structure

• onQuestionVisibleChanged: Fires when conditional logic (visibleIf) displays or hides a question.
• onPanelVisibleChanged: Fires when a panel becomes visible or hidden, causing significant vertical shifts.
• onPageVisibleChanged: Fires when an entire page’s visibility toggles based on expressions.

Validation & Error State Changes

• onValidateQuestion: Triggers during question validation when error messages are rendered or cleared above/below inputs.
• onValidatePage: Triggers when page-level validation messages are displayed or removed.
• onValidatePanel: Fires when validation error messages appear or disappear on a panel.

Dynamic Container & Matrix Mutations

• onDynamicPanelAdded: Fires when a user adds a new panel entry in a paneldynamic question.
• onDynamicPanelRemoved: Fires when an entry is removed from a paneldynamic question.
• onDynamicPanelCurrentIndexChanged: Triggers when navigating tabs or pages within a dynamic panel.
• onMatrixRowAdded: Fires when a new row is added to a matrixdynamic question.
• onMatrixRowRemoved: Fires when a row is removed from a matrixdynamic question.
• onMatrixDetailPanelVisibleChanged: Triggers when expanding or collapsing a detail section inside a matrix row.

Value Changes & Text Auto-Growth

• onValueChanged: Fires on value updates, which can trigger expression-based layout changes or expand auto-growing comments (autoGrowComment).
• onUIStateChanged: Fires when transient UI states change, such as expanding or collapsing collapsible panels/questions.

Layout & Render Hooks

• onResize: Triggers whenever the survey’s container width or height changes.
• onAfterRenderQuestion: Executes after a question is inserted into the DOM, useful for recalculating height after custom widgets render.
• onAfterRenderPanel: Executes after a panel’s DOM elements are rendered.
• onAfterRenderPage: Executes after a page’s DOM elements are rendered.

How Endatix Hub Implements the Solution

While the events above can be used to reliably catch most changes in height, there are still some edge cases that may end up unreported by the SurveyJS form engine. A good example of that is any instructional text using the HTML widget or the form’s end screen (“thank you” message), which also allows for HTML markup.

This is why when we implemented the embed script in Endatix Hub, we used a combination of the events above and a MutationObserver to ensure absolutely every change gets reliably captured.

What This Means for End Users

The solution described in this blog post comes out of the box with Endatix Hub. All that end users have to do is copy the embed snippet to their content management system of choice (WordPress, Umbraco, Strapi, Sitefinity, Sitecore, etc.), and everything will work as expected.

See It in Action

Embedded below is a simple medical patient intake form that exhibits this exact behavior. If you answer “Yes” to the medical conditions question, the form expands dynamically. If you switch back to “No” it will seamslessly shrink:

JSON Definition of the Sample Form

{
 "title": "Patient Intake Form",
 "logoPosition": "right",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "text",
     "name": "fullName",
     "title": "Full Name",
     "isRequired": true
    },
    {
     "type": "radiogroup",
     "name": "hasPreExistingConditions",
     "title": "Do you have any pre-existing medical conditions?",
     "isRequired": true,
     "choices": [
      {
       "value": "yes",
       "text": "Yes"
      },
      {
       "value": "no",
       "text": "No"
      }
     ]
    },
    {
     "type": "paneldynamic",
     "name": "conditionsList",
     "visibleIf": "{hasPreExistingConditions} = 'yes'",
     "title": "Please list your conditions and medications",
     "templateElements": [
      {
       "type": "text",
       "name": "conditionName",
       "title": "Condition"
      },
      {
       "type": "text",
       "name": "medication",
       "title": "Current Medication"
      }
     ],
     "panelCount": 1,
     "minPanelCount": 1,
     "panelAddText": "Add another condition"
    }
   ]
  }
 ]
}