Formsort
Search…
Building flows
Handling data
Going live
Embedding
Place Formsort flows within a larger webpage.
Formsort flows may be embedded within other web pages.
Embed snippet
The embed snippet page
Pasting the snippet shown in this page into your HTML, or using a tag manager like Google Tag Manager or segment.
Styles
Modal
If embedded as a modal, the flow will load above the rest of your page content.
Inline
If embedded inline, the flow will be mounted at the element that you provide using a CSS selector.
Popover
If embedded as a popover, the flow will be shown at one of the corners of the screen, as an overlay.
Load immediately
If load immediately is checked, then the flow will immediately load and be shown to the responder.
If unchecked, you will need to call
_formsort.load() when you wish to display the flow.Load with URL parameters
If Load with URL parameters is checked, then any URL search parameters will be forwarded to the embed at load time.
Forwarding URL search parameters to the embed
Keep in mind that url parameters that don't correspond to answer variable names or whitelisted as External answers will be ignored and unavailable within Formsort.
Whitelisting embedding domains
By default, a flow can be embedded within any website. For greater security over where your forms can appear, you can whitelist embedding domains from the 'Allowed embedding domains' section of the Account page --> Security tab.
By adding one or more domains to the list of allowed embedding domains, no other domain will be permitted to host your flow.
Another advantage of whitelisting certain domains is that this allows answer submission data to flow to the parent URL.
If you have multiple domains, such as 'staging.formort.com' and 'development.formsort.com,' you can use the asterisk wildcard: '*.formsort.com.'
More control: Web Embed API
The Formsort web embed API provides more control over the Formsort embed. Most importantly, it provides lifecycle event callbacks corresponding to the analytics events, allowing you to trigger certain actions on
FlowLoaded, FlowFinalized, EmailCollected, etc.One use of this would be listening for
FlowFinalized, which is dispatched when the flow is finalized, in order to remove the element in which the form is rendered, or to show custom congratulations content to your responder.Embeds may also intercept and cancel redirects by returning an object
{ cancel: true } in the redirect handlers.Finally, if you explicit whitelist a domain in Security --> 'Allowed embedding domain,' then you can also receive answer submission data on analytics events, allowing you to trigger specific actions in your app based on users' answers.
Embedding forms using React
The Formsort React component allows for use of a Formsort flow within a React render tree, in addition to providing more lifecycle callbacks.
1
import React from "react";
2
import EmbedFlow from "@formsort/react-embed";
3
​
4
const EmbedFlowExample: React.FunctionComponent = () => (
5
<div>
6
<EmbedFlow
7
clientLabel="formsort"
8
flowLabel="onboarding"
9
variantLabel="main"
10
embedConfig={{
11
style: {
12
width: "100%",
13
height: "100%"
14
}
15
}}
16
/>
17
</div>
18
);
Copied!
Considerations
Embedding a flow within a larger page can be easy to set up, but has some caveats:
Scrolling
If your flow has long steps with many questions, the flow may be vertically taller than the viewport's size and consequently will display with scroll bars.
If the embedding page itself also has scrolling, this can result in a detrimental user experience, as browsers sometimes cannot correctly identify which content the user intends to scroll.
URL navigation
URL navigation -- the ability to use forward and back buttons to navigate through a flow by placing the step index in the URL -- is not currently supported for embedded flows. However, when a responder is visiting a non-embedded flow on a custom domain, Formsort controls the URL, and therefore URL navigation is possible (assuming the Enable URL navigation option in the Themes > Behavior tab is enabled). So, if a user will expect forward and back buttons to work, such as for mobile swipe gestures, consider using a custom domain rather than an embedded flow.
Loading performance
When using an embed, the embed script must first load, which only then starts loading the flow, requiring an additional request. This might lead to a slightly-slower initial load time.
Last modified 8mo ago