---
description: Learn how to embed a form within Form.io
---

# Embedding a Form

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.&#x20;

## 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** ](form-creation)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.&#x20;

![](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F3NQRCBeVmvbrHckzbJmH%2FFormEmbedding.jpg?alt=media\&token=27105d37-8825-4990-9e9c-8f3e45c2e0c0)

### **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**](../../projects/project-ui#forms-and-resources) the form into another project.

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FKNDOvan4QldsxkzJKqvi%2Fformembedurl.jpg?alt=media&#x26;token=398996e0-862a-45ae-b5d6-b3d8d0849524" alt=""><figcaption></figcaption></figure>

### **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.&#x20;

![](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FJegkuHqqh936JI23PJLJ%2FFramework.jpg?alt=media\&token=14c20b9f-f713-4e01-910e-b36a31f69a2c)

Since some users reading this will not have an application ready to test Form.io's Embedding capabilities, an online IDE tool like [**JSFiddle**](https://jsfiddle.net/) 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**.&#x20;

### 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.&#x20;

{% embed url="https://www.loom.com/share/b68942e2033646f588029d389d902b1d" %}

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**](https://jsfiddle.net/)
5. Paste the **Quck Inline Embed** script within the **HTML** editor box of **JSFiddle**
6. Click **Run**&#x20;

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

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FRZaOU5gG2qvigovHYJIe%2FJSFiddle.jpg?alt=media&#x26;token=00c2b805-bb0a-44c5-9ccd-81b8e6759ee0" alt=""><figcaption></figcaption></figure>

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**](https://help.form.io/developers/form-development/rendering#advanced-usage) 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.&#x20;

[**Click Here**](../../../developers/form-development/rendering#quick-inline-embedding) 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 [**Resources**](#user-content-fn-1)[^1] are manually added to the application as well as the **HTML Element** and the JavaScript embed code will be attached to.

{% embed url="https://www.loom.com/share/e41590bddae0455d8573ec658b2f8dd8" %}

Follow the guide below to utilize JavaScript Embedding

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

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FGVz9JxbcNsWWOyZuTvUY%2Fembedresourcesurls.jpg?alt=media&#x26;token=92c08434-b51c-43b4-94e6-4fd43f1f67b1" alt=""><figcaption></figcaption></figure>

2. Open an IDE like [**JSFiddle**](https://jsfiddle.net/)
3. Click the Resouces button within the **JSFiddle**
4. 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.&#x20;
   * [**https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css**](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**](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**](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.

{% hint style="info" %}
Navigate to the following link for more information about the [**Form.io CDN**s](../../../faq/faq#what-are-the-form.io-cdns)
{% endhint %}

![](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FQdvM3DLMVQ0pu2T9GJCA%2Fjsfiddleresources.jpg?alt=media\&token=ff45cada-d8d6-4b05-adfb-4d92a86134f9)

5. 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>`

![](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FLdzstZMKHvP4wUFM1rFX%2Fjsfiddlehtml.jpg?alt=media\&token=111ebd9c-0f3e-4a95-8531-47b51fd15bad)

6. Within the **Embed** tab of the form, copy the form element script which will be specific to your Project URL.&#x20;

![](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FsbZWqgiLv4pXg3ylextt%2Fformelement.jpg?alt=media\&token=c00866be-a4f6-4364-b324-c28fa5c27263)

7. 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'); };`

![](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FnuZnlsz4SSDt6HTVm8tC%2Fjsfiddleelement.jpg?alt=media\&token=35680c21-e243-4339-8e5d-9525d2c747ad)

8. 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**](../../../developers/form-development/rendering#javascript-embedding) 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.&#x20;

[**Click Here**](../../developers/javascript-development/frameworks) for more information on embedding your forms with other framework types

[^1]: Resources are required by the application to run the form, not related to Form.io Resources
