Embedding a Form
Learn how to embed a form within Form.io
One of the more powerful features of the Form.io platform is the Form Embedding system. This enables you to build a form using our form builder interface, and then easily embed that form within other websites, CMS's, CRM's, or any other web based platform you may be using.
This will walk you through the process of embedding a form either within your own website or within an application.
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. Provide a form Title, Name, and API Path before creating your form.
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!
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.
This interface shows the two most flexible and powerful form embedding strategies; Quick Inline Embedding and JavaScript Embedding. We can easily cover both of these methods using a common tool such as JSFiddle. To get started, navigate to https://jsfilddle.net where we will be able to visualize how the Form.io embedding works. We will start by embedding our form using the Quick Inline Embedding system.
By far the easiest way to embed this form is to use the Quick Inline Embed feature, which can be seen on the right side of the Embed page.
Quick Inline Embedding
With this method, we can simply copy the code within the text area, and past this directly within the HTML section of the JSFiddle code.
This is very similar to how you would embed this form within a CMS or any other website framework. You would simply copy and paste this code wherever on the HTML page you would like to see this form.
There are MANY options available to the Quick Inline Embed that enables advanced functionality (such as different CSS frameworks, redirects, custom logic, etc). To find out more information, please check out the Quick Inline Embed Users Guide.
The next way we can embed is to use our JavaScript embed.
We can demonstrate this more advanced form of embedding within our same JSFiddle. Let's 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.
This brings in the CSS and JavaScript dependencies needed to render a Form.io form within the Bootstrap CSS framework.
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
For more information about JavaScript embedding, please check out our JavaScript Embedding Users Guide.
We are now ready to move onto building a whole application.
Last modified 9mo ago