Documentation

We are glad to have your here! In our documentation you’ll find everything you need to work with Forms Bridge.

This page is under construction, some content will be missing for some time. We are aware of the importance of good documentation for an open source project like this, so we promise to update this content as soon as possible.

Getting started

This guide is an introduction to the Forms Bridge plugin for WordPress. Basic knowledge of how HTTP and REST APIs works is required. With various examples, this tutorial explains how to setup a bridge that connects WordPress forms with remote systems over the network.

Install an integration

Forms Bridge is a system to bridge WordPress forms with backends over HTTP requests. Forms Bridge itself does not build forms, but is capable to work with the most used WordPress form builder plugins. You can install Forms Bridge without any integration installed on your WordPress instance, but without one of the supported integrations, this plugin is useless. So lets start by installing one of the supported plugins:

For this example we will work with Contact Form 7 and the default contact form that comes out of the box with it.

Configure a backend

The first step to establish a bridge between your WordPress forms and your backend or service, is to configure this backend / service connection. On the admin panel, go to Settings > Forms Bridge to open the plugin’s settings page. If it’s your first time here, you will find a screen like this:

A backend is nothing more than a URL, an array of headers and a unique name to identify it. Start by typing a name and a URL and then click the Add button. Once done, you can add more headers to your backend connection.

A good practice is to use your backend URL domain as the backend URL, without path and use the path as part of your bridge endpoints!

In this example, we will work with ntfy, a simple HTTP-based pub-sub notification service. With backend headers we can set the ntfy notification title, priority and tags, in addition to the content type of our message.

Bridge your form

Once you have your backend connection configured, you can start using it on your bridges. Let’s bridge our contact form to ntfy. Go to the REST API tab and create a new bridge. A bridge needs a unique name, a form and a backend. Depending on the type of API you work with, the bridge will need some more fields. For example, for the REST API bridges, it’s required an endpoint and an HTTP method.

In our example, we’ve set Contacts as the name of the bridge, and bridged our contact form to the /forms-bridge-example endpoint of the ntfy backend using the POST method. After that, we got our first bridge 🎉.

Now, if someone fills up our contact form a notification will be receivied on the forms-bridge-example topic on ntfy. Now you can subscribe your devices to the topic and get notified every time a new form submission is placed on your web.

This is a basic set up. With this as a starter point, now you can add custom fields to the bridge, or configure a workflow to process your data before it is sent. We will cover these subjects on the following chapters of the documentation.

Settings page

To get you to the settings page go to Settings > Forms Bridge on the admin page of your WordPress instance. This page is where you can configure and create your form bridges.

General settings

  1. Notification receiver: Email address where submission error reports will be sent.
  2. Backends: Backends are reusables and API independent. Configure your backends on the General tab and reuse them on your APIs tabs.
  3. Integrations: This panel is only visible if your WordPress instance has more than one integration (or none of them) and allows you to control with which integrations should Forms Bridge work.
  4. Addons: Activate and deactivate addons. Each addon open a new API tab, with new bridges, templates and workflow jobs. REST API addon is enabled by default.
  5. Debug: Activate the debug mode to open the console and get logs of your bridges in real time.
  6. Import / Export: Import or export your Forms Bridge configurationas JSON files and move it between instances with easy!
  7. Credits: Credits about the plugin and Còdec.

API tabs

Forms Bridge comes with free addons. Each addon adds to the plugin new bridges to work with specific APIs, new workflow jobs and bridge templates. Each time you activate a new addon, a new API tab will be visible on the settings page. Navigate to this tab and start bridging your forms to the addon’s API. To get more detail about addons, go the the addons chapeter.

Integrations

Integrations are well known plugins that add forms to WordPress. You can install Forms Bridge without any integration installed on your WordPress instance, but without one of the supported integrations, this plugin is useless, so take a look at our supported integrations and start by installing one of them, if you didn’t it already.

Once an integration is installed Forms Bridge will detect it automatically and get its forms displayed on the settings page.

Forms Bridge can work with multiple integrations at the same time. To get more than one integration running in parallel, you only have to go to the settings page and choose with which of the installed plugins do you want to work with.

If you have only one integration installed, Forms Bridge will treat it as the active integration and hide the integrations panel on the settings page.

Available integrations

Contact Form 7
WP Forms
Gravity Forms
Ninja Forms
WooCommerce

Help us to improve 💪

If you could choose a new integration for Forms Bridge, which one would you choose?

    Forminator FormsFluent FormsFormidable FormsElementor Forms

    Backends

    In Forms Bridge, a backend is a set of configurations that handles the required information and credentials required to get your forms submissions bridged over HTTP requests to a remote system. Go to Settings > Forms Bridge > Backends to configure your backend connections.

    From the backends panel you can configura as many backend connections as you need. To create a new backend connection you have to set 3 fields:

    1. Name: A label to identify the backend. Backend names should be unique as it is the internal identifier Forms Bridge use to bind backends to bridges.
    2. Base URL: The base URL of your backend. The URL should start with http:// or https://. This base URL will be prepended to the bridge endpoint on runtime when a bridge is sending form submissions to your backend over the network.
    3. Headers: An array of HTTP headers. The headers table will be visible once you have the backend connection registered. By default, this table will has the Content Type header. In addition, you can add as many headers as you want. Use headers to store backend credentials like API keys and other metadata required by your backend.

    The Content Type header is a special header on Forms Bridge because it controls how Forms Bridge will encode your form payloads on the HTTP requests’ body. This is the only required header of a backend connection. If your bridge needs a custom encoding schema, you can select the Custom encoding option and manually fill the header value. If this is the case, remember to use the forms_bridge_payload filter to encode your form submissions and return them as a string. See the filters API chapter for more information about this filter.

    Bridges

    Bridges are the core concept of the plugin. A bridge is a pipeline that connects WordPress forms with backends or services over HTTP requests. The bridge pipeline has two ends, the form on one hand, and the backend on the other. Form submissions data will go through the bridge pipeline from WordPress to the backend. In the process, you can manipulate the data on the bridge workflow or by adding custom fields.

    A bridge is tied to an API, so to create bridges you need to have at least one addon enabled. Each Forms Bridge addon comes with a new bridge class with the ability to communicate with the respective API. By default, Forms Bridge have REST API bridges enabled by default.

    Custom fields

    Custom fields are data that will be added to the bridge payload. Use them to store private data you don’t want to place on your public forms, like user emails, or config values, like product IDs or lead tags.

    Each bridge has its own custom fields. A custom field is a pair of key-value, with the name on the left side, and the value on the right. Click on the Custom fields button of a bridge to open the fields table.

    Custom fields are added to the payload before the bridge workflow start, so you can access this data on the workflow jobs.

    If it is possible, Forms Bridge will introspect the bridge API schema each time the custom fields panel is opened. This introspection will return the list of the API endpoint fields. To access this list simply click on the {...} button and select an option to set its value as the field name. With this feature, Forms Bridge helps to map your submission fields to the API schema.

    The API introspection only works with well known APIs. REST API bridges does not performs this introspection because it’s an abstract bridge not tied to any specific API. If the introspection can’t be done, the button will be disabled.

    For the values, you can define constant values –simply type it on the value input of the field–, or make use of meta tags. Each meta tag will be replaced with its context value. Click on the $ button to see all available tags. You can add more than one tag to the field value, or combine tags with strings into a composed value.

    Custom field values are added to the payload as strings by default. You can cast them later with workflow mutations.

    Available meta tags

    Meta tagDescription
    $form_idID of the submission source form
    $submission_idID of the form submission
    $site_titleWordPress site title
    $site_descriptionWordPress site description
    $site_urlWordPress URL address
    $admin_emailWordPress admin email address
    $wp_versionWordPress instance version
    $ip_addressIP address of the user
    $refererURL of the page where the form submission comes from
    $user_agentUser agent of the browser of the user
    $browser_localeAccept-Language header value of the browser request
    $localeLocale of the page where the form is displayed.
    $languageLanguage name of the page locale
    $datetimeSubmission datetime in Y-m-d H:m:s format
    $gmt_datetimeSubmission GMT datetime in Y-m-d H:m:s format
    $timestampSubmission timestamp
    $iso_dateSubmission datetime in ISO 8601 format
    $gmt_iso_dateSubmission GMT datetime in ISO 8601 format
    $user_idWith active user sessions, ID of the user
    $user_loginWith active user sessions, name of the user
    $user_nameWith active user sessions, name of the user

    Workflows

    A workflow is a chain of jobs

    Forms Bridge is capable to inspect the available forms and get its fields to build a schema of its submissions. This schema is the basis of the workflow editor where you can get a view of the structure of your form submission and mutate its data structures

    Templates

    Json fingers

    Addons

    Bigin
    Brevo
    Dolibarr
    FinanCoop
    Google Sheets
    Holded
    Listmonk
    Mailchimp
    Odoo
    Zoho

    API

    Forms Bridge has an open API of filters and methods to allow developers to extend Forms Bridge features with PHP. In this chapter we will cover the most interesting of them from the point of view of the developers who wants to integrate their themes or plugins with Forms Bridge. It isn’t an extensive documentation of the Forms Bridge API. If you want a more in depth knowledge, you can browse the plugin’s code on the gitlab repository 🦊.

    Getters

    forms_bridge_form

    Gets the current submission form.

    Arguments

    1. mixed $default Default filtered value.
    2. integer $form_id If declared, try to return form by ID instead of the current form.

    Return

    1. array|null Form data or null.

    Example

    $form_data = apply_filters('forms_bridge_form', null);
    if (!empty($form)) {
    	// do something
    }

    forms_bridge_forms

    Gets available forms.

    Arguments

    1. mixed $default Default filtered value.
    2. string $integration If declared, filters available forms by integration slug.

    Return

    1. array Available forms as list of form data.

    Example

    $forms_data = apply_filters('forms_bridge_forms', []);
    foreach ($forms_data as $form_data) {
      // do something
    } 
    

    forms_bridge_bridges

    Gets available bridges for the current form.

    Arguments

    1. mixed $default Default filtered value.
    2. string|int $form_id If declared, returns bridges from the form with this id. This id should includes the integration slug as prefix if there is more than one active integration.
    3. string $integration If declared, filters bridges by API slug.

    Return

    1. array List of given form available bridge instances.

    Example

    $bridges = apply_filters('forms_bridge_bridges', [], 'wpcf7:31');
    foreach ($bridges as $bridge) {
      // do something
    }

    forms_bridge_submission

    Gets the current form submission.

    Arguments

    1. mixed $default Default filtered value.

    Return

    1. array|null Current form’s submission data.

    Example

    $submission = apply_filters('forms_bridge_submission', null);
    if ($submission) {
      // do something
    }

    forms_bridge_uploads

    Gets the current form’s submission uploaded files.

    Arguments

    1. mixed $default Default filtered value.

    Return

    1. array|null Current form’s submission uploaded files.

    Example

    $uploads = apply_filters('forms_bridge_uploads', null);
    if ($uploads) {
      // do something
    } 
    

    forms_bridge_backends

    Gets the registered backend connection settings.

    Arguments

    1. mixed $default Default filtered value.

    Return

    1. array List with registered backend settings data.

    Example

    $backends = apply_filters('forms_bridge_backends', []);
    foreach ($backends as $backend) {
      // do something
    } 
    

    forms_bridge_backend

    Gets a backend connection settings by name.

    Arguments

    1. mixed $default Default filtered value.
    2. string $name Name of the backend.

    Return

    1. array|null If found, backend connection settings data.

    Example

    $backend = apply_filters('forms_bridge_backend', null);
    if ($backend) {
      // do something
    } 
    

    Filters

    forms_bridge_payload

    Filters the submission data to be sent to the backend. If the payload is returned as an array of data, Forms Bridge will encode it as string based on the Conent-Type header of the backend before it is sent.

    Arguments

    1. array $payload Submission payload.
    2. Form_Bridge $bridge Bridge instance.

    Return

    1. array|string|null Filtered payload. If null is returned, bridge submission will be skipped.

    Example

    add_filter('forms_bridge_payload', function ($payload, $bridge) {
      return $payload;
    }, 10, 2);

    forms_bridge_attachments

    Filters attached files to be sent to the backend. Attachment files are only supported by backends with multipart/form-data value of the Content-Type header. Otherwise, Forms Bridge will encode the files as base64 strings and append it to the payload.

    Arguments

    1. array $attachments Submission attached files. An attachment is a key value pair with the attachment name and the path to the file.
    2. Form_Bridge $bridge Bridge instance.

    Return

    1. array Filtered attachments.

    Example

    add_filter('forms_bridge_attachments', function ($attachments, $bridge) {
      return $attachments;
    }, 10, 2);

    forms_bridge_backend_headers

    Filters the bridge HTTP request headers. The array contains the backend custom headers and a set of default backend headers. Fired on each form bridge submission.

    Arguments

    1. array $headers Associative array with HTTP headers.
    2. Http_Backend $backend Backend instance.

    Return

    1. array Filtered HTTP headers.

    Example

    add_filter('forms_bridge_backend_headers', function ($headers, $backend) {
      return $headers;
    }, 10, 2);

    forms_bridge_backend_url

    Filters bridge submission request URL. The URL is the result of the concatenation of the backend base URL and the bridge endpoint. Fired on each form bridge submission.

    Arguments

    1. string $url Submission request URL.
    2. Http_Backend $backend Backend instance.

    Return

    1. array Filtered HTTP headers.

    Example

    add_filter('forms_bridge_backend_url', function ($url, $backend) {
      return $url;
    }, 10, 2);

    forms_bridge_request

    Filters the backend request params before it is sent. Forms Bridge use the WP_Http under the hood. Check out the WP_Http::request documentation for more details about the params.

    Arguments

    1. array $params HTTP request params.

    Return

    1. array Filtered HTTP request params.

    Example

    add_filter('forms_bridge_request', function ($request) {
      return $request;
    }, 10, 1);

    forms_bridge_response

    Filters the bridge request request response.

    Arguments

    1. array|WP_Error $response HTTP request response.

    Return

    1. array|WP_Error Filtered HTTP request response.

    Example

    add_filter('forms_bridge_response', function ($response) {
      return $response;
    }, 10, 1);

    forms_bridge_prune_empties

    Controls if Forms Bridge should clean up the submission data and prune its empty fields.

    Arguments

    1. boolean $prune True by default, use this filter to avoid the payload prune.
    2. Form_Bridge $bridge Bridge instance.

    Return

    1. boolean True value will trigger a prune of the empty values of the submission payload. An empty value is a null value or an empty string.

    Example

    add_filter('forms_bridge_prune_empties', '__return_false');

    forms_bridge_skip_submission

    Controls if Forms Bridge should skip the form submission.

    Arguments

    1. boolean $skip False by default, use this filter to skip bridge submissions.
    2. Form_Bridge $bridge Bridge instance.

    Return

    1. boolean True value will skip the bridge submission.

    Example

    add_filter('forms_bridge_skip_submission', function ($skip, $bridge) {
      if ($bridge->name === 'skip') {
        return true;
      }
    
      return $skip;
    }, 10, 2);

    Actions

    forms_bridge_before_submission

    Action to do just before submission has been sent to the backend.

    Arguments

    1. Form_Bridge $bridge Bridge instance.
    2. array $payload Payload data.
    3. array $attachments Attachments list.

    Example

    add_action('forms_bridge_before_submission', function ($bridge, $payload, $attachments) {
      // do something
    }, 10, 3);

    forms_bridge_after_submission

    Action to do after the submission has been successfully sent to the backend.

    Arguments

    1. Form_Bridge $bridge Bridge instance.
    2. array $response Request response data.
    3. array $payload Payload data.
    4. array $attachments Attachments list.

    Example

    add_action('forms_bridge_after_submission', function ($bridge, $response, $payload, $attachments) {
      // do something
    }, 10, 4);

    forms_bridge_on_failure

    Action to do after a bridge submission error.

    Arguments

    1. Form_Bridge $bridge Bridge instance.
    2. WP_Error $error Request error response.
    3. array $payload Payload data.
    4. array $attachments Attachments list.

    Example

    add_action('forms_bridge_on_failure', function ($bridge, $error, $payload, $attachments) {
      // do something
    }, 10, 4);