- How it works
- Pass a single form
- Pass multiple forms
- Load your form builder
- Embed a third-party form
- Styling options for forms
- What happens after a form is submitted?
- Developer resources
How it works
The main concept is that your application passes one or more forms to the Page Builder, while the Page Builder manages the styling.
If your app offers predefined forms, or if your users can build forms inside your app, you can apply those forms inside web pages created with BEE.
You can load 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;
- by implementing a content dialog and building a user interface on top of the page builder, so that your users can browse and select forms.
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. When a form content block is dragged, the complete form will appear. Your users will define the fields they need, through the the field toggler, and then style the form.
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.
Pass multiple forms
If you want to pass more than one form to the builder, you can do so by implementing a Content dialog. Here is a brief demonstration:
With a content dialog, users will decide which form they want to add inside their page, and then proceed to define which fields to show and style the form.
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.
Styling options for forms
Once a form is added to the page, different styling options become available:
- turn fields on and off, unless they are defined as mandatory in the JSON;
- 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…
At the moment, fields cannot be rearranged in BEE.
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).
Learn how to implement the different methods to pass forms to the Builder
A closer look at how to structure a JSON form
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.