Embedding a Form
Learn how to embed a form within Form.io
Last updated
Learn how to embed a form within Form.io
Last updated
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.
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.
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.
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.
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.
There are two main flexible and powerful strategies for embedding forms; Quick Inline Embedding and Framework Embedding.
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:
Create a new Form or use an existing one
Click the Embed tab of the form
Copy the Quick Inline Embed script
Navigate to JSFiddle
Paste the Quck Inline Embed script within the HTML editor box of JSFiddle
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.
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 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
Within the Embed tab, copy the URLs within the Include Formio + Bootstrap section
Open an IDE like JSFiddle
Click the Resouces button within the JSFiddle
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.
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>
Within the Embed tab of the form, copy the form element script which will be specific to your Project URL.
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'); };
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.
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
