Form deployment options

March 25, 2020

Overview of domains, embeds, and form hosting.

Public flow URL

Until you publish a flow, it is only visible to other users of your organization in the Formsort studio. Once you publish a flow, it becomes immediately accessible under a URL in the flow.formsort.com domain.

While your flow is fully functional under this domain, we do not recommend using it in production, as users may be confused by the root domain not matching the content.

Embeds

If you'd like to embed Formsort within an existing page, there are a few different approaches.

In order of increasing customization:

JavaScript snippet

Upon publishing, you will see an option to copy a JavaScript snippet that will load the flow. This is the simplest approach - by copy/pasting this snippet into your HTML, the Formsort flow will load.

If you are a non-technical user that just needs to put a flow within another page, such as embedding a form within Unbounce or integrating the flow with a Squarespace page, this approach should suffice.

If your flow ends in a redirect, the containing page will be navigated to the redirect URL once the flow is finalized.

react-embed

The @formsort/react-embed package on npm allows to embed Formsort within React applications, and comes with TypeScript type annotations. The flow parameters are passed as props to the component.

import EmbedFlow from '@formsort/react-embed';

//...

<EmbedFlow
  clientLabel='formsort'
  flowLabel='onboarding'
  variantLabel='main'
  embedConfig={{
    style: {
      width: '100%',
      height: '100%',
    }
  }}
/>

Compared to the JavaScript snippet, the React embed will load more quickly, as the loading code will be part of your JavaScript bundle and the flow can immediately start loading.

In addition to loading and displaying the flow, you will have access to callbacks for flow lifecycle events, such as when a step or the flow itself is completed.

web-embed-api

If you don't use react, @formsort/web-embed-api is a pure-JavaScript embed option.

Internally, Formsort loads as an <iframe> and communicates with your page using a protocol using window.postMessageweb-embed-api wraps that communication with an event emitter that you can use more simply.

CNAMEs

If you'd rather not host a page just to present a form, you can configure your DNS to point to Formsort servers, and we will serve your flow at that domain.

Behind the scenes

When you add a domain to Formsort, we will issue a star certificate for that URL pattern. For example, if you add flow.example.com, we will issue a certificate for *.example.com. After domain verification, you will be able to add other subdomains to point to Formsort.

For performance, your DNS records will actually point to our CDN provider, Amazon CloudFront, which then loads your flows from our origin servers.

flow.example.com
Formsort CDN (CloudFront)
Formsort origin servers

Configuring domains

Once configured, domains may be pointed to one of your flows. That flow (or specific variant of a flow), will be served at the root of that domain.

flow.example.com

flow: registration
variant: main

Other flows and variants that you have created will be accessible by explicitly providing their flow parameters in the URL. For example, you could load a variant called beta of a flow called cancellation by specifying it in the URL:

flow.example.com/flow/cancellation/variant/beta

flow: registration
variant: beta

Note that unlike when using the bare flow.formsort.com domain it is not necessary to specify your client name when using a CNAME, as only you can publish flows on your own domain

Default domain

If you create multiple domains, one of your domains will be selectable as the default domain. The domain that is chosen for this purpose will be used as the base for all other flows in your account, if those flows do not have another domain pointed directly at them.