Integration Libraries

Command Line Interface

The Form.io Command Line Interface is the command line interface for Form.io, which allows you to quickly bootstrap full working projects as well as interface with the Form.io API. There are a number of different commands that help you interact with the service, migrate data, as well as deploy projects from one environment to another.

Node.js

Form.io Server

The core API engine behind the Form.io platform is an Open Source API engine that supports the forms, submissions, and access permissions around the data within that platform. You can read through how to get started by visiting the formio/formio Github page.

Click here to learn more

Integration Library

There are many cases when you will need to interface with the Form.io API from within your own Node.js application. This is why we created the Form.io Service library. For example, you can do the following to authenticate a user from within your Node.js application.

var formio = require('formio-service')();
var Form = formio.Form;

// First authenticate.
formio.authenticate('test@example.com', 'password').then(function() {

    // Create a new form instance.
    var form = new Form('https://myapp.form.io/user');

    // Iterate through all the submissions.
    form.eachSubmission(function(submission) {

        // Console log the submissions.
        console.log(submission);
    });
});

Go here to learn more

Webhook Receiver

Form.io has the ability to fire off Webhooks whenever a form is submitted, but that webhook must still be received by a REST interface. That is why we build the Webhook Receiver which provides a starting point to having a receiver capture the webhook to then be integrated into your own backend services.

Click here to learn more

Node Red

Form.io also has integration with the amazing Node Red platform. With this installed within Node Red, you will now have two nodes to pick from.

  • formio save (storage): This will save a new form submission.
  • formio get (storage): This will retrieve a list of submissions based on a query provided in msg.query.
  • formio in (input): This will receive a Form.io form webhook to use forms as input.

To learn more about this, please go to Form.io Node Red Github page.

PHP

Our PHP Library allows a developer to interface with the Form.io API’s from within their PHP application. This library intentionally does not have any external dependencies so it should be a plug-and-play library.

Click here to learn more

Form Viewer

The Form Viewer is a special application which is used to display a single form, but also display a submission within that Form.

This project is the underlying source code @ https://formview.io which is the domain used by {{ site.formio }} to host individual forms. This is also the URL which provides embedding capabilities of the {{ site.formio }} forms.

What makes this project unique is that you can fork this repo @ https://github.com/formio/formio-viewer and then host your own special version of this application which is great for User Onboarding and other things. Or if you need to have a custom embed capability that is not provided by the base Form viewer.

Displaying a form

To display a form, you simply need to call this application using the following URL.

/#/[PROJECT NAME]/[FORM NAME]

Example: https://formview.io/#/examples/example renders the form provided by https://examples.form.io/example.

Display a submission within the form.

To display a submission within a form, you can use the following URL.

/#/[PROJECT NAME]/[FORM NAME]/submission/[SUBMISSION ID]

This will then show an Authentication form (/user/login) so that a user can log in to see the submission.

Download Submission as PDF

In addition to viewing the submission, the submission can also be downloaded as a PDF.

Changing Theme

The theme can also be changed dynamically using the theme= query parameter. Any theme from Bootswatch can be provided here like so.

https://formview.io/#/examples/example?theme=paper

This changes the form to look like this.

IFrame Embed

This form viewer is also 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>