Form Embedding

The first thing that we recommend anyone doing to understand the concepts behind Form.io is to take a form they build within their project, and then embed that form within a separate application.

This will walk you through the process of embedding a form either within your own website or within an application.

Create a Form

In order to get started, let’s first create a form within our project by clicking on the Forms section and then click on Create Form. You will be presented with the following screen.

There are two kinds of forms that are supported with Form.io

  • API Web Form: This is the typical webform that you would embed within an application that is also mobile responsive.
  • PDF Forms: This allows you to convert a PDF document into an API driven PDF form, as well as provide a way to download form submissions as PDF documents.

For this demonstration we will click on API Web Form which we will be presented with the following interface.

At this point, we urge you to play around and create any form that you would like to create. Once you create the form you would like, you can then click on the Save Form button to save the form and create it within your Forms section.

We are now ready to embed our form!

Embed your Form

Now that we have the form created, we see all of the options that we have available for embedding by clicking on the Embed tab.

There are many ways we can embed a form, and most of them are framework specific. However, for this demonstration, we can see the most basic forms of embedding by clicking on the Framework dropdown and selecting Custom

To demonstrate this embed, we will now go to the popular website called JSFiddle @ https://jsfiddle.net/

To start off, we will first bring in the Resources (different than Form.io resources) that are needed to make the forms function. Click on the Resources section on the left-hand side of the screen and then provide the following URL’s.

  • https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css
  • https://unpkg.com/formiojs@latest/dist/formio.full.min.css
  • https://unpkg.com/formiojs@latest/dist/formio.full.min.js

Next, we will add the following HTML snippet within the HTML section.

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

as follows…

We will now copy the Embed URL of our form that we just created within Form.io.

Finally, we will write the following code within the JavaScript section of our fiddle.

Formio.createForm(document.getElementById('formio'), 'https://eventmanager.form.io/example');

You will change the URL of the form above with the Embed URL you copied earlier, then press Run

Congratulations! You just embedded your first Form.io form! We are now ready to move onto building a whole application.