Form Embedding

How to embed a Form.io form within your application.

The Form.io platform is an advanced JavaScript platform that enables Developers and Non-Developers alike to build forms and easily embed them within their own applications and websites. There are multiple ways that we offer the embedding of our forms, ranging from the non-technical, yet powerful, Quick Inline Embedding, to the more advanced JavaScript embedding. All of the Form.io components are embeddable, and this documentation will outline all the ways you can embed a form.

Quick Inline Embedding

By far the easiest way to embed a form within your application is to use the Quick Inline Embedding mechanism. This provides a one-line code snippet that is capable of embedding a form directly inline within a browser page. To embed a form, you simply copy and paste the following code directly in the place on your HTML website you would like to see the form.

<script src="https://cdn.form.io/formiojs/formio.embed.js?src=https://examples.form.io/example"></script>

You can change the form you embed by simply changing the https://examples.form.io/example string to the URL of your Form. This can be found by navigating to your form, and then clicking on the "link" symbol next to the form name as shown below.

If you wish to have an easy interface to configure this Embed, then please check out our online Quick Inline Embed Configurator.

You can also click on the Embed tab within every form so see an interface that allows you to easily configure this embed code so that you can copy and paste this into your application. There are a number of advanced options that you can use to configure how the embedded form behaves by adding Query parameters on the "src" URL of the script tag. For example, if you wish to load all the dependent CSS libraries along with the embed code, you can add the following to the end of the embed src like so.

...?src=https://examples.form.io/example&libs=true"></script>

Here is a list of all available options you can pass into this embed script along with more advanced functionality.

Quick Inline Embed Query Params

The following is a list of query parameters that can be provided to the Quick Inline Embed src string as shown in the example above.

Parameter	Description	Default
src	(Required) The form url you wish to embed. If you use the form parameter, then this parameter is not required.
libs	Used to load all dependent CSS libraries to render the form. This also renders the form within a ShadowDOM which isolates the CSS and rendering of the form so that no outside styles will collide with the form. This is ideal if you wish to embed a form within a CMS such as Wordpress or Drupal. Set to "true" if you wish to enable this feature.	false
template	This determines the CSS template to use when rendering the form. The available templates are as follows. - [empty]: Render the form in the default Bootstrap 4 template - uswds: Render the form in USWDS template - semantic: Render the form in the Semantic template.
class	The default "wrapper" class to include on the outside element of the rendered form.	formio-form-wrapper
project	The Project this form is associated with. This is needed along with the "base" parameter if you are planning on uploading files. This is because the renderer needs to determine the correct project url to upload the file against. Example: "https://examples.form.io" for our Hosted platform.
base	The API base for this Form.io platform behind the form. For example: "https://api.form.io" is the value for our Hosted platform.
submit	The endpoint you would like to POST the submission toward. This allows you to send the submission to other forms, or other endpoints other than the default "form" submission endpoint.
debug	Enable debug mode. Adds a number of console.log records to the browser on how this form is progressing through the embedding code.	false
redirect	The URL you would like to redirect to after they have finished submitting the form. For example, you could provide a "thank you" page URL as the value of this parameter.
return	Alias of "redirect"
script	This allows you to change the location of the formiojs renderer script.	This url
style	This allows you to change the location of the formiojs renderer style	This url

Advanced Usage

In addition to being able to control the Quick Inline Embed through the use of parameters, you can also control the embedding through a use of a configuration that is added before the inline embed code. This code uses the global FormioConfig to tell the embedding script how you would like to inject within the form rendering process. The following shows an example of adding an after render handler to trigger once the form has finished rendering.

<script type="text/javascript">
window.FormioConfig = {
  after: function(instance) {
    instance.on('change', function(changed) {
      // This is triggered every time something on the form changes.
      console.log(changed);
    });
  }
};
</script>
<script src="https://cdn.form.io/formiojs/formio.embed.js?src=https://examples.form.io/example"></script>

The following parameters can be used within the FormioConfig variable to control the embedded flow.

FormioConfig.before

This is a callback that is executed before the Form is rendered. This provides a good opportunity to make modifications to the Formio renderer class as well as the configurations that are going to be passed to the renderer before the rendering occurs.

Example 1: Extend a method for a component.

This next example shows how a method within a component can be extended or overridden to provide custom functionality.

<script type="text/javascript">
window.FormioConfig = {
  before: function(Formio, element, config) 
    // Override the checkbox setValue method like so.
    var setValue = Formio.Components.components.checkbox.prototype.setValue;
    Formio.Components.components.checkbox.prototype.setValue = function(value) {
      console.log('The checkbox value has been set!');
      return setValue.call(this, value);
    };
    
    // This is the wrapper element for the renderer.
    console.log(element);
    
    // Override a configuration. Like forcing a language setting.
    config.config.language = 'sp';
  }
};
</script>
<script src="https://cdn.form.io/formiojs/formio.embed.js?src=https://examples.form.io/example"></script>

Example 2: Modifying a template

This next example uses the template system to modify the "input" template to provide a wrapper around all inputs rendered by the renderer. All templates can be found by going to https://github.com/formio/formio.js/tree/master/src/templates/bootstrap. This example shows how we can add a wrapper around all of the inputs within the renderer.

<script type="text/javascript">
window.FormioConfig = {
  before: function(Formio, element, config) {
    var inputForm = Formio.Templates.current.input.form;
    Formio.Templates.current = {
      input: {
        form: (ctx) => {
          return '<div class="input-wrapper">' + inputForm(ctx) + '</div>';
        }
      }
    };
  } 
};
</script>
<script src="https://cdn.form.io/formiojs/formio.embed.js?src=https://examples.form.io/example&libs=true"></script>

FormioConfig.after

This is a callback that is called after the form is done rendering. This is useful if you wish to register for certain form events and then perform actions based on those events, like so.

Example:

<script type="text/javascript">
window.FormioConfig = {
  after: function(instance) {
    instance.on('change', function(changed) {
      // This is triggered every time something on the form changes.
      console.log(changed);
    });
  }
};
</script>
<script src="https://cdn.form.io/formiojs/formio.embed.js?src=https://examples.form.io/example"></script>

FormioConfig.config

This allows you to alter the Renderer configuration that is passed into the Formio.createForm method. This is useful if you wish to provide a number of translations into the renderer like so.

Example:

<script type="text/javascript">
window.FormioConfig = {
  config: {
    language: 'sp',
    i18n: {
      sp: {
        'First Name': 'Nombre de pila',
        'Last Name': 'Apellido'
      },
      ch: {
        'First Name': '名字',
        'Last Name': '姓'
      }
    }
  }
};
</script>
<script src="https://cdn.form.io/formiojs/formio.embed.js?src=https://examples.form.io/example"></script>

FormioConfig.form and FormioConfig.submission

The form and submission configuration allows you to provide the form or submission in JSON format to the renderer. If the form is provided, then the src is no longer required and renders the form in JSON format. If the submission is provided, then it is used to automatically populate the form with that submission data.

Example:

<script type="text/javascript">
window.FormioConfig = {
  config: {
    readOnly: true
  },
  form: {
    components: [
      {
        type: 'textfield',
        key: 'firstName',
        label: 'First Name'
      }
    ]
  },
  submission: {
    data: {
      firstName: 'Travis'
    }
  }
};
</script>
<script src="https://cdn.form.io/formiojs/formio.embed.js"></script>

FormioConfig.libs

This configuration allows you to configure the URL for all the libs that are loaded within the renderer using the libs query parameter. The libs are defined and can be overridden, as follows.

<script type="text/javascript">
window.FormioConfig = {
  libs: {
    uswds: {
      js: 'https://cdn.jsdelivr.net/npm/uswds@2.10.0/dist/js/uswds.min.js',
      css: 'https://cdn.jsdelivr.net/npm/uswds@2.10.0/dist/css/uswds.min.css'
    },
    fontawesome: {
      css: 'https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css'
    },
    bootstrap: {
      css: 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css'
    }
  }
};
</script>
<script src="https://cdn.form.io/formiojs/formio.embed.js"></script>

IFrame Embedding (fallback)

The Form.io Form Viewer can be used to embed forms using iframes. It contains a special library called Seamless which will auto resize the iframe to the size of the form within the Parent page (the one doing the embedding). You can change the form to embed mode using the iframe=1 parameter on the URL, which is what is used within the {{ site.formio }} embed code as follows.

<script type="text/javascript">(function a(d, w, u) {var h = d.getElementsByTagName("head")[0];var s = d.createElement("script");s.type = "text/javascript";s.src = "https://portal.form.io/lib/seamless/seamless.parent.min.js";s.onload = function b() {var f = d.getElementById("formio-form-57aa1d2a5b7a477b002717fe");if (!f || (typeof w.seamless === u)) {return setTimeout(b, 100);}w.seamless(f, {fallback:false}).receive(function(d, e) {});};h.appendChild(s);})(document, window);</script>
<iframe id="formio-form-57aa1d2a5b7a477b002717fe" style="width:100%;border:none;" height="600px" src="https://formview.io/#/examples/example?iframe=1&header=0"></iframe>

JavaScript Embedding

JavaScript Embedding is covered in great detail in the Form Renderer section of our help documentation.

Form Builder Embedding

Form Builder embedding is covered in great detail in the Form Builder section of our help documentation.

Framework Embedding

Form.io also supports embedding a form in many UI frameworks such as Angular, React, and Vue. These are discussed in great detail in the Frameworks section.