Building forms
Templates & navigation
Insert URL parameters, onload data and table rows into fields, links and webhook URLs — and move between forms without reloading.
Template syntax#
| Template | Value |
|---|---|
{{params.name}} | A URL query parameter (?name=…) or a value passed by navigation. |
{{data.user.email}} | A path into the onload response's data. |
{{user.email}} | Same as above, without the data. prefix. |
{{row.id}} | The clicked table row (row actions only). |
{{index}} | Item number, in array item labels. |
Paths use dots. Missing values — and the values 0 and false — render as an empty string.
Where templates work#
| Works | Does not work |
|---|---|
defaultValue, displayValue, linkUrl, buttonUrl, linkTargetParams, buttonTargetParams, row-action params, buttonWebhookUrl, row-action webhookUrl (values are URL-encoded) | The form's submit webhook URL and onload webhook URL, labels, placeholders, options |
Button and row-action webhook URLs are filled in on the server, and the result must stay on the same host you configured — a template can change the path or query, never the destination.
Passing values in the URL#
Any page that embeds a form can pass values through its query string:
https://your-site.com/signup?plan=Pro&utm_source=newsletter{ "id": "plan", "type": "select", "name": "plan", "label": "Plan", "options": ["Starter", "Pro"], "defaultValue": "{{params.plan}}" }
{ "id": "src", "type": "hidden", "name": "source", "defaultValue": "{{params.utm_source}}" }Navigating between forms#
Links with linkAction: "navigate", buttons with buttonAction: "navigate" and form row actions replace the current form with another of your forms, in the same container, without a page load. The browser's back button (and linkAction: "back") returns to the previous form.
// Step 1
{ "id": "go", "type": "link", "label": "Next: company details", "linkAction": "navigate",
"linkTargetForm": "signup-company", "linkTargetParams": { "email": "{{params.email}}" } }
// Step 2 (form "signup-company")
{ "id": "email", "type": "hidden", "name": "email", "defaultValue": "{{params.email}}" }From your own JavaScript: f2wf.navigateToForm("signup-company", { email: "ada@example.com" }).
Navigation params reach templates, but not the target form's onload webhook, and they aren't added to the page URL. See Known limitations.