Embedded Web Forms

View our Pricing & Plans for a detailed list and comparison of features available in each plan.

Docubee supports embedding standalone web forms into your web page. You can create a web form in Docubee and then embed it into your web page.

Embedding web forms basically means to integrate web forms into your already existing webpage. You can provide your users with a unified experience that allows filling forms without leaving your web page. This means more completed form fills for your sales team and a better overall user experience on your site for customers.

This article includes:

• configuring a Docubee account to support embedded standalone web forms
• configuring data collection and validation in the embedded interface.

Before you Begin

To embed web forms you need to prepare the workspace and follow some general guidelines:

1. Organization plan – The organization must be on a plan that supports Embedded UI, API Access and Standalone Web Forms. 
   • The Sales or Customer Success teams will assign these features for both trial / development and production environments.
2. Workspace API Access Tokens – The workspace (belonging to the above organization) must have one or more API access tokens generated that have the following permissions:
   • Complete Standalone Web Forms
   • Generate Embedded UI URL

Integrate Embedded Standalone Web Forms

This is an end-to-end handling of a web form completion process. It includes the following steps:

1. Design and publish the web form
2. Provide it as an embedded UI for completion.

You can handle many of these steps in numerous ways. This article assumes that you will use embedded interfaces and the Docubee API where possible.

Design and Publish the Web Form

1. Design the web form in the Docubee UI under “Forms” navigation in the left sidebar. 
2. When the web form is published, you can open the web form to retrieve the unique formId value from the URL.

Provide an Embedded UI for Filling out the Web Form

POST https://docubee.app/api/v2/embed

(This is currently an documented endpoint.) Takes a definition for an embeddable interface and returns a URL that can be embedded in a parent application that enables the user to perform the defined function. In this case, it will create the interface to fill out the web form. It will have a Content-Type of “application/json”.

Use Case – Create an Interface to Complete a Specified Web Form

In the body of the request, pass "page": "webForm" and it will return a URL that can be embedded in an iFrame on the provided domain. You can then see and complete the specified form.

The body of the request:

{
 "data": {
    "formId": formId
  },
  "domain": "https://secure.mydomain.com:*",
  "page": "webForm"
}

Configure Data Collection and Validation in the Embedded Interface

Remove Submit Button

By default, a Submit button is present at the bottom of the web form. You can hide it by passing true as the data.hideActions parameter for the interface. 

If you are using the client API to handle validation and collection of data, use the parameters in the request body, as shown below, to have control on the client-side without server interaction.

{
  data: {
    hideActions: true,
    submitToServer: false
  }
}

Disable Server Submission

By default, any submitted data is written to the Docubee database for your workspace and can be retrieved from your product dashboard. You can disable server submission and instead propagate the data to the parent of the embedded iFrame with a postMessage event of type FORM_SUBMITTED by passing false as the data.submitToServer parameter.

Prefill Field Data

You can prefill field data in the web form by passing an object of name/value pairs to the data.prefill parameter which enables any matching fields to be populated with the provided data.

Related Information

Embedded Workflow Automation
Embed eSignatures on Your Site or Application
Glossary

Need more help getting set up? Contact us for assistance from our customer support team.