How to Embed a Form That Runs Your Workflow on Any Website

A form that ends in an inbox has only done half its job. Somebody still has to read the email, copy the answers into the right system and chase whoever needs to act on them.

In Flomation the answers go straight to the work. The form is the first step of a flow, so pressing Submit can create the record, ask for an approval, take a payment and tell the right team, before anyone has opened an email.

This guide builds that form, connects it to a flow, and puts it on your own website with one script tag and one line of HTML. No build step, no framework and no iframe.

Step 1: Start a flow with a Form Trigger

Create a new flow in the editor and add a Form Trigger from the Triggers section of the node menu. Every flow starts with a trigger, the thing that happens, and for this one it is somebody submitting your form.

Select the Form Trigger to open its properties. The form builder lives there: the form's title and description, its pages, and the questions on each page.

Step 2: Build the form

Add questions and choose a type for each one. Give every question a clear label and a short field name, because the name is how the rest of the flow refers to the answer. The builder covers far more than text boxes:

• Everyday fields: text, email, phone, number, date, dropdowns, radio buttons, checkboxes and longer free text.
• Richer ones: ratings, sliders, file uploads, addresses, signatures, licence plates, grids and data tables.
• Layout: section headers, dividers and information text, so a long form reads as a series of short steps.
• Pages: split the form into pages, and people move through them with Next and Back.
• Conditional visibility: show a question, or a whole page, only when earlier answers call for it. Hidden answers are stripped on the server too, so nobody can sneak a value through a branch they never saw.
• Payments: a Payment field takes the fee in the form, with the amount fixed or worked out by a flow from the answers so far.
• Translations: add languages and translate each question, and the form follows the visitor's language.

Finally, choose what happens after submission: show a thank-you message, reset the form for another response, or redirect to a page of your own.

Step 3: Make the answers do the work

This is where a Flomation form stops being a form. Every step you wire after the Form Trigger can use the answers by their field names, so a question named email is ${email} and one named postcode is ${postcode}.

A worked example: a quote request

Picture a building firm's Request a quote form, asking for a name, email, phone number, postcode, the kind of job and a rough budget. Here is what happens in the seconds after someone presses Submit:

• The customer gets an email straight away confirming the request and saying when to expect a call, addressed to them by name.
• A new deal appears in the CRM with every answer already filled in, so nobody types anything twice.
• An If step checks the budget. Small jobs go straight to the scheduling team in Slack. Anything over £10,000 goes to a Human Approval step, which messages the director with Approve and Decline buttons and waits for an answer.
• Once it is approved, the surveyor on call gets a text message with the postcode and the customer's number.

Six steps on a canvas, no code, and a request that used to wait in an inbox until Monday is with the right person within a minute. The same pattern covers a job application, a supplier check against Companies House, a booking or a support request. The form collects the answers and the flow does the rest.

Save the flow. Saving is what registers the trigger, and the form is live straight away at its own address, shown in the Form Trigger's properties. It looks like https://launch.flomation.app/form/ followed by a long ID. That page works on its own, as a link to share or a QR code to print, and the ID at the end is your form ID for the next step.

Step 4: Let your website use it

A form on its own page is easy to share, but people trust a form that sits inside your own site, in your own colours, next to your own copy. Putting it there needs one thing: a way of telling Flomation that your site is allowed to show it, so nobody else can lift the form onto theirs. That is an embed key, and it takes a minute to set up on the Embed SDK page in the editor:

• Create a key and give it a name you will recognise later, such as Marketing site. Copy the publishable key it shows you; it starts pk_.
• Under Allowed origins, add the address of every site the form will appear on, for example https://www.example.co.uk. It has to match exactly, including the https:// and any port. Plain http:// is accepted for localhost only, which is handy while you build the page.
• Under Embeddable resources, search for the flow your form belongs to and switch it on.

The publishable key is designed to sit in your page's HTML, where anyone can read it. On its own it does nothing: Flomation only answers it from the origins you listed, and only for the flows you switched on. Copy the key onto another site and it is refused.

Step 5: Drop it in

Add the script once, anywhere on the page, and put the element where the form should appear:

<script src="https://launch.flomation.app/embed/v1.js" defer></script>

<flomation-form
  form="YOUR_FORM_ID"
  key="pk_YOUR_PUBLISHABLE_KEY">
</flomation-form>

That is the whole integration. The form loads from Flomation, checks answers as people type, follows your conditional rules and pages, takes payments, and submits to your flow. A few optional attributes cover the common adjustments:

• lang chooses the language, for a form you have translated. Otherwise it follows the visitor's browser.
• hide-title leaves out the form's own title and description, when your page already has a heading.
• hide-branding removes the small Powered by Flomation line.

Match your site's look

The form draws itself inside its own sealed-off area of the page, so your site's styles cannot break it and its styles cannot leak into your site. It picks up your page's font by default, and you theme the rest with a handful of settings:

flomation-form {
  --flo-accent: #0b5cad;       /* buttons and highlights */
  --flo-accent-text: #ffffff;  /* text on the accent colour */
  --flo-radius: 6px;           /* corner rounding */
  --flo-font: "Inter", sans-serif;
}

Know when someone submits

The element announces a successful submission, which is the moment to record a conversion in your analytics:

document.querySelector("flomation-form")
  .addEventListener("flomation:submitted", (event) => {
    // event.detail.executionId identifies the run the submission started
    gtag("event", "generate_lead");
  });

Which questions the embed draws

The embedded form draws text, email, phone, web address, password, number, date and long text fields, dropdowns, radio buttons, checkboxes, section headers, dividers, information text and payments. A form that uses any other type, such as a file upload, a signature or a rating, shows a link to its hosted page instead, so nobody is left with a form they cannot finish and no question is quietly dropped. The hosted page draws every type.

If the form does not appear

• This form could not be loaded usually means the site's address is not in Allowed origins. Check the exact spelling, https versus http, and the port.
• The same message appears when the form's flow is not switched on under Embeddable resources, or the key has been copied with a character missing.
• Opening the HTML file straight from your computer will not work, because a file has no origin to allow. Serve it from a local web server on localhost instead.
• A message asking for form and key attributes means one of them is missing from the element.

Once it is in place, everything else happens in the editor. Change a question, add a page or send the answers somewhere new, save, and every site that embeds the form shows the new version on its next load, without anyone touching the website again.