iframe (inline frame)

You need to show the survey right on your page - not via a link, but inside a block. An iframe (inline frame) is an HTML element that embeds one web page inside another.

In the iframe you place the survey URL - and the form appears on your site, the respondent does not leave for another domain. Handy for feedback forms, post-article surveys, and forms in a customer account. In SurveyNinja the code to embed a survey via iframe is available in the publishing settings. Related to feedback - a survey in an iframe keeps the page context. Alternatives are a direct link and a widget (if the service offers one).

An iframe is a "window" with someone else's content on your page. The browser loads the URL from the iframe and renders it in the defined area.

Definition

Iframe (inline frame) - an HTML element that lets you embed a separate HTML document (page) inside the current page. It is defined with the tag <iframe src="URL">. The src attribute holds the address of the embedded page - for example, a link to a survey. The size is set with the width and height attributes or via CSS. It is used to embed surveys, forms, maps, and videos on your own site. Content inside the iframe is isolated from the parent page (security and styles). Related to HTML and survey publishing.

In short: a "page within a page" - you show the survey in your own design without redirecting the user.

Why embed a survey via iframe

The respondent stays on your site - does not follow a link away, fewer drop-offs. The page context is preserved - the survey sits next to the article, product, or request form. A single visual context - the page is yours, the survey block is embedded. Handy for landing pages, blogs, and customer accounts. The downside is that you have to set a height: if the survey is long or multi-step, the iframe can be tall or require scrolling inside the frame.

How to embed a survey in an iframe

Take the survey link (the public link from the builder). Paste it into the src attribute of the iframe tag. Example:

<iframe src="https://surveyninja.io/s/xxxxx" width="100%" height="500" frameborder="0"></iframe>

Width and height. width and height are in pixels or percent. 100% width - the survey stretches across the whole column. A height of 400-600 px is typical for a short survey; for a long one set more (800-1000) or use a responsive height via a script if the service supports postMessage. frameborder="0" removes the border around the frame.

The embed code is usually in the "Publishing" or "Embed" section of the survey service. In SurveyNinja you can copy the iframe code in the survey publishing settings - paste it into your site template or into your CMS block. More details are in the survey publishing help article.

Iframe and security

The browser isolates the content in the iframe: the parent page and the page in the frame are different origins (same-origin policy). The parent's scripts cannot access the contents of an iframe from another domain, and vice versa. This protects the data. To embed a survey from another domain (for example, surveyninja.io), the survey server must allow display in an iframe - the X-Frame-Options or Content-Security-Policy header. If the service forbids embedding, the iframe will be empty or show an error. Modern survey services usually allow iframes for their own forms.

Responsiveness and mobile

On mobile a fixed width in pixels can overflow the screen. Use width="100%" and constrain the container with the page styles (max-width). Height: on a phone a long survey works better with a tall iframe or with scrolling inside. Some services serve a responsive survey page - it adjusts to the iframe width itself. Check the display on a phone after embedding.

Iframe vs direct link vs widget

Iframe. The survey is embedded in your page. Pros: the user does not leave. Cons: it needs space on the page and height tuning.

Direct link. The respondent goes to the survey URL. Pros: simple, no code. Cons: leaving the site, sometimes a lower completion rate due to the context switch.

Widget (popup, floating button). The survey opens in a popup window or panel. Often implemented via an iframe inside the widget. Pros: takes no space until a click. Cons: some users do not notice it or close it.

The choice depends on the goal: a post-article survey - an iframe at the end is logical; collecting feedback from any page - a widget or a link in the header.

Additional iframe attributes

title - a description of the frame for accessibility (screen readers). sandbox - restrictions for the frame content (for example, blocking scripts). For surveys it is usually not needed - the survey service manages its own page. loading="lazy" - deferred loading of the iframe on scroll; for a survey at the bottom of the page it can speed up loading. If the survey is above the fold - better without lazy, so the form is ready right away.

When an iframe is not the best choice

A very long survey on one page - the iframe height becomes huge and the page "jumps". Consider a direct link or a step-by-step widget. Strict corporate firewalls sometimes block content from iframes on external domains - then a survey via a link is more reliable. You need full customization to match your design (fonts, colors inside the survey) - an iframe shows the service's page; for deep customization look in the settings of the survey service itself.

Common mistakes

Height too small. The survey is cut off, the respondent does not see the questions. Set a height with some margin or test it on a real survey.

A rigid width in px on mobile. On a narrow screen the iframe runs off the edge. Use percentages or responsive units (vw, max-width).

A wrong or outdated URL. The survey was moved, the link was changed - the iframe shows a 404. Check the link after publishing.

The survey site blocks the iframe. If the service does not allow embedding (X-Frame-Options: DENY), the iframe will not display the survey. Then only a direct link or a widget with a redirect.

Integration with analytics

Events inside the iframe (form submission, moving between steps) may not reach the analytics of the parent page - the domain is different. Passing events to the parent window is possible via postMessage if the survey service supports it. Or check the statistics in the survey service account: how many visits, how many completed. Related to response rate and the abandonment rate - if an iframe on your own page gives a higher completion rate than a link, it shows up in the reports.

In SurveyNinja: the embed code

Create a survey, open the publishing section. Choose the "Embed on site" or "Iframe" option - the service will generate ready-made code with your survey link. Copy the code and paste it where you need on the page (an HTML block in the CMS, a template). If necessary, change the width and height to fit your layout. The survey will open inside your HTML document. Responses are saved in SurveyNinja, and export and reports work just like with a regular link. If your site is on its own domain - the survey in the iframe still loads from the survey service's domain; data is transmitted over a secure connection.

Iframe (inline frame) - an HTML element for embedding one page inside another. Used to show a survey on your own site without following a link. Defined by src, width, height. In SurveyNinja the iframe code is available in the survey publishing settings.