Custom
A custom question, hosted by you within an iframe.
Formsort supports dozens of question types out of the box. However, in some cases it makes sense for you to implement a custom question type yourself using the Formsort Custom Question API.
A great example of this would be an airline ticket purchasing flow, which at one point requires picking a seat (or multiple seats).
While you could use select buttons in a grid to achieve this within Formsort, backed by an API to fetch the choice options, maintaining the logic of which planes are in your fleet and which seats are available would be much more easily done as part of your existing technical infrastructure.
Instead of having to custom engineer the entire form flow, you can build just the single question you need and plug it into your existing flow, reusing the Formsort questions and logic for the remainder.
For a sample custom question built in Svelte, check out this repo: https://github.com/formsort/sample-custom-question-svelte
The simplest custom content is read only. Once a user sees the content, they will be allowed to continue along in the flow.
This is useful if you have something like a privacy policy you need to show a user, and you don't want to link to it or have to keep the content within Formsort.
To add it, set the Source URL to the URL of your content, and enable Is read-only?.
You yourself host custom content and questions (or use something like a headless CMS to do so). During development, it's recommended to point the Source URL to localhost and view the flow in the Live preview.
Within the custom question settings, you can set the Default width and Default height.
If your content or question is larger than this size, the default behavior is to allow it to scroll. If you'd rather disallow scrolling, you can set the behavior in overflow-y.
The
<iframe>
security model does not allow the containing frame to access your content directly, so Formsort does not know the size of your content if you don't tell it.For example, this snippet would set the size of the question within formsort to the size of the body.
import { setQuestionSize } from '@formsort/custom-question-api';
window.addEventListener('load', () => {
const width = document.body.offsetWidth;
const height = document.body.offsetHeight;
setQuestionSize(width, height);
})
Take care to only call this when your content has fully loaded or rendered (eg, if you're using React, then on the
componentDidMount()
class method or useEffect
hook), and not to make it too big so that the rest of the step it is embedded in becomes unusable.Of course, being able to actually collect data and store it is the essence of form building.
<iframe>
elements may communicate with their containing pages (in our case, the Formsort flow) by passing messages. The Formsort Custom Question API faciliates this with a few methods.To set an answer, use the custom question API's
setAnswerValue
method with the value you want to store. Like answers to other questions in Formsort, this value will be stored at in the answers using the key specified in Answer variable name, you only need to provide the value.If I just had a simple text input, my setup would look like this:
<input id="my-input" />
import { setAnswerValue } from '@formsort/custom-question-api';