Managing forms with Page Builder

  1. How it works
  2. Pass a single form
  3. Pass multiple forms
  4. Load your form builder
  5. Embed a third-party form
  6. Customizing forms in BEE
  7. What happens after a form is submitted?
  8. Developer resources

How it works

You can enable your users to add forms in the Page Builder with two methods:

  • by passing in the configuration parameters a single, default JSON form, potentially including all the fields your application supports, and then have customers build and style forms in BEE using our form content block.
  • by implementing a content dialog on top of the form content block and building a user interface on top of the page builder, so that your users can either browse and select pre-built forms or build a new form.

 

Pass a single form

Your application passes a single JSON form to BEE, potentially including all the fields that may be required in a form. You are in control of which fields are visibile when the form is dragged. From there, users have control on:

  • adding or removing fields
  • rearranging the order of the fields
  • renaming field labels

This is the quickest way to get started using forms in BEE. You may also decide to include such forms inside Page templates provided by your application.

Learn more about this method

Pass multiple forms

If you want to pass more than one form to the builder, you can do so by implementing a Content dialog on top of the form content block.

With a content dialog, you have full control on the experience of adding a form. A few examples:

  • users can select a form from a predefined list
  • users can browse a list of forms and pick one
  • users can pick a form and have configuration options (e.g. define a layout) before adding it in BEE

Here is an example of form selection built with a Content Dialog.

Content dialog to select form

Once the content dialog returns a form to the Page Builder, users can then change the form content properties in the BEE editor, by adding and removing fields, rearraging their order and customizing their labels, and style

Learn more about this method

Load your form builder

You may even want to go a step further and use the Content dialog to load your UI for form creation, on top of the Page Builder; your users will be able to create a new form and add it to the web page they’re building, without interrupting their workflow.

Embed a third-party form

As an alternative to the above-mentioned methods, your users can add an HTML block and easily embed forms created with any form builder available on the market (e.g. Typeform, JotForm, etc.).

Form builders typically offer different options to get an embed code:

  • if the embed code is a script, it will not appear in the stage when building the page. Due to security reasons, we need remove such scripts during edit mode. The form will appear regularly both in the preview and in the final HTML output. An example of this behavior is the embed code produced by Typeform;
  • If the embed code lives in a iframe, it will be visible during editing as well. For example, Jotform and Google Forms offer this kind of embedding option.

Customizing forms in BEE

Once a form is added to the page, the user have these options to manage fields:

  • Add and remove fields (unless they are marked as required)
  • Rearrange their order
  • Rename their labels

On top of that, users can apply various styling options to the form:

  • change font type, size and style;
  • change colors for text and input backgrounds
  • change size for field inputs
  • define borders and paddings
  • position field labels on the top or on the side of the input fields
  • style buttons
  • and more…

What happens after a form is submitted?

The Page Builder just passes the data back to the host application. It doesn’t save anything neither it touches any of the data.

You can implement client-side validation in your JSON forms using the built-in HTML5 form validation, to validate things like:

  • required field;
  • response length, for strings (“must be less than” or “must be higher than” n characters);
  • response value for numbers (minimum or maximum value allowed);
  • correct type (i.e. the field must contain a number, an email address, or some other specific preset type);
  • check against a regular expression that defines a pattern the entered data needs to follow.

Any other post-submission validation and action must be defined and performed by your application, like for instance:

  • validating whether the data is acceptable, i.e. email already registered;
  • saving it into a database;
  • passing it to a 3rd application;
  • performing other actions (e.g. sending an email notification).

Developer resources

Passing forms to the Builder

Learn how to implement the different methods to pass forms to the Builder

Form structure and parameters

A closer look at how to structure a JSON form

Sample forms and templates

Visit our GitHub account to:

  • dive into some sample forms and quick start your integration;
  • download templates that include those forms;
  • get a validation JSON schema to test your forms with.