Single Page App With A Form

Building a form is one task. Deploying that form so people can actually fill it out is a separate task entirely. Most form platforms assume you will embed the form into an existing application or web page, which is generally true for Form.io as well. But what if you just need a form online, right now, with a shareable URL, especially for testing use-cases?

Form.io provides two paths to instant deployment. The Launch feature gives you a form SPA in your self-hosted environment. The Quick Inline Embed gives you a single line of code that renders a complete form anywhere HTML runs. Both approaches turn your form JSON schema into a functional data collection endpoint without requiring you to build or deploy an application.

BOTH The Form.io SaaS and self-hosted deployments include the Launch feature that gives you a form SPA.

Form View Pro: The Form.io SaaS Form SPA

Every form in Form.io has a Launch tab. Click it, click “Go To Form,” and your form is live at a URL like:

https://pro.formview.io/#/yourproject/yourform

This is Form View Pro, a minimal single-page application that Form.io hosts for you. It renders your form, handles submissions, and provides basic authentication and submission viewing capabilities. You can share this URL immediately. No deployment, no hosting configuration, no application code.

Form View Pro is not intended as a production end-user application. It is a lightweight testing and sharing tool. The Form View Pro documentation explicitly states it is a “boilerplate application” that should not replace a custom end-user facing application. But for internal tools, quick prototypes, or collecting a few responses while your real application is under development, it eliminates deployment friction entirely.

Configuration Through Query Parameters

The Form.io SaaS Form View Pro URL or the self-hosted URL accepts query parameters that customize the rendering:

https://pro.formview.io/#/yourproject/yourform?theme=materia&header=0

Available parameters include:

  • theme: Apply any Bootswatch theme (cosmo, darkly, flatly, materia, etc.)
  • css: URL to a custom CSS file
  • js: URL to a custom JavaScript file
  • header: Set to 0 to hide the header
  • return: URL to redirect after submission
  • iframe: Remove padding for iframe embedding
  • branding: Set to false to remove Form.io branding (Enterprise)
  • sso: Enable SSO authentication (saml or okta)
  • reset: Clear cached form sessions

These parameters let you customize appearance and behavior without touching application code.

Public Configuration

For persistent customization, set parameters in your project’s Public Configurations (Settings > Public Configurations). Values set here apply to all forms launched from that project, saving you from appending query parameters to every URL.

Make Public / Make Private

The Launch tab includes a “Make Public” button that toggles anonymous submissions. This adds the Anonymous role to the form’s “Create Own Submissions” permission. With anonymous submissions enabled, anyone with the URL can submit the form without authentication. Without it, users must authenticate before the form accepts data.

For quick surveys, feedback forms, or public intake forms, making the form public eliminates authentication friction. For sensitive data collection, keep it private and configure authentication through the standard Authentication Support system.

Quick Inline Embed: One Line of Code

If you need the form in your own HTML page rather than the hosted Form View Pro, the Quick Inline Embed requires exactly one line:

<script src="https://cdn.form.io/formiojs/formio.embed.js?src=https://yourproject.form.io/yourform"></script>

Paste this into any HTML document. The script loads the Form.io renderer, fetches your form JSON schema, and renders the complete form inline. Submissions go to your Form.io project’s API. No additional JavaScript required.

This is a form SPA in a single script tag. The embed script handles:

  • Loading CSS dependencies (add &libs=true to include Bootstrap)
  • Fetching the form schema from your project
  • Rendering the form into the DOM at the script’s location
  • Submitting data to the Form.io API
  • Displaying validation errors
  • Showing submission confirmation

Embed Configuration

The embed URL accepts parameters similar to Form View Pro:

<script src="https://cdn.form.io/formiojs/formio.embed.js?src=https://yourproject.form.io/yourform&libs=true&redirect=https://example.com/thanks"></script>

Key parameters:

  • src: (Required) The form URL to render
  • libs: Load Bootstrap CSS/JS dependencies
  • redirect: URL to navigate after successful submission
  • submission: URL endpoint to POST submissions (override default)
  • debug: Enable console logging for troubleshooting

FormioConfig for Advanced Control

For more control, add a configuration script before the embed:

<script type="text/javascript">
window.FormioConfig = {
  before: function(Formio, form) {
    // Modify form or Formio object before rendering
  },
  after: function(instance) {
    instance.on('change', function(changed) {
      console.log('Field changed:', changed);
    });
    instance.on('submit', function(submission) {
      console.log('Submitted:', submission);
    });
  }
};
</script>
<script src="https://cdn.form.io/formiojs/formio.embed.js?src=https://yourproject.form.io/yourform"></script>

The before callback executes before rendering. The after callback receives the form instance after rendering completes, letting you attach event handlers or manipulate the form programmatically.

JavaScript Embedding for Full Control

When you need complete control over form rendering, move beyond the embed script to direct JavaScript:

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
  <script src="https://cdn.form.io/js/formio.full.min.js"></script>
</head>
<body>
  <div id="formio"></div>
  <script type="text/javascript">
    Formio.createForm(document.getElementById('formio'), 'https://yourproject.form.io/yourform')
      .then(function(form) {
        form.on('submit', function(submission) {
          // Handle submission
        });
      });
  </script>
</body>
</html>

This approach loads dependencies explicitly and uses Formio.createForm() to render. The returned promise resolves with a form instance you fully control. This is still simpler than building a traditional form application, but gives you the flexibility to integrate with existing JavaScript frameworks and application logic.

For React, Angular, or Vue applications, Form.io provides dedicated packages (@formio/react, @formio/angular, @formio/vue) that wrap this functionality in framework-native components. See the formio.js GitHub repository for framework-specific documentation.

What “Instant Launch” Does Not Include

Form View Pro and Quick Inline Embed handle form rendering and submission. They do not provide:

  • Custom application workflows (approval chains, multi-step processes beyond wizards)
  • User management UI (registration, password reset flows)
  • Submission management dashboards (beyond the basic Form View Pro submissions view)
  • Custom branding beyond CSS themes (without Enterprise licensing)
  • Integration with external authentication providers (without additional configuration)

For these capabilities, you need to build an actual application using Form.io as the form and data infrastructure. The instant launch features are about rapid deployment, not replacing full application development.

When to Use Each Approach

Use Form View Pro when:

  • Testing a form before embedding it in your application
  • Sharing a form quickly with stakeholders for review
  • Collecting a small number of responses without building infrastructure
  • Running an internal survey or intake form
  • Prototyping a workflow before investing in application development

Use Quick Inline Embed when:

  • Adding a form to an existing static website
  • Embedding a form in a CMS (WordPress, Drupal, etc.)
  • Creating a simple landing page with a form
  • You need the form on your domain but do not need custom logic

Use JavaScript Embedding when:

  • Building a single-page application
  • Integrating forms with your existing JavaScript framework
  • You need programmatic control over form behavior
  • Custom submission handling is required

Build a full application when:

  • Complex multi-form workflows are needed
  • Custom authentication flows are required
  • You need role-based access to different forms and data
  • Submission data drives application logic beyond simple collection

Self-Hosted Form View Pro

Enterprise deployments include Form View Pro as part of the Docker container package. Each deployed environment gets its own Form View Pro instance at:

https://yourserver.com/yourproject/manage/view

This means forms launched from a self-hosted environment stay within your infrastructure. Data never touches Form.io’s hosted services. For organizations with strict data residency requirements, this matters. The form SPA runs entirely on your servers while still providing the instant-launch convenience.

Configuration works identically to the hosted version. Query parameters and Public Configurations customize the rendering. The only difference is the base URL points to your deployment instead of pro.formview.io.

Relationship to Other Features

Instantly launched forms retain all the capabilities of forms built in the portal. A wizard form launches as a multi-page wizard. A form with file uploads handles uploads to your configured storage provider. Validation rules execute client-side. Actions fire on submission.

The launch feature does not strip functionality. It packages the full rendering and submission pipeline into an immediately accessible URL or embed code.

Form Revisions also work with launched forms. When you update a form in the portal and publish a new revision, the launched version reflects the changes immediately. There is no redeployment step. The renderer fetches the current form schema on each load.

The Form SPA Pattern

Form.io enables what might be called the “Form SPA” pattern: a form that is an application unto itself. The JSON schema defines the UI. The Form.io API handles data. The renderer is the runtime. No server-side code, no database configuration, no deployment pipeline.

This works because forms in Form.io are not just UI components. They are JSON-Driven Forms where the schema simultaneously defines the interface, validation rules, and API structure. The renderer interprets this schema client-side. The Form.io server provides the API endpoints. Everything needed for a functioning data collection application exists without writing application code.

For simple use cases, this eliminates the gap between “form is built” and “form is collecting data.” For complex use cases, it provides a starting point that you can extend into a full application when needed.

Common Pitfalls

Forms launched publicly without authentication can be discovered and submitted by anyone with the URL. If you are collecting sensitive data, do not rely on URL obscurity for security. Either keep the form private and require authentication, or treat the data as potentially coming from untrusted sources.

CORS configuration affects whether embedded forms can submit data. If you embed a form on a domain not configured in your project’s CORS settings, submissions will fail. Add your embedding domain to the project’s CORS configuration before distributing the embed code.

The hosted Form View Pro at pro.formview.io is shared infrastructure. For production workloads with high traffic or strict SLA requirements, self-host Form View Pro or build a custom application. The hosted version is for testing and light usage, not enterprise-scale data collection.

Related Resources: