LogoLogo
Getting StartedDevelopersDeployment GuideGet Help
  • Quick Links
  • Welcome to Form.io
    • Getting Started With Form.io
    • Launch a Form
    • Overview of Form.io
  • Developer Tool Ecosystem
    • PDF Solution
    • Enterprise Form Builder
    • Form View Pro
    • The Security Module
    • Accessibility Compliance Module
    • Developer License
    • SQL Connector - Deprecated
    • Integration Libraries
    • Form.io CLI Tool
  • User Guide
    • Introduction
    • Form.io Developer Portal
    • Teams
    • Projects
      • Project UI
      • Project Settings
      • Stages
      • Multi-Tenancy
    • Resources
      • ResourceJS
    • Forms
      • Form Creation
      • Form Types
      • PDF Forms
      • Embedding a Form
      • Form Revisions
      • Form Settings
    • Form Building
      • Form Builder UI
      • Form Components
        • Component Settings
        • Basic Components
          • Resource as Select Component Data Source
        • Advanced Components
        • Layout Components
        • Data Components
        • Premium Components
          • Nested Forms
        • Custom Components
      • Logic & Conditions
      • Existing Resource Fields
      • Actions
    • Submissions
      • Accessing Submissions
      • Importing Submissions
    • Form.io eSignature - Coming Soon
    • Form.io Reporting Module
    • PDF Template Designer
    • Form View Pro
    • Form Manager
    • Enterprise Form Builder Module
      • Installation
      • User Guide
  • Developer Guide
    • Introduction
      • Application Development
      • API Documentation
    • Form Development
      • Form Renderer
      • Form Builder
      • Form Embedding
      • Form Evaluations
      • Form Templates
      • Custom Components
      • Translations
    • JavaScript Development
      • JavaScript SDK
      • JavaScript Frameworks
      • JavaScript Utilities
    • Authentication and Authorization
      • SAML
      • OAuth
      • LDAP
      • Resource Based Authentication
      • Email Authentication
      • Two-Factor Authentication
    • Roles and Permissions
      • Field Match-Based Access
      • Field-Based Resource Access
      • Group Permissions
    • Integrations
      • Email Integrations
      • File Storage
      • Google Developer Console
      • eSign Integrations
      • Relational Databases
    • Modules
    • Fetch Plugin API
    • CSS Frameworks
    • Offline Mode
    • Audit Logging
  • Deployments
    • Self-Hosted Deployment
      • Local Deployment
        • Local File Storage
      • Kubernetes
      • Cloud Deployment
        • AWS Deployment
          • AWS Lambda
          • Form.io/AWS Elastic Beanstalk End-To-End Encrypted Deployment
        • Azure Deployment
          • Azure App Service
            • Azure MSSQL Connector - Deprecated
          • Azure Virtual Machine
          • Azure Kubernetes Service
          • Set up the DB
        • GCP Deployment
          • GCP Cloud Run
      • On-Premise Deployment
      • Enterprise Server
      • PDF Server
    • Deployment Configurations
      • DNS Configuration
      • Load Balancer Configuration
    • Licenses
      • License Management
      • Library Licenses
    • Portal Base Project
      • Portal SSO
      • Portal Translations
    • Maintenance and Migration
      • Changes to Premium Libraries
  • FAQ
    • FAQ
    • Tutorials & Workflows
      • Password Reset
      • Dynamic Select Filtering
      • Approval Workflow
      • SSO Email Token
      • Embedding A Video
      • Data Source Validation
      • Select Data Source Options
      • Nested Form Workflows
        • Nested Wizard Forms
      • Save as Draft
      • Role-Based Conditions
      • Custom Component
      • Dynamic Radio and Select Box Values
      • Override CKEDITOR
    • Errors
    • Examples
    • License Utilization Checks
    • Glossary of Key Concepts
  • Contact Us
Powered by GitBook
On this page
  • Create a Form
  • Form Embed Tab
  • Form Embed URL
  • Framework Type
  • Embed Methods
  • Quick Inline Embed
  • JavaScript Embedding
  • Embedding Forms Using Other Framework Types

Was this helpful?

  1. User Guide
  2. Forms

Embedding a Form

Learn how to embed a form within Form.io

PreviousPDF FormsNextForm Revisions

Last updated 2 months ago

Was this helpful?

One of the most powerful features of the Form.io platform is the Form Embedding system. Form Embedding empowers users to create a form using Form.io's user-friendly form builder interface and effortlessly integrate it into various websites, CMSs, CRMs, or any other web-based application.

Create a Form

In order to get started, first create a form within a project. There are two kinds of forms that are supported by Form.io

  • API Web Form: The most common form type used within the Form.io Platform. These forms are mobile responsive and are typically embedded in web-based applications.

  • PDF Forms: Converts a PDF document into an API-driven PDF form

for more information on creating a form using the Form.io platform.

Form Embed Tab

The Embed section provides various ways to embed the form into an application or website as well as customizing the embed URL to suit business needs.

Form Embed URL

Framework Type

Selecting a Framework provides inline instructions on installing the Form.io module or plugin required for that framework as well as the embed code for the selected framework type. As shown below, Form.io streamlines various framework types, however, it's important to note that form embedding isn't restricted to these front-end frameworks:

JavaScript Stand-Alone Form - Provides an iFrame embed that supports a self-contained embed of the form Angular AngularJS React Vue.js Aurelia Custom

This documentation outlines the process of embedding a form inside an application using the JavaScript/Custom framework type.

Embed Methods

There are two main flexible and powerful strategies for embedding forms; Quick Inline Embedding and Framework Embedding.

Quick Inline Embed

The easiest way to embed forms into your application or website is to use the Quick Inline Embed option which is found at the right side of the Embed page. This code allows you to embed your forms inside the HTML of your application or website, without the need for a specific framework type.

The Quickline Inline Embed is a script made up of two parts:

1 The formio.js library required to render the form.

<script src="https://portal.form.io/formio.renderer.min.js?

2 The project and form URL source that the formio.js library will render.

src=https://myproject.form.io/myform&libs=true">

Together, these two parts make up the script that can fully render the form using the formio.js library within an application. <script src="https://portal.form.io/formio.renderer.min.js?src=https://myproject.form.io/myform&libs=true">

Try this out by following the guide below:

  1. Create a new Form or use an existing one

  2. Click the Embed tab of the form

  3. Copy the Quick Inline Embed script

  4. Paste the Quck Inline Embed script within the HTML editor box of JSFiddle

  5. Click Run

You should see your form being rendered in the bottom right of the JSFiddle application.

This is very similar to how you would embed a form within an actual application or website! Simply copy and paste the Quick Inline Embed code within any HTML page of the app or website.

Inline Embed Configurations

To further extend the Quick Inline Embed functionality, configurations can be added to the embed code to further enhance the form and its functionality.

Template: Choose the CSS framework (styling) the renderer will use to display the form

Click Advanced Settings for additional options

There are many other options that can be added to the Quick Inline Embed script to further customize the form and how it behaves within the application.

JavaScript Embedding

JavaScript embedding is a more advanced form embedding method that gives the user more granular control over the embedding process and removes the dependency of the Form.io CDN the Quick Inline Embed method utilizes. The CSS and renderer are manually added to the application as well as the HTML Element and the JavaScript embed code will be attached to.

Follow the guide below to utilize JavaScript Embedding

  1. Within the Embed tab, copy the URLs within the Include Formio + Bootstrap section

  1. Click the Resouces button within the JSFiddle

  2. Individually paste the copied Resource URLs from step 1 to the JSFiddle and click the + button. These Resources bring in the CSS and JavaScript dependencies needed to render a Form.io form within the Bootstrap CSS framework. The order of your CSS matters, remember to include any custom CSS files after the form.io style sheet.

  1. Add the HTML Element within the HTML section of the JSFiddle. This will dictate where the form will be placed within the application or website.

    • <div id="formio"></div>

  1. Within the Embed tab of the form, copy the form element script which will be specific to your Project URL.

  1. Back to the JSFiddle, paste the Form Element Script in the Javascript code block. Since the Form Element Script is being added to a Javascript code block, we can remove the script code in lines 1 and 5. E.G window.onload = function() { Formio.createForm(document.getElementById('formio'), 'https://myproject.form.io/myform'); };

  1. Within the JSFiddle, click Run to render the Form.

Embedding Forms Using Other Framework Types

In addition to Javascipt, Form.io streamlines the embedding process for many other front-end frameworks.

The form Embed URL is generated when a form is created. This URL is used to embed the form into an application and represents the JSON Schema of the form. Opening the URL within a browser, or clicking the Preview JSON button, will literally show the JSON schema of the form. This URL is also used when the form into another project.

Since some users reading this will not have an application ready to test Form.io's Embedding capabilities, an online IDE tool like can be utilized to test and run JavaScript code snippets inside an application-like environment.

Navigate to

Redirect: The URL the form will be directed too after a submission has been made Submission Endpoint: The endpoint the submission will POST to. This allows the ability to send the submission to endpoints other than the default submission endpoint. Inherit Page CSS: When checked, the form will inherit the CSS of the page it's embedded into. When unchecked, the form loads all dependent CSS libraries to render the form. Debug Mode: Adds a number of console.log records to the browser on how this form is progressing through the embedding code. A great setting to use when trying to troubleshoot forms that are not behaving as desired. Custom Configurations: Add configurations in JSON format for the global FormioConfig variable to control the embedded flow. for more information Before Render Handler: Provide a callback that is executed before the Form is rendered. After Render Handler: Provide a callback that is called after the form is done rendering.

for a full list of customization options that can be added to the Quick Inline Embed.

Open an IDE like

- Bootstrap is an open-source CSS library used for styling and ensuring the mobile responsiveness of forms

- CSS file specific to Form.io components

- the formio.js library is the core renderer library responsible for translating the JSON Schema into the dynamic webform.

Navigate to the following link for more information about the

This guide just scratches the surface of the JavaScript embedding method. Please check out the for more information.

for more information on embedding your forms with other framework types

Importing
JSFiddle
JSFiddle
Click Here
Click Here
JSFiddle
https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css
https://cdn.form.io/formiojs/formio.full.min.css
https://cdn.form.io/formiojs/formio.full.min.js
Form.io CDNs
JavaScript Embedding Users Guide
Click Here
Click Here