Embedding a Form

Learn how to embed a form within Form.io

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

Click Here 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

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 Importing the form into another project.

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.

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

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. Navigate to JSFiddle
5. Paste the Quck Inline Embed script within the HTML editor box of JSFiddle

6. 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

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. Click Here 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.

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.

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

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. Open an IDE like JSFiddle
2. Click the Resouces button within the JSFiddle

3. 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.

   • https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css - Bootstrap is an open-source CSS library used for styling and ensuring the mobile responsiveness of forms
   • https://cdn.form.io/formiojs/formio.full.min.css - CSS file specific to Form.io components
   • https://cdn.form.io/formiojs/formio.full.min.js - 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 Form.io CDNs

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.

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

Embedding Forms Using Other Framework Types

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

Click Here for more information on embedding your forms with other framework types