Headless Form

You can embed a FlowGenie form inside your own application and handle the UI yourself. The steps are straightforward:

1. Build the form using the visual form builder inside FlowGenie.
2. Fetch the configuration with a GET request:

GET https://app.flowgenie.pro/api/form/[id]

The response contains a JSON object similar to the structure used in the form builder. It has an array of pages, each containing sections, which in turn contain an array of rows of questions.

3. Render the form in your app by looping through this configuration. Use the type of each question to decide which input to render. Use the question key as the field name when collecting values.

4. Submit responses back to the same endpoint with a POST request.

const res = await fetch(`https://app.flowgenie.pro/api/form/${formId}`);
const formConfig = await res.json();
 
function renderForm(cfg) {
  return cfg.pages[0].sections.map(section => (
    section.questions.flatMap(row =>
      row.map(q => (
        /* build the input based on q.type and q.key */
      ))
    )
  ));
}
 
// when ready to submit
await fetch(`https://app.flowgenie.pro/api/form/${formId}`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(/* object keyed by question keys */)
});

This approach lets you keep complete control over the look and feel while relying on FlowGenie for form management and submission handling.