Pro Forms

Pro Forms transforms how you create forms in Bricks by providing a powerful, flexible, and completely nestable form solution. Unlike traditional form builders that limit your design possibilities, Pro Forms allows you to place any Bricks element inside your forms, giving you unlimited creative freedom to build complex, beautiful layouts.

Beyond enhanced design flexibility, Pro Forms bridges the gap between your frontend forms and WordPress database operations. Whether you need to create posts, update user profiles, manage custom fields, or handle complex business logic, Pro Forms provides the tools to build sophisticated frontend applications without requiring users to access the WordPress admin area.

From simple contact forms to complex multi-step wizards, user registration systems, and database management interfaces, Pro Forms gives you the power to create professional, feature-rich forms that can handle any use case.

Main Features

🎨 Design & Layout

Nestable Architecture – Place any Bricks element inside your forms for unlimited design possibilities
Global & Individual Styling – Apply consistent styles across all fields or customize each element individually using Global Classes

🚀 Database Integration

WordPress Actions – Create posts, update metadata, manage user accounts, modify options
Custom Field Support – Compatibility in many areas with ACF, Metabox, JetEngine, ACPT, and custom fields
Repeater Field Management – Add, update, and remove repeater field rows with advanced controls
Live Data Sync – Real-time updates for form fields using Live Variables

🎯 Smart Logic & Conditions

Conditional Field Logic – Show or hide fields based on user input and external data
Submit Button Conditions – Control submit button visibility based on conditions
Step Conditions – Dynamically show, hide or block form steps based on user responses
Conditional Wrappers – Show/hide entire sections with nested elements
Validation Rules – Client-side and server-side validation with custom error messages

📋 Multi-Step Forms

Flexible Step Creation – Split complex forms into manageable, user-friendly steps
Progress Indicators – Visual step navigation to guide users through the process
Summary Screens – Display comprehensive form summaries before final submission
Conditional Steps – Show or hide entire form sections based on user input
Dedicated Step Navigation Element – Create your own step navigation design with a dedicated element

🔒 Security & Spam Protection

reCAPTCHA v3 – Invisible spam protection with Google’s latest technology
hCaptcha Support – Privacy-focused alternative with GDPR compliance
Cloudflare Turnstile – Seamless bot detection without user interaction
Honeypot Fields – Hidden anti-spam fields for additional protection
Server-Side Validation – Robust security measures to prevent malicious submissions

Nestable Approach

Pro Forms uses a nestable element structure that allows you to build forms using any combination of form fields and regular Bricks elements. This approach gives you complete control over form layout and design.

How Nestable Elements Work

When you add a Pro Forms element to your page, you’ll see a new “Bricksforge Forms” group in the Elements Panel. This group contains all the form-specific elements you can use to build your form.

Unlike traditional form builders, you can place any Bricks element inside your Pro Forms container. This means you can add headings, images, dividers, containers, and other elements alongside your form fields to create exactly the layout you need.

Getting Started

Building Your Form

To build a form, follow these steps:

Add a Pro Forms element to your page
Into the Pro Forms element, add the form fields you need from the “Bricksforge Forms” group as children. As default, the Pro Forms element comes with a Text, Textarea and Submit Button (Which is wrapped by a Submit Button Wrapper) field.
Add any other Bricks elements (headings, images, containers) as needed for your design
Configure your form actions in the Pro Forms element settings under the “Actions” group.

Form Actions and Field IDs

Form Actions define what happens after the form is submitted. These are configured in the main Pro Forms element settings, not in individual form fields.

Each form field can have a custom ID that you define in the field’s settings. Use these IDs to connect form fields to your form actions. For example, if you have an email field with the ID user_email, you can reference it in form actions using {{user_email}}.

You can find more about form field variables in the Form Field IDs section.

Styling Options

You have two ways to style your form fields:

Global Field Styles

To apply consistent styles to all form fields:

Select your Pro Forms element
Go to the Global Field Styles tab
Configure typography, colors, spacing, and borders
These styles will apply to all form fields in your form

Individual Field Styles

To style a specific form field:

Select the individual form field element
Use the Styles group in the field settings of the Content tab
These styles will override the global styles for that specific field
You can also apply Bricks Global Classes to form fields

💡 Note that some elements like Repeater Fields require Global Classes for styling since they don’t support ID-based styling.

Form Fields

Adding Fields

To add an input field to your form:

Select your Pro Forms element or any container within it
Add the desired input field from the “Bricksforge Forms” group in the elements panel
Configure the field settings in the element’s settings panel
Set a custom Field ID (if needed) for use in form actions and dynamic data (see Form Field IDs)

There are various field types available to choose from:

Text

Basic text input for general text entry like names, titles, or short responses.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-filled default value	-
Placeholder	Helper text shown in empty field	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
Max Length	Maximum number of characters	-
Pattern	Regex pattern for validation	-
Autocomplete	Browser autocomplete behavior	Off
Strip HTML	Remove HTML tags from output	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Email

Email input with built-in validation and mobile keyboard optimization.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-filled default value	-
Placeholder	Helper text shown in empty field	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
Max Length	Maximum number of characters	-
Pattern	Additional regex validation	-
Autocomplete	Browser autocomplete behavior	Email
Strip HTML	Remove HTML tags from output	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Number

Numeric input with number-specific validation and increment/decrement controls.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-filled default value	-
Placeholder	Helper text shown in empty field	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
Min Value	Minimum allowed number	-
Max Value	Maximum allowed number	-
Step	Number increment step	-
Autocomplete	Browser autocomplete behavior	Off
Strip HTML	Remove HTML tags from output	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Password

Secure password input with masked characters for login or registration forms.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-filled default value	-
Placeholder	Helper text shown in empty field	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
Max Length	Maximum number of characters	-
Pattern	Regex pattern for validation	-
Autocomplete	Browser autocomplete behavior	Off
Strip HTML	Remove HTML tags from output	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Textarea

Multi-line text input for longer content like messages, descriptions, or comments.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-filled default value	-
Placeholder	Helper text shown in empty field	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
Max Length	Maximum number of characters	-
Show Max Length Counter	Display character counter	False
Max Length Counter Position	Counter placement (Below, Inside)	Below
Max Length Counter Text	Counter display template	Dynamic format
Autocomplete	Browser autocomplete behavior	Off
Strip HTML	Remove HTML tags from output	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Date

Date picker with extensive customization options for events, birthdays, or scheduling.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-filled default value	-
Placeholder	Helper text shown in empty field	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
Enable Time	Include time selection	False
Time Only	Show only time picker	False
Date Format	Display format	WordPress setting
Date Format (Database)	Storage format	Ymd
Language	Localization code (de, es, fr, etc.)	-
Min Time	Earliest selectable time	-
Max Time	Latest selectable time	-
Range Picker	Enable date range selection	False
Allow Input	Allow manual typing	False
Show Visual Calendar	Display inline calendar	False
Enable Specific Dates	Restrict to certain dates	False
Enable Specific Weekdays	Restrict to certain weekdays	False
Disable Specific Dates	Block certain dates	False
Disable Dates in Past	Block past dates	False
Max Days	Maximum range span	-
Bind To	Connect to other date fields	-
As Min Date	Use as minimum for bound fields	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

File

File upload field with type and size restrictions for document and media uploads.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
Multiple Files	Allow multiple file selection	False
Max File Size	Maximum file size limit	WordPress setting
Allowed File Types	Permitted file extensions	WordPress setting
Upload to Media Library	Store in WordPress media	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Tel

Phone number input with mobile keyboard optimization.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-filled default value	-
Placeholder	Helper text shown in empty field	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

URL

Website address input with automatic URL validation.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-filled default value	-
Placeholder	Helper text shown in empty field	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Hidden

Invisible field for storing data that should not be visible to users but needs to be processed with the form.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-filled default value	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Rich Text

WYSIWYG editor for formatted content with multiple editor themes and customization options.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-filled default content	-
Placeholder	Helper text shown in empty editor	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Style	Editor theme (Flat Toolbar, Tooltip Based, WordPress)	Flat Toolbar
Formats	Available formatting options	-
Use Bricks Colors	Integrate with Bricks color palettes	True
Color Palette	Specific color palette to use	Default
Min Height	Minimum editor height	120px
Read Only	Make editor read-only	False
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Color Picker

Advanced color selection interface with multiple themes, formats, and styling options.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-selected default color	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Color Format	Output format (hex, rgb, hsl)	Hex
Alpha	Enable transparency selection	True
Theme	Color picker style (Default, Large, Polaroid, Pill)	Polaroid
Theme Mode	Light/dark theme (Auto, Light, Dark)	Auto
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Rating

Interactive star rating system for collecting user feedback and ratings.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Value	Pre-selected default rating	-
Show Label	Display or hide the field label	Parent setting
Required	Make field mandatory	False
Disabled	Disable user interaction	False
Max Rating	Maximum rating value	5
Default Rating	Pre-selected rating value	3
CSS Class	Custom CSS classes	-
Width	Field width (CSS units)	-
Context	Post ID for dynamic data	-

Each field type includes comprehensive validation options, conditional logic support, and dynamic data integration capabilities.

Calculation

The Calculation field allows you to create a mathematic calculation based on other fields in the form. The result of the calculation will be displayed in the field. Additionally, you can use the Dynamic Data Tag Form Calculation to display the result of the calculation wherever you want.

Examples

Calculate the double of the value in field {wofuw}:
```
{wofuw} * 2
```
Calculate the sum of the values in fields {wofuw} and {dofjd}:
```
{wofuw} + {dofjd}
```
Calculate the result of adding the double of the value in field {wofuw} to 10 and then dividing by the value in field {dofjd}
```
({wofuw} * 2 + 10) / {dofjd}
```
Calculate the result of dividing the sum of the values in fields {fkdif} and {urbmg} by the difference between the values in fields {zvqtl} and {wpxoc}, and then multiply the result by the product of the values in fields {hjyse} and {tqinm}:
```
(({fkdif} + {urbmg}) / ({zvqtl} - {wpxoc})) * ({hjyse} * {tqinm})
```

Variables

You can also define variables in the formula. For example, you can define a variable factor and use it in the formula like this:

factor = 1.19;
price = {price};

price * factor

This will calculate the price with the given factor.

Dynamic Variables (Wildcard)

If you are using Calculation Fields inside of Bricks Loops, your variable is dynamic and can’t be used in the formula statically. For such situations, you can use a wildcard with this syntax: field_id_*.

For example, if you’re looping trough terms and your field ID inside the loop is term_category_{term_slug}, you can use term_category_* as variable. This will sum up all the values of the fields with the ID starting with term_category_.

Using wildcards, you need to make sure that your IDs you want to sum up are starting with the same prefix. Otherwise, the wildcard will not work.

Settings

Control	Description
Round Value	Round the result to the nearest whole number. This option will apply standard rounding rules, where decimal values equal to or greater than 0.5 will be rounded up, and decimal values less than 0.5 will be rounded down.
Currency Format	Display the result as a formatted currency value without the currency symbol. The value will be formatted with two decimal places and a thousands separator. For example: 1,000.00
Set Empty to 0	Automatically convert empty or missing field values to zero during calculations. This option ensures that the formula will still be evaluated even when some of the input fields have no values, treating them as zeros instead of causing an error or unexpected behavior.
Empty Message	The message to display when the calculation is not valid because of missing or invalid input values. This option is only used when the Set Empty to 0 option is disabled.
Only Remote	If you don't want to show the result inside your form, you can use this option to set it as hidden. Then, you can use the Dynamic Data Tag 'Form Calcuation' to show the result somewhere else.
Width	The width of the field.
ID	The id of the field.
CSS Class	Add a custom CSS class to the field.

Note: If you want to use the result of the calculation somewhere else on the page, you can use the Dynamic Data Tag Form Calculation. Using the Dynamic Data Tag, you can perform an additional calculation on the result of the calculation field. For example, you could multiply the result of the calculation field by 0.19 to calculate the tax.

Slider

The Slider element allows users to select a value from a range of values by moving a slider. This field is very flexible and powerful. It can take as many handlers as you want. Also, you can bind each handler to a specific form field using the ID of the form field.

Available settings:

Setting	Description
Handlers	Add one or more draggable handlers. Each handler supports the options: • Value – initial value (e.g. `10` or `10MB`) • Connect – connect handlers to create a range • Binding – ID of the form field to sync with • Show Tooltips – display the value while moving
Connect Last	If enabled, the last handler connects to the end of the slider.
Use Static Values	Use custom values instead of numeric values, e.g. `10MB`.
Round to x decimals	Number of decimals to round the handler values.
Step	Step size of the slider.
Show Pips	Display value indicators on the slider.
Pips Density	Density of the pips.
Pips Mode	`Steps` shows pips per step, `Range` shows them for each range.
Orientation	`Horizontal` or `Vertical`. A vertical slider requires a height.
Height	Height of a vertical slider.

Binding

The Slider element allows you to bind the value of the slider to another form field. In contrast to the binding option of the handler, this binding is transfering the value of all handlers to the form field. If you are using multiple handlers, the value of the form field will be comma separated, for example “10,20,30” or “10MB,20MB,30MB”.

Live Value

The element “Live Value” can be connected to a form field. This way the value of the form field will be displayed in the Live Value element. This is useful if you want to display the value of a form field in a different place. To connect a form field, just enter the form field ID. Example: djfkrd or custom_id.

Multi Step Elements

Creating Multi Step Forms is much easier and more flexible with the new nestable approach. You can use the following elements to create Multi Step Forms:

Element	Description
Step	The Step element is the main element for creating Multi Step Forms. It allows you to create a new step in your form. You can add as many steps as you want. The form will be separated on the place where you add the Step element.
Previous Step	The Previous Step element allows you to add a previous button to your form. This button can be used to go to the previous step.
Next Step	The Next Step element allows you to add a next button to your form. This button can be used to go to the next step.
Summary Button	The Summary Button element allows you to add a summary button to your form. This button can be used to show a summary of the form.

Using Nestable Pro Forms, you are responsible to add the Previous and Next Step Buttons to each step where you want to use them. This gives you more flexibility and allows you to create complex forms.

Example Step Structure

Pro Forms Text Textarea Next Step Button Step <-- This separates the steps from
each other. Text Email Previous Step Button Submit Button

Checkboxes / Radio Buttons

Pro Forms is coming with loopable Checkboxes and Radio Buttons. These elements are very flexible and powerful. For all of these elements, it’s important to use the related Wrapper element. For checkboxes, you need to use the “Checkbox Wrapper” as parent element. For radio buttons, you need to use the “Radio Button Wrapper”. This is required to make the elements work properly.

The Wrapper can take one or more children. These children are the actual checkboxes or radio buttons. A wrapper can take default checkboxes / radios, but also special one like “Card Checkbox” or “Image Radio”.

The following special checkboxes / radio buttons are available:

Element	Description
Checkbox	The default checkbox.
Card Checkbox	This checkbox is a Nestable Element. You can add any element you want inside the Card Checkbox. This way you can create a checkbox with a custom design.
Image Checkbox	This checkbox allows you to add two images. One image will be displayed when the checkbox is checked. The other image will be displayed when the checkbox is not checked.
Radio Button	The default radio button.
Card Radio Button	This radio button is a Nestable Element. You can add any element you want inside the Card Radio Button. This way you can create a radio button with a custom design.
Image Radio	This radio button allows you to add two images. One image will be displayed when the radio button is checked. The other image will be displayed when the radio button is not checked.

Download Info

The Download Info element allows you to create a Download Info Field. This field is very flexible and powerful. It can take as many children as you want. Once the form is submitted, the Download Info Field will be displayed. This is useful if you want to provide the user with a download link after submitting the form.

The following settings are available:

Setting	Description
Trigger	Choose between `Automatic` and `Manual` to show the field automatically or with a custom link.

Automatic

If you choose Automatic, the Download Info Field will be displayed automatically when needed after the form is submitted, for example for related actions like Create PDF. The download URL will by dynamically generated and displayed in the Download Info Field.

Manual

If you choose Manual, you can set a custom download URL. After a successful submission, this URL will be injected to the button of the Download Info Field.

Important ⚠️: Do not remove the button that is automatically added. It is needed to display the download link.

Repeater

The Repeater element allows you to create a Repeater Field. This field is very flexible and powerful. It can take as many children as you want. Also, you can sync the Repeater Field with Repeater Data from providers like ACF, Metabox, JetEngine or ACPT. When synced, the Repeater Field will be populated with the Repeater Data on page load.

Setup Repeater Field

To setup a Repeater Field, you need to add the Repeater element to your form. This element comes with a “Text” element as child by default. You can add as many children as you want. Each child will be a field of the Repeater Field. Everything inside this Nestable Element will be repeated.

Sync Repeater Field (GET DATA)

To sync the Repeater Field with Repeater Data, you need to use ACF, Metabox, JetEngine or ACPT. Just follow this steps:

Create a Repeater Field in your provider and add some fields to the repeater.
Select the “Repeater” element in Pro Forms to see the settings of this field. Then, open the group “Data”.
For “Data Source”, select the provider you are using. For example, if you are using ACF, select “ACF Repeater”.
For “Post ID”, enter the ID of the post where the Repeater Field data is located.
For “Field Name”, enter the name of the Repeater Field. This is the name you have given to the Repeater Field in your provider, for example: my_repeater.
For all childs of the Repeater Element, set the Custom ID to the name of the field in your provider. For example, if you have an ACF repeater field child with the name my_field, you need to set the Custom ID of the child to my_field. This ensures that the field will be populated with the correct data.

Now, the Repeater Field will be populated with the Repeater Data on page load.

Sync Repeater Field (UPDATE DATA)

To update the synced Repeater Field with new data, you need to use the “Update Post Meta” action. Just follow this steps:

Add a “Update Post Meta” action to your form.
For “Source”, select your provider, for example “ACF”
Set the default non repeater related settings like “Post ID”.
Enable Is Repeater Field
As Repeater Action, choose Update Rows (Pro Forms Repeater)
As Post Meta Name, enter the name of the Repeater Field. This is the name you have given to the Repeater Field in your provider, for example: my_repeater.
As Pro Forms Repeater ID, enter the ID of the Repeater Element in your form. As you want to pass it as array, choose this syntax: {{repeater_id:array}}. For example, if the ID of the Repeater Element is my_repeater, you need to enter {{my_repeater:array}}.

Now, the Repeater Field will be updated with the new data and both the Repeater Field and the Repeater Data will be in sync.

Signature

The Signature element allows users to sign a form. This sign will be saved as an image and can be used for further actions.

Here are some details about related settings:

Setting	Description
Upload Location	Choose where to save the signature. `Media Library` creates an attachment, `Custom` stores it in a subfolder of `uploads` without creating a reference.
Canvas Height	Height of the signature canvas.
Dot Size	Size of the drawing dot.
Min Width	Minimum line width. Default: `0.5`.
Max Width	Maximum line width. Default: `2.5`.
Background Color	Background color of the canvas.
Border Color	Border color of the canvas.
Pen Color	Color of the pen.
Throttle	Time interval between each point. Default: `16`.
Show Clear Button (Actions Group)	Display a clear button for the signature.

Important ⚠️: CSS variables are not supported for signature styles. Use static values instead.

Map

The Map element allows users to select a location on an interactive map. It supports both OpenStreetMap (Leaflet) and Google Maps as providers. Users can search for addresses, click on the map, or drag the marker to set a location.

Available Settings:

Setting	Description	Default
Label	Text displayed above the field	-
Field ID	Custom identifier for form actions	Element ID
Map Provider	Choose between OpenStreetMap (Leaflet) or Google Maps	OpenStreetMap
Default Latitude	Initial latitude for map center	51.505
Default Longitude	Initial longitude for map center	-0.09
Default Zoom	Initial zoom level (1-20)	13
Allow Search	Enable address search functionality	False
Search Placeholder	Placeholder text for the search input	Search address…
Allow Marker Drag	Allow users to reposition the marker by dragging	False
Map Height	Height of the map container	400px

Google Maps Setup

To use Google Maps as provider, you need to configure your API key:

Go to Bricksforge > Settings > Pro Forms
Enter your Google Maps API Key
Make sure the following APIs are enabled in your Google Cloud Console:
- Maps JavaScript API
- Places API
- Geocoding API

Variable Filters

The Map field stores location data as a JSON object. Use filters to extract specific values:

Variable	Output
`{{field_id}}`	Full JSON object `{"lat":..., "lng":..., "address":..., "zoom":...}`
`{{field_id:address}}`	Address string only
`{{field_id:lat}}`	Latitude value
`{{field_id:lng}}`	Longitude value
`{{field_id:coords}}`	Coordinates as `lat,lng`
`{{field_id:zoom}}`	Zoom level

Example Usage:

Email notification: Your selected address: {{location:address}}
Update ACF Google Map field: {{location}} (uses full object)
Store coordinates: {{location:coords}}

Meta Field Compatibility

The Map field value is automatically converted to the correct format when used with:

ACF Google Map field – Stored as array with lat, lng, address
Metabox Map field – Stored as lat,lng,zoom,address
JetEngine Map field – Stored as array with lat, lng
Standard WordPress meta – Stored as JSON string

Conditional Wrapper

The Conditional Wrapper element is a powerful nestable container that shows or hides its contents based on conditional logic. This element allows you to create dynamic form sections that appear or disappear based on user input or other conditions.

Unlike individual field conditional logic, the Conditional Wrapper can contain multiple elements and form fields, making it ideal for showing/hiding entire sections of your form.

Setting	Description
Conditions	Set up conditional logic rules that determine when the wrapper content should be visible.
Condition Relation	Choose whether all conditions (AND) or any condition (OR) must be met.

File Download

The File Download element allows you to provide downloadable files to users, typically after successful form submission. This element can be configured to show different files based on form responses or conditions.

Setting	Description
File Source	Choose the source of the downloadable file (Media Library, URL, or dynamic field).
Download Text	Text displayed on the download link or button.
File Type Restrictions	Limit downloads to specific file types for security.

Select and Option Elements

The Select element creates dropdown menus with customizable options. It works in conjunction with Option and Option Group elements to create organized selection lists.

Select Element

Setting	Description
Multiple Selection	Allow users to select multiple options.
Placeholder Text	Text shown when no option is selected.
Search Functionality	Enable search within options for long lists.
Default Selection	Pre-select specific options.

Option Element

The Option element represents individual choices within a Select element. Options can be populated dynamically using Query Loops.

Setting	Description
Option Value	The value sent when this option is selected.
Option Text	The text displayed to users.
Selected by Default	Mark this option as pre-selected.

Option Group

The Option Group element allows you to organize options into logical groups within select dropdowns, improving usability for forms with many options.

Setting	Description
Group Label	Name of the option group.
Group Options	Child Option elements belonging to this group.

Submit Button

When using the Nestable approach, you are responsible to add the Submit Button to your form. Just add it on the place where you want it to display.

Query Loops

Some elements are accepting Query Loops to be populated with data. This allows you to create dynamic forms. For example, an “Option” Element is the child of a “Select” Element. Using a Query Loop for the “Option” field, you can populate the options of the select field dynamically.

The following elements are accepting Query Loops:

Option
Checkbox
Card Checkbox
Image Checkbox
Radio
Card Radio
Image Radio

Validation Rules

Some elements are accepting Validation Rules. This allows you to validate the form fields. For example, you can use the “Required” Validation Rule to make a field required. For each validation, you can define a custom error message. This message will be displayed if the validation fails.

The validation process is handled on server side. This means that the form will be submitted and the validation will be executed on the server. If the validation fails, the error message will be displayed and the form will not be submitted. If you want to validate already on client side while the user is filling out the form, you can do this as well.

To use validation rules, check if your form field element has the group “Validation”. If yes, you can add validation rules to your form field. The group “Validation” contains the following settings:

Validation Rules

Setting	Description
Validation Type	Select a rule, e.g. `Required` or `Number`. You can also choose `Custom (Regex)` to define your own expression, such as `^[^0-9]*$` to forbid numbers.
Validation Message	Message shown if the validation fails.

Show Message Below Field

By default, the error message will be displayed below the form as alert. If checked “Show Message Below Field”, the error message will be displayed below the form field.

Live Validation

If checked, the validation will be executed on client side while the user is filling out the form. This way the user will get instant feedback if the input is valid or not. Anyway, the validation will also be executed on server side when the form is submitted.

Show Validation Message

If checked, the form field will show a validation message below the field if the validation fails. By default, it will only show a red border around the field.

Live Variables

Use Variables everywhere

Important: When using live variables in html attributes, you need to use the additional data-brf-var attribute.

Variables as Input Value

When adding a variable like {{field_id}} to the “Value” of a form field, the value of the field will be updated live. This is useful if you want to display the value of a field in a different place. For example, lets say you have a form field with the ID first_name. You can add the variable {{first_name}} to the value of any other form field or element. If the user fills out the first_name field, lets say “John”, the value of the first_name field will be displayed in the other field or element.

Form Field IDs

Coming soon…

Actions

Form actions are actions that are executed after a form is submitted. Pro Forms provides a range of form actions that allow you to customize and extend your forms to meet your specific requirements. For example, you can use form actions to send emails, update user data in the database, or even execute custom code. Pro Forms is coming with the following actions:

Custom

The Custom action allows you to execute custom PHP code after the form is submitted using the bricksforge/pro_forms/custom_action hook. You can read more about the Custom action in the Bricks Form Documentation.

Email

The Email action allows you to send an email after the form is submitted. You can use any form field IDs using the syntax {{field_id}}.

Setting	Description
Subject	The subject of the email.
Send to email address	The email address where the email will be sent. You can also select a custom one.
BCC email address	The email address where the email will be sent as BCC.
From email address	The email address where the email will be sent from.
Reply to email address	The email address where the email will be sent as reply to.
Email content	The content of the email.
Refresh Email Content	Automatically update the email content based on the latest form changes.
Live Refresh Email Content in Builder	Refresh content in the builder when form fields change.
Error message	The error message that will be displayed if the email is not sent.
HTML email	Send the email as HTML.

Dynamic Recipients

Since Bricksforge 2.1.8, you can set dynamic recipients for the email action. This allows you to send the email to different recipients based on form fields.

For this, select “Dynamic Email Address” in the “Send to email address” control and define your conditions.

You can use the variable {{all_fields}} to include all form fields in the email content.

Redirect

The Redirect action allows you to redirect the user to another page after the form is submitted. This action is only triggered after the form is submitted successfully.

Setting	Description
Redirect to admin area	Redirect to the admin area after the email is sent.
Custom redirect URL	Redirect to a custom URL after the email is sent.
Redirect after	The number of milliseconds after the email is sent to redirect to the admin area or the custom URL.

Mailchimp

The Mailchimp action allows you to add a user to a Mailchimp list after the form is submitted. To use this action, you need to have a Mailchimp account and an active Mailchimp list. Also you need to add your API key to “Bricks > Settings > API Keys > Mailchimp API”.

You can read more about this action in the Bricks Form Documentation.

Sendgrid

The SendGrid form action allows you to automatically send your form data to a SendGrid list. To use this action, you need to have a SendGrid account and an active SendGrid list. Also you need to add your API key to “Bricks > Settings > API Keys > SendGrid API”.

You can read more about this action in the Bricks Form Documentation.

The User Login action allows you to log in a user after the form is submitted. This action is only triggered after the form is submitted successfully.

Setting	Description
Login field	The field that will be used for the login of the user. (username or email)
Password field	The field that will be used to set the password of the user.

User Registration

The User Registration action allows you to register a user after the form is submitted. This action is only triggered after the form is submitted successfully.

Setting	Description
Email field	The field that will be used for the email of the user.
Password field	The field that will be used to set the password of the user. The password will be auto generated if the field is empty.
Password min. length	The minimum length of the password.
User name field	The field that will be used for the username of the user. The user name will be auto generated if the field is empty.
First name field	The field that will be used for the first name of the user.
Last name field	The field that will be used for the last name of the user.
Auto login user	Automatically login the user after the registration.

User Password Reset

The User Password Reset action allows you to reset the password of a user after the form is submitted. This action is only triggered after the form is submitted successfully. You can choose between sending a password reset link via email to the user, or setting a new password directly.

Important: It’s always recommended to use the Password Reset Link option, because it’s more secure. The Update Password option should only be used if you have a good reason to do so.

You can choose between the following options:

Setting	Description
Method	Choose Reset Password Email (recommended) or Update Password.
User Email	The email of the user. Accepts form field IDs like `field_id`.

If you choose the Update Password method, you can also use these options:

Setting	Description
New Password	New password for the user. Accepts form field IDs.
Server Side: Verify Password Confirmation	Adds a confirmation field check on the server. Provide the confirmation field ID via Password 2 (Confirmation Field).
Server Side: Allow only strong passwords	Enforce strong passwords.
Server Side: Verify Current Password	Verify the current password on the server. Provide a field ID via Current Password.

As we already mentioned, it’s always recommended to send the password reset link via email to the user. This way an individual token is generated for each user and the user can set a new password on his own.

Create New Post

The Create New Post action allows you to create a new WordPress post after the form is submitted. This makes it easy to create frontend forms that allows users to submit new posts to your website without having to login to the WordPress admin area.

Note: For all controls, you can use form field values just by writing the ID of the field plain without any additional syntax to the field input.

Setting	Description
Post Status	The status of the post. (draft, pending, private, publish, trash)
Post Type	Allows you to specify the type of post you want to create. You can select from a list of registered post types.
Post Categories	A repeater field that allows you to define the categories of the post using the category slug. You can add one or multiple categories.
Post Taxonomies	A repeater field that allows you to define the taxonomies of the post using the taxonomy slug & term. You can add one or multiple taxonomies.
Post Title	The title of the post.
Post Content	The content of the post.
Custom Fields	A repeater field that allows you to define the custom fields of the post using the field name & field value. You can add one or multiple custom fields.

Update Post

The Update Post action allows you to update an existing WordPress post after the form is submitted. This makes it easy to create frontend forms that allows users to update existing posts on your website without having to login to the WordPress admin area.

Note: For all controls, you can use form field values just by writing the ID of the field plain without any additional syntax to the field input.

Setting	Description
Post ID	The ID of the post.
Post Title	The title of the post.
Post Content	The content of the post.
Post Status	The status of the post. (draft, pending, private, publish, trash)
Post Excerpt	The excerpt of the post.
Post Date	The date of the post.

Note: By default, the form will reset all fields after submission. If you wish to retain the submitted data in the form fields, which really makes sense for the Update Post action, you can enable the Other > Disable Form Reset option.

Update Post Meta

The Update Post Meta action allows you to update post meta data after the form is submitted. This makes it easy to create frontend forms that allows users to update post meta data on your website without having to login to the WordPress admin area.

The control Post Meta Data is a repeater field that allows you to add multiple post meta data fields. It has the following items:

Setting	Description
Post ID	The ID of the post.
Post Meta Name	The name of the post meta, for example: cf_count.
Post Meta Value	The value of the post meta, for example: 1.
Update Type	What method should be used to update the current value? You can choose between the following options:
Ignore if empty	If checked, the post meta will not be updated when the form field value is empty
Live Update Selector	The selector of the element that will be updated live after receiving the response from the server.

You can use a static ID (1234), Dynamic Data ({post_id}) to get the current post ID, which works also inside a Query Loop, or a Form Field ID (fldkg) to obtain the value of a particular form field.

☝️ Pro tip: To obtain the post ID from a URL parameter, such as “id”, use a “Hidden” field and set its value to {url_parameter:id}. For example, if the URL is www.website.com?id=5678, the value of the hidden field will be 5678. This approach will also produce a value of 5678 for the Post ID of your action. This way you can use the same form to update multiple posts, by simply changing the URL parameter.

Replace Value: Replace the value with the new value.
Increment Number: Increment the number by 1.
Decrement Number: Decrement the number by 1.
Increment by Number: Increment the number by a specified amount.
Decrement by Number: Decrement the number by a specified amount.
Add to Array: Add the new value to the array.
Remove from Array: Remove the value from the array.

The Live Update Selector is really powerful. After receiving the response from the server, it will automatically inject the new data into an element of your choice. The Live Update Selector is a great way to update a page without having to reload, if you just want to update a small part of the page which is related to the data you just received.

Important: If you have a nested element structure, you will need to specify the selector for the innermost element.

Example: If you have the following HTML structure

<div id="myDiv">
  <p>Some text</p>
</div>

and you want to replace “Some Text” with the new value coming from the database, you will need to specify the following selector: #myDiv p. The first attempt is made to query the element inside the current form. If the element is not found, a search is performed within the document.

Update User

The Update User action allows you to update a user after the form is submitted. This action is only triggered after the form is submitted successfully.

Setting	Description
User ID	The ID of the user.
Only if user is logged in	If checked, the user is updated only when logged in.
User Email	The email address of the user to update.

Update User Meta

The Update User Meta action allows you to update user meta data after the form is submitted. This makes it easy to create profile pages that allow users to update their information on the frontend.

Setting	Description
User ID	The ID of the user.
Meta Key	The meta key of the user meta, for example: last_name.
Meta Value	The value of the user meta, for example: Doe.
Update Type	What method should be used to update the current value? You can choose between the following options:
Ignore if empty	If checked, the post meta will not be updated when the form field value is empty
Live Update Selector	The selector of the element that will be updated live after receiving the response from the server.

Replace Value: Replace the value with the new value.
Increment Number: Increment the number by 1.
Decrement Number: Decrement the number by 1.
Increment by Number: Increment the number by a specified amount.
Decrement by Number: Decrement the number by a specified amount.
Add to Array: Add the new value to the array.
Remove from Array: Remove the value from the array.

Important: If you have a nested element structure, you will need to specify the selector for the innermost element.

Example: If you have the following HTML structure

<div id="myDiv">
  <p>Some text</p>
</div>

Note: By default, the form will reset all fields after submission. If you wish to retain the submitted data in the form fields, which really makes sense for the Update User Meta action, you can enable the Other > Disable Form Reset option.

Add Option

The Add Option action is a powerful feature that enables you to seamlessly create and store new entries in the wp_options table of the WordPress database upon form submission. This functionality allows you to save a wide range of data types, such as settings, configurations, or any other custom data, directly within the WordPress environment.

The control Option Data is a repeater field that allows you to add multiple option data fields. It has the following items:

Setting	Description
Option Name	The name of the option, for example: my_option.
Option Value	Specify the value you want to associate with the option, such as '1'. This value can be a static input or dynamically generated based on user-submitted data using field IDs, allowing you to store various types of information.

Update Option

The Update Option feature in Pro Forms allows you to easily modify existing entries in the wp_options table of the WordPress database. Triggered upon form submission, this functionality enables efficient management of settings, configurations, and custom data.

The control Option Data is a repeater field that allows you to add multiple option data fields. It has the following items:

Setting	Description
Option Name	The name of the option, for example: my_option.
Option Value	Specify the value you want to associate with the option, such as '1'. This value can be a static input or dynamically generated based on user-submitted data using field IDs, allowing you to store various types of information.
Update Type	What method should be used to update the current value? You can choose between the following options:
Live Update Selector	The selector of the element that will be updated live after receiving the response from the server.

Replace Value: Replace the value with the new value.
Increment Number: Increment the number by 1.
Decrement Number: Decrement the number by 1.
Increment by Number: Increment the number by a specified amount.
Decrement by Number: Decrement the number by a specified amount.
Add to Array: Add the new value to the array.
Remove from Array: Remove the value from the array.

Important: If you have a nested element structure, you will need to specify the selector for the innermost element.

Example: If you have the following HTML structure

<div id="myDiv">
  <p>Some text</p>
</div>

Delete Option

The Delete Option feature in Pro Forms allows you to easily delete existing entries in the wp_options table of the WordPress database.

The control Option Data is a repeater field that allows you to add multiple option data fields. It has the following items:

Setting	Description
Option Name	The name of the option, for example: my_option.

Important: The deletion of options is irreversible. Please make sure that you know what you are doing before using this feature.

Set Storage Item

The Set Storage Item action allows you to store data in the browser’s local storage. This data can be retrieved later by using the Get Storage Item action.

The control Storage Item Data is a repeater field that allows you to add multiple storage item data fields. It has the following items:

Setting	Description
Storage Item Name	The name of the storage item, for example: my_item.
Storage Item Value	The value of the storage item, for example: 1.
Update Type	What method should be used to update the current value? You can choose between the following options:
Live Update Selector	The selector of the element that will be updated live after receiving the response from the server.

Replace Value: Replace the value with the new value.
Increment Number: Increment the number by 1.
Decrement Number: Decrement the number by 1.
Increment by Number: Increment the number by a specified amount.
Decrement by Number: Decrement the number by a specified amount.
Add to Array: Add the new value to the array.
Remove from Array: Remove the value from the array.

Important: If you have a nested element structure, you will need to specify the selector for the innermost element.

Example: If you have the following HTML structure

<div id="myDiv">
  <p>Some text</p>
</div>

Create Submission

The Create Submission action allows you to create a new submission in the database. This action is only triggered after the form is submitted successfully. Keeping form submissions in the database allows for easy organization and management of data in a centralized location. This makes it simpler to access, analyze, and export the collected information as needed.

Choosing this action, you’ll see a new group “Submissions”. This group contains the following controls:

Setting	Description
Form Title	Choose a title for the form. Displayed in the submissions table.
Maximum Submissions	The maximum number of submissions that will be stored.
Prevent Duplicates	If checked, the form will not allow duplicate submissions.

You can choose to compare the submissions based on existing form fields. Enter the Form Field ID you want to compare the submissions with, for example the ID of an email field. If there is already a submission with the same value in the chosen field, the form will not allow the submission. You can specify an unique message that will be displayed to the user if a duplicate submission is detected.

Note: To use this action, you need to activate the extension “Form Submissions”.

Tip: Using Submit Button Conditions, you can disable the submit button if a duplicate submission is detected. This way the user will not be able to submit the form.

Webhook

The Webhook action allows you to send data to a remote URL after the form is submitted. This is useful if you want to send the form data to a third-party service or application. You can create one or more Webhook actions to send the form data to multiple URLs.

Choosing this action, you’ll see a new group “Webhook”. This group contains the following controls:

Setting	Description
URL	The URL to send the data to.
HTTP Method	Choose `GET`, `POST`, `PUT`, `PATCH` or `DELETE`.
Content Type	Send data as `JSON` or `Form Data`.
Data	Key/value pairs, typically using field IDs.
Headers	Additional headers in key/value pairs.
Add HMAC Header	Add an HMAC header to verify the request.
HMAC Header Name	Name of the HMAC header.
HMAC Secret	Secret used to create the HMAC header.
Debug: Show Response in Console	Log the response in the browser console.

Create PDF

The Create PDF action allows you to create a PDF file using HTML after the form is submitted. For the rendering, we’re using the popular library dompdf.

Important ⚠️: Some CSS features like display: flex are not supported by dompdf.

Choosing this action, you’ll see a new group “Create PDF”. This group contains the following controls:

Setting	Description
PDF Name	The name of the PDF file. A timestamp will be appended.
Template Type	Choose between `HTML (Builder Control)` or `HTML (File)`. • HTML (Builder Control) – Create the template inside the builder. • HTML (File) – Use a file from `/uploads/bricksforge/pdf/templates/`.
Add as attachment	Attach the PDF to an email. Requires the Email action.
Show PDF Download after submission	Display a download link via the Download Info element. Don’t delete its default button.
Add to Media Library	Save the PDF in the media library.

When using this action, you can use the following variables in any other action:

{{live_pdf_url}}: The URL to the PDF file.
{{live_pdf_path}}: The path to the PDF file.
{{live_pdf_id}}: The ID of the PDF file. (only available if “Add to Media Library” is enabled)

Show Download Info

The Show Download Info action allows you to show a custom content area after a successful form submission. This is useful if you want to provide the user with a download link or other information after the form is submitted.

For this action, there are no specific settings. Just activate it, add the Download Info element to your form and customize it as you like.

After the form is submitted, the content of the Download Info element will be displayed to the user.

WooCommerce: Add To Cart

The WooCommerce: Add To Cart action allows you to add products to the WooCommerce cart after the form is submitted. This is useful if you want to create a custom checkout form.

Choosing this action, you’ll see a new group “WooCommerce: Add To Cart”. This group contains the following controls:

Setting	Description
Product	The product to add. Choose an existing product or “Custom” to specify an ID.
Product ID	ID of the product to add (only visible when “Custom” is selected).
Quantity	Quantity to add.
Price	Optional custom price. Leave empty to use the default.
Is Total Price	Treat the price as total, multiplied by quantity.
Custom Fields	Additional product meta in key/value pairs.
Consider Variations	Use selected variations and their prices. Add custom fields for each variation as needed.

When a new product is added to the cart, also the mini cart will be updated automatically.

Stripe Payment (Coming Soon)

The Stripe Payment action allows you to accept secure payments through Stripe Checkout Sessions directly from your forms. This integration is perfect for collecting payments for products, services, donations, or any other payment scenario.

The integration uses Stripe’s hosted Checkout page, providing a secure, PCI-compliant payment experience without requiring you to handle sensitive payment data. All payment processing is done by Stripe, ensuring maximum security and compliance.

Key Features

Secure Payment Processing - All transactions are processed through Stripe’s secure, PCI-compliant infrastructure
Webhook-Driven Actions - Form actions (emails, post creation, etc.) only execute after successful payment verification
Seamless User Experience - Automatic redirect to Stripe Checkout with real-time payment status updates
Cross-Browser Compatibility - Works across all major browsers with automatic tab synchronization

Setup Requirements

Before using the Stripe Payment action, you need to configure your Stripe API keys:

Get Your API Keys - Log in to your Stripe Dashboard and navigate to Developers > API keys
Configure Keys in Bricksforge:
- Go to Bricksforge > Elements > Pro Forms
- Click the settings icon to open the Pro Forms configuration
- Enter your Publishable Key and Secret Key
- Enter your Webhook Secret (see Webhook Configuration below)
- Save your settings

Important: Use Stripe’s test mode keys during development and switch to live mode keys only when you’re ready to accept real payments.

Webhook Configuration

Stripe webhooks are required for this integration to work properly. Webhooks allow Stripe to notify your server when payments are completed, ensuring that form actions only execute after successful payment.

Production Setup

In your Stripe Dashboard, go to Developers > Webhooks
Click Add endpoint
Enter your webhook URL: https://yourdomain.com/wp-json/bricksforge/v1/stripe-webhook
Select event: checkout.session.completed
Copy the Signing secret and add it to your Bricksforge settings

Local Development with Stripe CLI

For local testing, use the Stripe CLI to forward webhook events:

stripe listen --forward-to localhost:8080/wp-json/bricksforge/v1/stripe-webhook

The CLI will provide a webhook signing secret that you can use in your development environment.

Available Settings

Available Settings

Setting	Description
Payment Amount	The amount to charge (in your currency). Supports form field variables like `{{amount_field}}`.
Currency	The currency code (USD, EUR, GBP, etc.).
Payment Description	Description shown to customers during checkout. Supports form field variables.
Success Message	Message displayed after successful payment (if no Thank You Page is specified).
Thank You Page URL	Optional redirect URL after successful payment. Supports dynamic data. Leave empty to stay on the form page.
Cancel URL	Optional redirect URL if the user cancels the payment. Leave empty to return to the form page.
Customer Email	Map to an email form field to pre-fill customer information. Format: `{{email_field}}`.
Error Message	Custom error message shown if payment processing fails.

How It Works

User Submits Form - Form data is validated and the Stripe action is executed first
Redirect to Stripe - User is redirected to Stripe’s secure Checkout page
Payment Processing - User completes payment on Stripe’s hosted page
Return to Your Site - User is redirected back to your website
Webhook Verification - Stripe sends a webhook to verify the payment
Actions Execution - Only after webhook verification, all other form actions (emails, post creation, etc.) are executed
Final Redirect - If a Thank You Page is specified, the user is redirected to it

Security Note: All form actions are deferred until the webhook confirms successful payment. This prevents users from receiving emails or other benefits without completing payment.

User Experience Flow

With Thank You Page

When you specify a Thank You Page URL:

User is redirected to Stripe Checkout
After payment, user returns to the form page with a “Processing payment…” overlay
Webhook processes payment in the background
All form actions execute (emails sent, posts created, etc.)
User is automatically redirected to the Thank You Page

Without Thank You Page

When no Thank You Page is specified:

User is redirected to Stripe Checkout
After payment, user returns to the form page with a “Processing payment…” overlay
Webhook processes payment in the background
Overlay disappears and a success message is displayed
Frontend actions like confetti are executed on the form page

Multi-Tab Support

The integration automatically handles scenarios where browsers open Stripe Checkout in a new tab (e.g., Arc browser):

Both tabs show the processing overlay during webhook verification
Both tabs are synchronized using localStorage
Proper redirect or success message is shown in both tabs

Dynamic Payment Amounts

You can make the payment amount dynamic by using form field variables:

{{product_price}}

This allows users to select products or quantities that determine the final payment amount.

Combining with Other Actions

The Stripe action works seamlessly with all other Pro Forms actions:

Email - Send confirmation emails after successful payment
Create New Post - Create posts only after payment confirmation
Update Post Meta - Store payment information in custom fields
Webhook - Notify external services about successful payments
any other action you want to execute after successful payment

Important: All actions configured alongside the Stripe action will only execute after the webhook confirms successful payment. This ensures data integrity and prevents fraud.

Testing Your Integration

Use Test Mode - Always test with Stripe test mode keys first
Test Cards - Use Stripe’s test card numbers like 4242 4242 4242 4242
Verify Webhook - Check that your webhook endpoint is receiving events
Test All Actions - Confirm that emails, post creation, and other actions execute correctly
Test Redirects - Verify Thank You Page redirects and success messages

Troubleshooting

Issue	Solution
Payment succeeds but actions don’t run	Check that your webhook is configured correctly and receiving events
“Processing payment…” never disappears	Verify webhook secret is correct and your server can receive POST requests to the endpoint
404 error after Stripe redirect	Ensure your permalink structure is set correctly in WordPress Settings > Permalinks
Webhook signature verification fails	Double-check that the webhook secret in Bricksforge matches your Stripe webhook configuration

Delete Post

The Delete Post action allows you to delete an existing WordPress post after the form is submitted. This action can be useful for creating frontend post management systems where users can remove their content.

⚠️ Warning: This action permanently deletes posts and cannot be undone. Use with caution and ensure proper user authentication and permissions.

Setting	Description
Post ID	The ID of the post.

Reload Page

The Reload Page action automatically refreshes the current page after the form is submitted successfully. This is useful when you want to show updated content or clear the form state completely.

This action has no additional settings and will execute after all other form actions have been processed.

Delete User

The Delete User action allows you to delete a WordPress user account after the form is submitted. This is useful for account deletion forms or user management systems.

⚠️ Warning: This action permanently deletes user accounts and cannot be undone. Use with extreme caution and ensure proper authentication and security measures.

Setting	Description
User ID	The ID of the user.
Only if user is logged in	If checked, the action only executes when the user is logged in.

Conditional Field Logic

Conditional Field Logic allows you to create dynamic forms that adapt to your users’ input in real time, providing a seamless and intuitive experience.

If you want to display a field based on certain conditions, click on “Add Conditions”. You can add multiple conditions. Currently, the following conditions are available:

Condition Type	Description
Form Field	Check if a form field has a certain value.
Storage Item	Check if a storage item has a certain value.

With the “Conditions Relation”, you can choose if all conditions or any condition should be met.

If you need a deeper look into the Conditional Field Operators, check the section “Submit Button Conditions”, because the operators are the same.

Submit Button Conditions

This feature allows you to create dynamic forms that adapt to your users’ input in real time, providing a seamless and intuitive experience.

Submit Button Conditions enables you to define specific rules or conditions that determine the visibility and the enabled/disabled state of the submit button. By setting up these conditions, you can ensure that the form can only be submitted when certain criteria are met, such as when all required fields are filled or when the user provides valid information. This can be particularly useful in cases where you want to prevent incomplete or incorrect submissions, streamline the user experience, and ensure that your form captures accurate data.

For example, imagine you have a contact form that requires a name, email address, and message. By using the Submit Button Conditions feature, you can set up a rule that only enables the submit button when all of these fields have been filled out correctly. This not only ensures that you receive complete submissions, but also helps to guide users through the form and encourages them to provide the necessary information.

Activate Conditions

To activate the Submit Button Conditions feature, you need to enable the Submit Conditions option in the Submit Button group.

Add Conditions

To add a new condition to your Pro Forms, simply click the Add Item button. This will bring up a selection of conditional logic options that you can use to control the visibility and the enabled/disabled state of the submit button. These options cover a range of functionalities, allowing you to create conditions that depend on various factors, such as database values, form fields, and submission limits. Let’s take a closer look at each of these conditional logic options:

Condition Options

Condition Type	Description
Database: Option	This condition allows you to check if a specific option (wp_options table) exists in the database.
Post Meta Field	This condition allows you to check if a specific post meta field exists in the database.
Storage Item	This condition allows you to check if a specific storage item exists in the browser’s local storage.
Form Field	This condition allows you to check for the value of a specific form field.
Submission Limit Reached	This condition allows you to check if the maximum number of submissions has been reached.
Submission Field ID	This condition allows you to check for the value of a specific submission field.

Each condition field accepts also form field IDs. This allows you to create conditions that depend on the value of other form fields. Format: gmivqs

Condition Operators

When you select a condition, a new group of additional controls will appear, allowing you to customize the behavior of the submit button. These conditions offer a wide range of operators that help you define precise rules for when the submit button should be enabled or disabled, or when it should be visible or hidden. Let’s explore these operators in more detail:

Operator	Description
Is Equal	This operator checks if the value of the selected form field is equal to a specified value. If the values match, the condition is met and the submit button’s state will change accordingly.
Is Not Equal	Checks if the value is not equal to the specified value.
Is Greater Than	Checks if the value is greater than the specified value.
Is Greater Than Or Equal	Checks if the value is greater than or equal to the specified value.
Is Less Than	Checks if the value is less than the specified value.
Is Less Than Or Equal	Checks if the value is less than or equal to the specified value.
Contains	Checks if the value contains the specified value.
Not Contains	Checks if the value does not contain the specified value.
Starts With	Checks if the value starts with the specified value.
Ends With	Checks if the value ends with the specified value.
Is Empty	Checks if the value is empty.
Is Not Empty	Checks if the value is not empty.
Exists	Checks if the value exists.
Not Exists	Checks if the value does not exist.

Condition Relation

The Condition Relation option allows you to define the relationship between these conditions, determining how they should work together to affect the submit button’s state. You can choose between two types of relations: AND and OR.

Relation Type	Description
AND	When you select the AND relation, all the conditions must be met simultaneously for the submit button’s state to change. In other words, each condition acts as an additional requirement that must be fulfilled. This is useful when you want to enforce a strict set of criteria that must be satisfied before the user can submit the form.
OR	When you select the OR relation, the submit button’s state will change if at least one of the conditions is met. This means that satisfying any single condition will be enough for the state change to occur. This can be helpful when you want to offer alternative requirements or allow users to provide different types of information.

Submission Action

If the conditions are met, you can choose to perform one of the following actions (“Then”):

Action

Description

Hide Submit Button

When this action is selected, the submit button will be hidden from the user if the conditions are met. This means that the user will not be able to see or interact with the submit button, effectively preventing them from submitting the form. This can be useful in cases where you want to ensure that the form cannot be submitted until certain requirements are met or specific user actions are taken.

Disable Submit Button

When this action is selected, the submit button will be disabled if the conditions are met, but it will still be visible on the form. In this state, the user will not be able to click or interact with the submit button, which prevents them from submitting the form. This option can be helpful when you want to provide users with a visual indication that the form is incomplete or that certain criteria have not been met, while still preventing them from submitting the form.

Note: When the submit button is disabled, it will automatically have the disabled attribute added to its HTML. You can use this attribute in your CSS selectors to apply specific styles to the disabled state of the button. Here’s an example of how you might target and style the disabled submit button

.submit-button-wrapper button[disabled] {
  opacity: 0.5;
}

to change the opacity of the submit button when it is disabled.

Alternative Button Text

In order to enhance the user experience and provide clearer instructions or explanations about the form’s requirements, Pro Forms offers the Alternative Button Text option. This feature allows you to display a custom text on the submit button when it is disabled, giving users more context about why the button is not active and what they need to do to enable it.

To use the Alternative Button Text feature, simply enter your custom text in the provided input field. This text will replace the default submit button text whenever the button is disabled due to the conditions you’ve set. By providing users with this additional information, you can help them better understand the form’s requirements and guide them through the submission process more effectively.

For example, if you have a form that requires users to agree to the terms and conditions before submitting, you can set the Alternative Button Text to say “Please agree to the terms and conditions” when the submit button is disabled. This will inform users of the specific action they need to take in order to proceed with their submission.

Utilizing the Alternative Button Text feature is a great way to improve the overall user experience of your forms, ensuring that users are well-informed and feel confident in their ability to complete and submit the form successfully.

Spam Protection

We have integrated advanced spam protection features into our plugin to ensure that your forms remain safe from unwanted spam submissions and automated bots.

These tools help you effectively filter out spam submissions and verify that your form’s users are indeed human, significantly reducing the amount of spam and improving the overall security of your forms.

In the following sections, we will provide more details about how reCAPTCHA and hCaptcha can be set up and used in Pro Forms, allowing you to take advantage of these robust spam protection mechanisms and create a more secure and reliable form submission experience for your users.

reCAPTCHA

reCAPTCHA v3 is the latest version of Google’s widely-used spam protection service, designed to provide an even more seamless and user-friendly experience for your website visitors. Unlike previous versions, reCAPTCHA v3 does not require users to complete any challenges or puzzles. Instead, it works silently in the background, analyzing user behavior to determine if they are human or a bot.

Integrating reCAPTCHA v3 into Pro Forms provides an unobtrusive and efficient spam protection solution, ensuring the security of your forms without impacting the user experience.

Note: Note: While reCAPTCHA offers robust spam protection, it’s essential to be aware of potential privacy concerns in the EU due to its data collection and processing practices. Website owners should assess whether using reCAPTCHA aligns with their GDPR and privacy requirements. For an alternative solution, consider hCaptcha, which is designed with privacy in mind and offers better compatibility with GDPR and EU privacy regulations.

How to activate

To activate reCAPTCHA v3, you need to first create a reCAPTCHA v3 API key pair. You can do this by following the steps outlined in the official reCAPTCHA documentation. Then you need to enter your site key and secret key in the corresponding fields in the Bricks > Settings > API Keys settings page. After that, you can enable reCAPTCHA v3 in the Spam Protection group of the Pro Forms element.

hCaptcha

hCaptcha is a popular and privacy-focused alternative to reCAPTCHA, designed to protect your forms from spam and automated bots while prioritizing user privacy. By integrating hCaptcha into Pro Forms, you can ensure a secure and privacy-friendly experience for your website visitors.

Like previous versions of reCAPTCHA, hCaptcha requires users to complete various tasks, such as identifying objects in images, to prove that they are human. However, hCaptcha stands out due to its commitment to user privacy and data protection. It is specifically designed to minimize data collection and adhere to privacy regulations such as GDPR and the California Consumer Privacy Act (CCPA).

In addition to providing a secure and privacy-conscious spam protection solution, hCaptcha also offers a unique feature where website owners can earn rewards by contributing to various machine learning projects.

By integrating hCaptcha into your Pro Forms, you can effectively protect your forms from spam submissions and automated bots, while ensuring a privacy-friendly experience that aligns with modern data protection standards.

How to activate

To activate hCaptcha, you need to first create a hCaptcha API key pair. You can do this by creating an account on the hCaptcha website. Then you need to enter your site key and secret key in the corresponding fields in the Bricksforge > Elements > Pro Forms settings area via clicking the settings icon. After that, you can enable hCaptcha in the Spam Protection group of the Pro Forms element.

Settings

Setting	Description
Theme	The theme of the captcha. You can choose between `Light` and `Dark`.

Turnstile

Turnstile, created by Cloudflare, is a special security feature that works quietly in the background without bothering users with captchas. It uses smart technology to figure out if someone accessing a website or application is a real person or a harmful bot. By analyzing different factors, Turnstile can tell the difference and block any suspicious or malicious activity, like attacks or hacking attempts. This means users can enjoy a smooth experience without having to prove they’re human, while still keeping the platform protected from potential threats.

The advantage of Turnstile is that it doesn’t require any user interaction, so it doesn’t affect the user experience.

How to activate

To activate Turnstile, you need to first create a Turnstile API key pair. You can do this by creating an account on the Cloudflare website. Then you need to enter your site key and secret key in the corresponding fields in the Bricksforge > Elements > Pro Forms settings area via clicking the settings icon. After that, you can enable Turnstile in the Spam Protection group of the Pro Forms element.

Once you’ve activated Turnstile, you can use the Form Field Turnstile to move the field to your desired position.

Settings

Setting	Description
Appearance	The appearance of the Turnstile field. You can choose between different options: • Always: The Turnstile field is always visible. • Execute: The Turnstile field is only visible when the form is submitted. • Interaction Only: The Turnstile field is only visible when an user interaction is required. Otherwise, it is hidden.
Theme	The theme of the Turnstile field. You can choose between `Dark` and `Light`.
Size	The size of the Turnstile field. You can choose between `Normal` and `Compact`.
Language	The language of the Turnstile field. You can choose between different languages. If no language is selected, the Turnstile will automatically detect the language of the user’s browser.
Turnstile Error Message	Here you can enter an individual error message for the Turnstile field. This message will be displayed if the user is not recognized as a human or if the validation is still running.

Multi Step Forms

Pro Forms lets you create multi-step forms that break down long forms into smaller, more manageable steps. This helps users stay organized and focused while filling out your form. With Pro Forms, you can easily add and customize multi-step forms to make form filling a breeze for your users.

How to use

To activate Multi Steps, you just need to add a Step field type between other fields in your form. Each Step field will create a new section of the form, allowing you to split it into multiple steps.

When you add a Step field to your form, you can define a label for each step. The label will appear in the step navigation, which allows users to easily see their progress through the form.

Customize

To customize the look and feel of your multi-step forms, you can use the following settings in the group Multi Step:

Setting	Description
Previous Text	This option allows you to change the text of the previous button.
Next Text	This option allows you to change the text of the next button.
Flex Direction	The direction of the flex items. (Vertical, Horizontal, Reverse)
Step Button Background	The background color of the step buttons.
Step Button Typography	The typography settings of the step buttons.
Step Button Border	The border settings of the step buttons.
Step Button Padding	The padding of the step buttons.
Step Button Margin	The margin of the step buttons.
Show Summary	This option allows you to show a summary of the form at the end of the form.
Show Steps	This option allows you to show the steps above your form.

Summary Settings

If Show Summary is enabled, you will see the new group Multi Step Summary in your form settings. This group allows you to customize the summary of your multi step form. This group contains the following settings:

Setting	Description
Button Text	Changes the text of the summary button. Default: “Show Summary”
Button Background	Changes the background color of the summary button.
Button Typography	Changes the typography of the summary button.
Button Border	Changes the border of the summary button.
Button Padding	Changes the padding of the summary button.
Button Margin	Changes the margin of the summary button.
Container Background	Background color of the summary container.
Container Margin	Margin of the summary container.
Container Padding	Padding of the summary container.
Main Headline	Headline of the summary. Default: “Summary”
Main Headline Typography	Typography of the summary headline.
Main Headline Margin	Margin of the summary headline.
Item Background	Background color of each summary item.
Item Margin	Margin of each summary item.
Item Padding	Padding of each summary item.
Item Border	Border of each summary item.
Item Headline Typography	Typography of summary item headlines.
Item Value Typography	Typography of summary item values.
Show Empty Fields	Show empty fields in the summary.
Text for empty fields	Text used for empty fields (visible when Show Empty Fields is enabled).

Step Settings

If Show Steps is enabled, you will see the new group Step Settings in your form settings. This group allows you to customize the steps of your multi step form.

This group contains the following settings:

Setting	Description
First Step Text	Changes the text of the first step button. Default: “Start”
Step Typography	Typography of the step buttons.
Current Step Typography	Typography of the current step button.
Top Offset	Top offset of the step buttons.
Justify Content	The direction of the flex items. (Vertical, Horizontal, Reverse)
Gap	The gap between the flex items.
Allow Clicks on Steps	Allow users to jump to a step by clicking.

Pro Tip: Use the element Pro Forms Steps to show the steps of your form in a different place by connecting it to your form. This gives you more flexibility to customize the look, feel and position of your steps.

Confirmation Email

Since Bricksforge 0.9.9, you can send a confirmation email to the user after submitting the form. This email can be customized in the form settings under Confirmation Email when using the form action Email.

Live Post/User IDs

There are two special variables {{live_post_id}} and {{live_user_id}} that can be used for several form actions.

For example, if you run the “Create New Post Action” and the “Update Post Meta” action together, you can use the {{live_post_id}} variable to update the post meta of the newly created post. Just enter {{live_post_id}} as post ID in the “Update Post Meta” action and the post meta will be updated after the post is created.

The same way, you can use the {{live_user_id}} variable to update the user meta of the newly created user using the actions “Create New User” and “Update User Meta”.

Form Security and Best Practices

Pro Forms includes multiple layers of security to protect your forms from spam, abuse, and malicious attacks. Understanding and implementing these security measures is crucial for maintaining a secure website.

Security Features

Server-Side Validation

All form data is validated on the server side, regardless of client-side validation settings. This prevents malicious users from bypassing validation by disabling JavaScript or manipulating form data.

CSRF Protection

Pro Forms includes built-in Cross-Site Request Forgery (CSRF) protection to prevent unauthorized form submissions from external sites.

File Upload Security

When using file upload fields, Pro Forms implements several security measures:

File type validation and restrictions
File size limits
Malicious file detection
Secure file storage with randomized names
Optional virus scanning integration

Spam Protection Layers

Pro Forms offers multiple anti-spam solutions that can be used together:

Honeypot Fields - Hidden fields that should remain empty (bots often fill all fields)
reCAPTCHA v3 - Google’s invisible spam protection
hCaptcha - Privacy-focused alternative to reCAPTCHA
Cloudflare Turnstile - Seamless bot detection without user interaction
Rate Limiting - Prevents rapid-fire form submissions
IP-based Restrictions - Block specific IP addresses or ranges

Best Practices

Form Configuration

Always enable server-side validation for critical fields
Use appropriate field types (email for emails, tel for phone numbers)
Implement proper conditional logic to reduce form complexity
Set reasonable file upload limits and restrictions
Enable spam protection appropriate for your privacy requirements

Data Handling

Only collect data that you actually need
Use secure storage for sensitive information
Implement proper data retention policies
Consider GDPR and other privacy regulations when collecting personal data
Use the “Update Post Meta” action with appropriate permissions for user-generated content

Security Monitoring

Regularly review form submissions for patterns of abuse
Monitor failed validation attempts
Keep Pro Forms and WordPress updated
Use strong passwords and limit administrative access
Consider implementing additional security plugins for enhanced protection

Performance Optimization

Use conditional logic to reduce form complexity
Optimize file upload sizes and formats
Implement proper caching strategies
Monitor form submission performance and database impact

Recommended Security Stack

For maximum security, we recommend implementing this combination:

Cloudflare Turnstile or reCAPTCHA v3 for invisible bot protection
Honeypot fields for additional spam filtering
Server-side validation on all critical fields
File upload restrictions with proper type validation
Rate limiting to prevent abuse
Regular security audits and monitoring

Variables

The best approach to use variables of form fields is to use the syntax {{field_id}}. For example, if you have a form field with the ID email, you can use the variable {{email}} to use the value of the email field in other form actions. This allows you to use String Interpolation to create dynamic values. For example, you could write something like this:

Hello {{first_name}} {{last_name}}, your email is {{email}}.

Variable Filters

You can use variable filters to modify the value of a variable.

:implode

The :implode filter allows you to implode an array.

Old value: ["one", "two", "three"]
New value: one, two, three

:array

The :array filter allows you to convert a string to an array.

Old value: one, two, three
New value: ["one", "two", "three"]

:url

The :url filter is for WordPress Media files and allows you to get the URL of a media file instead of the ID.

Old value: 123
New value: https://example.com/wp-content/uploads/2021/01/01/image.jpg

Working with Repeater Fields

The “Update Post Meta” action is allowing you to work with Repeater Fields of providers like ACF, Metabox, JetEngine or ACPT.

When adding a new Post Meta Field, you can see a toggle “Is Repeater”. If you enable this toggle, new fields will appear:

Setting	Description
Repeater Action	What do you want to do with the repeater field? You can choose between `Add Row`, `Update Row` and `Remove Row`, `Add Sub Row`, `Update Sub Row` and `Remove Sub Row`.
Row Number	The row number of the repeater field. This field is only visible if you choose `Update Row` or `Remove Row` as Repeater Action.
All Rows	If you want Bricksforge to loop trough all rows to find the row you want to update, you can enable this option. This field is only visible if you choose `Update Row` as Repeater Action.
Row Fields	The fields of the repeater row. This field expects a name and a value. Also, you can toggle on “Is Repeater” here as well to work with nested repeater fields.

Important: By default, Bricksforge will update only the first matching repeater field. If you want Bricksforge to loop trough all rows to find the row you want to update, you can enable the option “All Rows”.

Example

Let’s say you have some Form Input fields which are looped trough a Repeater Field. The Repeater Field has the name “my_repeater_field”. The Form Input fields have the names / custom IDs “my_input_field_1”, “my_input_field_2” and “my_input_field_3”. When selecting “All Rows”, Bricksforge will loop trough all rows of the Repeater Field to find the row you want to update. Here, it is important to use the index as prefix in the name of the Form Input fields. This way, Bricksforge will know which row to update.

Example: “my_input_field_1”, “my_input_field_2”, “my_input_field_3”.

For the index, you can also use a Dynamic Data Tag, for example: {brf_loop_index}. This Tag accepts an offset as attribute. By default, the loop index of the first item is 0. For ACF, rows are starting with 1. So if using ACF, you should write something like that:

{brf_loop_index:1}.

For your Input Field ID, a possible value would be: my_input_field_{brf_loop_index:1} when using ACF, or my_input_field_{brf_loop_index} when using Metabox or other providers.

This ID can later be used as value of the key|value pairs in the “Row Fields” field.

For example, as name, you enter the repeater name, for example “my*repeater_field”. As value, you enter the ID of the Form Input field, for example {{my_input_field*{brf_loop_index:1}}}.

This way, Bricksforge will loop trough each row and find the row you want to update. In the example above, it will update the row with the index 1, 2 and 3.