Pro Forms

Pro Forms is a powerful element that extends the functionality of the native Bricks Form. With Pro Forms, you can create complex forms with many additional fields, such as calculators, rich text, text separators, and more. Pro Forms also introduces a range of new form actions that allow you to interact with the database, enabling you to create new posts, update post metadata, and manipulate user data.

New: Nestable Pro Forms: Since version 1.0.5, you can use the new approach for creating forms. Now, the “Pro Forms” element is a Nestable Element. This means, you can use single Bricks Elements to create your form. This makes it much easier to create complex forms with many fields and a layout which needs a lot of customization and flexibility. To get an overview about it, read the Nestable Pro Forms section.

Main Features

Easily create forms with a wide range of fields, including advanced fields such as calculators, rich text, and text separators.
Use powerful form actions to interact with the database: Introduces a range of new form actions that enable you to interact with the WordPress database, including creating new posts, updating post metadata, and manipulating user data.
Conditional Field Logic: Supports conditional field logic, which allows you to show or hide fields based on the values of other fields.
Conditional Submit Logic: Supports conditional submit logic, which allows you to decide whether or not a submit button should be displayed or disabled based on the values of other fields.
Easy customization: Highly customizable with a wide range of options that allow you to tailor forms to your specific needs.
Create Frontend Forms: Create frontend forms that interact directly with the WordPress database, allowing clients to submit and manipulate data directly from your website.
Submissions stored in the database: Stores form submissions in the WordPress database, making it easy to manage and analyze data. A useful table with filtering options allows you to sort, search, and export submission data.
Prevent duplicates: Create rules to prevent duplicate submissions based on certain criteria, such as email address. This ensures each submission is unique and avoids data redundancy.
Multi-Step Forms: Supports multi-step forms, enabling you to break up longer forms into smaller, more manageable sections. An optional separate element can be used to show the steps and style them according to your needs.
Summary before submission: Displays a summary of the user’s input before they submit the form, helping to prevent errors and improve the user experience.
Live Update Selectors: Includes live update selectors for some actions, allowing you to display real-time updates to frontend values as they are updated in the database. This provides a more dynamic and interactive user experience.

Fields

Form fields are the elements that allow you to collect various types of data from users. Pro Forms comes with a wide range of form fields, including standard fields like text, email, and checkbox fields, as well as more advanced fields like file upload and calculation fields. You can use these form fields to create complex and customizable forms that meet your specific requirements. Currently, Pro Forms is coming with the following fields:

Email

This field is useful for collecting email addresses. The email field will validate the email address to ensure it is in the correct format.

Label: The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Required: Is the field required?
Autocomplete: The autocomplete attribute specifies whether or not an input field should have autocomplete enabled. Here you can choose between different, predefined values.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

Text

A field for collecting text input. This field is useful for collecting short text input, such as a name or a subject.

Label: The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Required: Is the field required?
Autocomplete: The autocomplete attribute specifies whether or not an input field should have autocomplete enabled. Here you can choose between different, predefined values.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

Textarea

A field for collecting text input with multiple lines. This field is useful for collecting longer text input, such as a message or description.

Label: The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Height: The height of the field.
Required: Is the field required?
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

Rich Text

A field for collecting rich text input, which is available since version 0.9.8. This field is useful for collecting longer text input, such as a description or post content. The rich text field allows you to format text using a rich text editor.

You can choose between different rich text editors changing the Style control. “Quill” (Flat Toolbar, ToolTip Based) gives you more styling possibilities and flexibility. Also this editor is more lightweight than the second, “TinyMCE”. One reason to use “TinyMCE” (WordPress) is that it is more familiar to WordPress users. “TinyMCE” is the default editor for WordPress posts and pages which are using the “Classic Editor”. Recommended: “Quill” (Flat Toolbar, ToolTip Based)

Style: The style of the rich text editor. You can choose between Flat Toolbar, ToolTip Based and WordPress. The Flat Toolbar and ToolTip Based styles use the Quill rich text editor, while the WordPress style uses the TinyMCE rich text editor.
Label: The label of the field.
Placeholder: The placeholder of the field.
Formats: This control enables you to create your own custom toolbar buttons. If you’re using a Quill Editor-based style, you can select the buttons you want to use from a drop-down list. The order in which you select the options determines their position on the toolbar.

For TinyMCE Editor-based styles, you can specify the buttons using a text field. Enter the button names in the order you want them to appear, separated by |. A list of available buttons is provided in the TinyMCE Documentation.

Example: bold italic underline | alignleft aligncenter alignright
Use Bricks Colors: If enabled, the rich text editor will use the colors defined in one of your Bricks Color Palette. If disabled, the rich text editor will use the default colors.
Color Palette: If Use Bricks Colors is enabled, you can select the color palette you want to use from a drop-down list.
Min Height: The minimum height of the field.
Read Only: Is the field read only? (not editable)
Initial Value: The initial value of the field.
Width: The width of the field.
Required: Is the field required?
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

You can find the styling options under Fields > Rich Text

Tel

This field is useful for collecting telephone numbers, such as a phone number or fax number.

Label: The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Required: Is the field required?
Autocomplete: The autocomplete attribute specifies whether or not an input field should have autocomplete enabled. Here you can choose between different, predefined values.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

Number

A field for collecting numeric input. This field is useful for collecting numbers, such as a quantity or price.

Min: The minimum value of the field.
Max: The maximum value of the field.
Label The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Required: Is the field required?
Autocomplete: The autocomplete attribute specifies whether or not an input field should have autocomplete enabled. Here you can choose between different, predefined values.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

URL

A field for collecting URL input. This field is useful for collecting URLs, such as a website address.

Label: The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Required: Is the field required?
Autocomplete: The autocomplete attribute specifies whether or not an input field should have autocomplete enabled. Here you can choose between different, predefined values.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

Checkbox

This field is useful for collecting a single or multiple checkbox input, such as a list of options.

Label: The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Required: Is the field required?
Options: With this field, you can add options. Add options one by line

You can use a value|label syntax.

Example:
```
apples|Apples
oranges|Oranges
bananas|Bananas
```
This will create three options with the following values: apples, oranges, and bananas and the following related labels: Apples, Oranges, and Bananas. If you want to set an initial value, use the value of the option you want to select, for example: bananas.

Populate with PHP Function

You can also populate the options with a function, using the Bricks {{echo:function_name}} Dynamic Data Tag. Let’s say we add a function with the name get_options to our theme’s functions.php file. The function should return a string with the options, using the value|label syntax. The function could look like this:
```
function get_options() {

    // Create an array of options
    $options = [
        [
            'label' => 'Option 1',
            'value' => 'option-1',
        ],
        [
            'label' => 'Option 2',
            'value' => 'option-2',
        ],
        [
            'label' => 'Option 3',
            'value' => 'option-3',
        ],
    ];

    // Convert the array into a string with the value|label syntax
    $options = implode("\n", array_map(function ($v) {
        return $v['value'] . '|' . $v['label'];
    }, $options));

    // Return the string
    return $options;

}
```
What we’re doing here is creating an array of options, then using the array_map function to convert the array into a string with the value|label syntax. We then return the string. Now, in our Bricks Checkbox field, we can use the {{echo:get_options}} Dynamic Data Tag to populate the options.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

Select

This field is useful for collecting a single select input, such as a list of options.

Label: The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Required: Is the field required?
Options: With this field, you can add options. Add options one by line

You can use a value|label syntax.

Example:
```
apples|Apples
oranges|Oranges
bananas|Bananas
```
This will create three options with the following values: apples, oranges, and bananas and the following related labels: Apples, Oranges, and Bananas. If you want to set an initial value, use the value of the option you want to select, for example: bananas.

Populate with PHP Function

You can also populate the options with a function, using the Bricks {{echo:function_name}} Dynamic Data Tag. Let’s say we add a function with the name get_options to our theme’s functions.php file. The function should return a string with the options, using the value|label syntax. The function could look like this:
```
function get_options() {

    // Create an array of options
    $options = [
        [
            'label' => 'Option 1',
            'value' => 'option-1',
        ],
        [
            'label' => 'Option 2',
            'value' => 'option-2',
        ],
        [
            'label' => 'Option 3',
            'value' => 'option-3',
        ],
    ];

    // Convert the array into a string with the value|label syntax
    $options = implode("\n", array_map(function ($v) {
        return $v['value'] . '|' . $v['label'];
    }, $options));

    // Return the string
    return $options;

}
```
What we’re doing here is creating an array of options, then using the array_map function to convert the array into a string with the value|label syntax. We then return the string. Now, in our Bricks Select field, we can use the {{echo:get_options}} Dynamic Data Tag to populate the options.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

Radio

This field is useful for collecting a single radio input, such as a list of options.

Label: The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Required: Is the field required?
Options: With this field, you can add options. Add options one by line

You can use a value|label syntax.

Example:
```
apples|Apples
oranges|Oranges
bananas|Bananas
```
This will create three options with the following values: apples, oranges, and bananas and the following related labels: Apples, Oranges, and Bananas. If you want to set an initial value, use the value of the option you want to select, for example: bananas.

Populate with PHP Function

You can also populate the options with a function, using the Bricks {{echo:function_name}} Dynamic Data Tag. Let’s say we add a function with the name get_options to our theme’s functions.php file. The function should return a string with the options, using the value|label syntax. The function could look like this:
```
function get_options() {

    // Create an array of options
    $options = [
        [
            'label' => 'Option 1',
            'value' => 'option-1',
        ],
        [
            'label' => 'Option 2',
            'value' => 'option-2',
        ],
        [
            'label' => 'Option 3',
            'value' => 'option-3',
        ],
    ];

    // Convert the array into a string with the value|label syntax
    $options = implode("\n", array_map(function ($v) {
        return $v['value'] . '|' . $v['label'];
    }, $options));

    // Return the string
    return $options;

}
```
What we’re doing here is creating an array of options, then using the array_map function to convert the array into a string with the value|label syntax. We then return the string. Now, in our Bricks Radio field, we can use the {{echo:get_options}} Dynamic Data Tag to populate the options.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

File Upload

This field is useful for collecting a file upload input, such as a file or image.

Label: The label of the field.
Initial Value: The initial value of the field.
Choose Files Label The label of the button to choose files.
Max Files The maximum number of files that can be uploaded.
Max Size The maximum size of the file that can be uploaded.
Width The width of the field.
Allowed File Types The allowed file types. Add file types comma separated.
Hide file name text preview This option will hide the file name text preview when a file is uploaded.
Hide Image Preview: This option will hide the image preview when an image is uploaded. (since 0.9.8)
Typography With this field, you can style the typography of the field.
Background With this field, you can style the background of the field.
Border With this field, you can style the border of the field.
Required Is the field required?
ID The id of the field.
CSS Class: Add a custom CSS class to the field.

Password

This field is useful for collecting a password input. Password fields are similar to text fields, except that the characters are masked.

Label: The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Required: Is the field required?
Autocomplete: The autocomplete attribute specifies whether or not an input field should have autocomplete enabled. Here you can choose between different, predefined values.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

Date Picker

This field is useful for collecting dates, such as a date of birth.

Label: The label of the field.
Placeholder: The placeholder of the field.
Initial Value: The initial value of the field.
Width: The width of the field.
Enable Time Enable time selection.
Language: The locale you want to use for the date picker. Example: en for English, de for German, fr for French, etc.
Date Format: The format you want to use for the date. Example: Y-m-d for 2021-12-31, d.m.Y for 31.12.2021, m/d/Y for 12/31/2021.
Range Picker: If enabled, the user can select a date range instead of a single date.
Enable Specific Days: If enabled, you can specify specific days that can be selected by the user.
- From Date: The first date that can be selected by the user.
- To Date: The last date that can be selected by the user.
Enable specific weekdays: If enabled, you can specify specific weekdays that can be selected by the user.
Disable specific days: If enabled, you can specify specific days that cannot be selected by the user.
- From Date: The first date that cannot be selected by the user.
- To Date: The last date that cannot be selected by the user.
Show Visual Calendar: If enabled, the date picker will show a visual calendar instead of a text input.
Min Time The minimum time that can be selected.
Max Time The maximum time that can be selected.
Required: Is the field required?
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

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.

Label: The label of the field.
Formula: Enter the formula you want to calculate. You can use the following operators: +, -, *, /, (, ). To include the values of other fields in the form, use the syntax {field_id}.

Examples:
1. Calculate the double of the value in field {wofuw}:
```
{wofuw} * 2
```
2. Calculate the sum of the values in fields {wofuw} and {dofjd}:
```
{wofuw} + {dofjd}
```
3. 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}
```
4. 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})
```
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.

Hidden

The Hidden field enables you to store a value that remains hidden from the user’s view. This value can be accessed and utilized in your form actions. For instance, you can assign an initial value to the Hidden field, such as a Post ID loaded from a URL parameter.

Label: The label of the field.
Value: The initial value of the field.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

Heading

The Heading field allows you to add a headings to your form to separate different sections.

HTML Tag: The HTML tag which will be used to render the field. You can choose between h1, h2, h3, h4, h5 and h6.
Label: The label of the field.
Add Description: Add a description to the field. The description will be displayed below the heading.
Description: The description of the field. Visible if Add Description is enabled.
ID: The id of the field.
CSS Class: Add a custom CSS class to the field.

Note: You can find the styling options under Fields > Heading

Divider

The Divider field allows you to add a divider to your form to separate different sections.

Label The label of the field. The label is not visible in the frontend.
Width The width of the field.
ID The id of the field.
CSS Class: Add a custom CSS class to the field.

Note: You can find the styling options under Fields > Divider

Shortcode

The Shortcode field allows you to add a shortcode to your form. This way you can easily include your Bricks Templates or other things into your form.

Label The label of the field. The label is not visible in the frontend.
Shortcode The shortcode you want to add to your form. Example: [bricks_template id="123"]
Width The width of the field.
Required Is the field required?
ID The id of the field.
CSS Class: Add a custom CSS class to the field.

Step

The Step field provides the functionality to divide your form into separate sections or steps. When you add this field, your form will be automatically divided into multiple steps, which can be navigated by the user via the Previous/Next buttons. Each Step Field corresponds to a specific step in the form, allowing users to move seamlessly between them.

Label: The label of the field. This label will be used for the step navigation.

Note: You can find more settings under the Field Group Multi Step

Group Start

Since Bricksforge 1.0.2, you can organize your fields in groups. The Group Start field allows you to start a new group of fields. After the Group Start field, you can add as many fields as you want. The fields will be added to the group until you add a Group End field.

Note: You can find the styling options under Fields > Group

Group End

The Group End field allows you to end a group of fields. After this element, fields will follow the normal order again.

Note: You can find the styling options under Fields > Group

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 bricks/form/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}}.

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 Clicking this button, Bricksforge will automatically update the email content with the latest changes you made to the form and build name value pairs.
Live Refresh Email Content in Builder If enabled, the email content will be automatically refreshed in the builder when you make changes to the form and build name value pairs.
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 a different page after the form is submitted. This action is only triggered after the form is submitted successfully.

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.

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.

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:

Method: The method you want to use. You can choose between Reset Password Email (Recommended) and Update Password.
User Email: The email address of the user you want to reset the password for. You can use any form field IDs using the syntax field_id.

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

New Password: The new password for the user. You can use any form field IDs using the syntax field_id.
Server Side: Verify Password Confirmation: If enabled, the password confirmation will be verified on the server side. If activated, you need to add an additional field to your form for the password confirmation. The field ID of the password confirmation field needs to be added to the Password 2 (Confirmation Field) option.
Server Side: Allow only strong passwords: If enabled, only strong passwords will be accepted. This is recommended for security reasons.
Server Side: Verify Current Password: If enabled, the current password of the user will be verified on the server side. If activated, you need to add an additional field to your form for the current password. The field ID of the current password field needs to be added to the Current Password option.

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.

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.

Post ID: The ID of the post.

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.
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:

Post ID: The ID of the post.

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.
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:
- 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.
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.

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 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 allows users to update their user data on your website without having to login to the WordPress admin area.

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:
- 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.
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.

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.

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:

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:

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:
- 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.
Live Update Selector: The selector of the element that will be updated live after receiving the response from the server.

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.

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:

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:

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:
- 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.
Live Update Selector: The selector of the element that will be updated live after receiving the response from the server.

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.

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:

Form Title: Choose a title for the form. This title will be 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:

URL: The URL to send the data to.
HTTP Method: The HTTP method to use. You can choose between GET, POST, PUT, PATCH and DELETE.
Content Type: The content type to use. You can choose between JSON and Form Data.
Data: The data to send to the URL in key value pairs. You can use the form field IDs as keys and the form field values as values.
Headers: The headers to send to the URL in key value pairs. You can use the form field IDs as keys and the form field values as values.
Add HMAC Header: If checked, a HMAC header will be added to the request. This is useful if you want to verify the request on the remote URL.
HMAC Header Name: The name of the HMAC header.
HMAC Secret: The secret to use for the HMAC header.
Debug: Show Response in Console: If checked, the response from the remote URL will be logged 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 “modern” 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:

PDF Name: The name of the PDF file. At the end of the name, a timestamp will be added to ensure that the PDF is unique.
Template Type: The type of the template. You can choose between HTML (Builder Control) and HTML (File). For both methods, you can use Form Field Variables and Dynamic Data.
- HTML (Builder Control): If you choose this option, you can create the template directly in the form builder.
- HTML (File): If you choose this option, you can use a custom file as template. The file must be located in the folder /wp-content/uploads/bricksforge/pdf/templates/. Enter the name of the file you want to use for your PDF.
Add as attachment: If checked, the PDF will be added as attachment to the email. Important: The Email action must be enabled.
Show PDF Download after submission: If checked, the user will be able to download the PDF after the form is submitted. For this, you need to include the Download Info element. This element is a Nestable Element and represents the box that will appear after a successful form submission. Important: Do not delete the default button element, as the pdf download link will be injected into this element.
Add to Media Library: If checked, the PDF will be added to the media library. This may be useful if you want to add it to custom fields from providers like ACF or Metabox, as they are expecting Attachment IDs instead of URLs.

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:

Product: The product to add to the cart. You can choose between your existing products. Choose “Custom” to add a Product ID.
Product ID: The ID of the product to add to the cart. This field is only visible if you choose “Custom” as product.
Quantity: The quantity of the product to add to the cart.
Price: With this field, you can set a custom price for the product. Leave empty to use the default price.
Is Total Price: If checked, the price will be used as total price. This means that the price will be multiplied by the quantity.
Custom Fields: The custom fields to add to the cart in key value pairs. You can use the form field IDs as keys and the form field values as values. The custom fields will be added as product meta.
Consider Variations: If your product is a variable product, you can use this option to consider the variations. Depending on the selected variation, the price of your variation will be used. Make sure to add Custom Fields for each variation. Otherwise the variations will not be considered. Example: If you have a variable product with the variations “Small”, “Medium” and “Large”, you need to add Custom Fields for each variation. For example, you can add a Custom Field with the key “Small” and the value “Small”. This way the variation “Small” will be considered and the price of the variation will be used.

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

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:

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

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:

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.

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”):

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

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

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:

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:

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: Changes the background color of the summary container.
Container Margin: Changes the margin of the summary container.
Container Padding: Changes the padding of the summary container.
Main Headline: Changes the headline of the summary. Default: “Summary”
Main Headline Typography: Changes the typography of the summary headline.
Main Headline Margin: Changes the margin of the summary headline.
Item Background: Changes the background color of the summary items.
Item Margin: Changes the margin of the summary items.
Item Padding: Changes the padding of the summary items.
Item Border: Changes the border of the summary items.
Item Headline Typography: Changes the typography of the summary item headlines.
Item Value Typography: Changes the typography of the summary item values.
Show Empty Fields: This option allows you to show empty fields in the summary. Otherwise, they will be hidden.
Text for empty fields: This option allows you to change the text for empty fields. Default: ”/“. This setting is only visible if 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:

First Step Text: Changes the text of the first step button. Default: “Start”
Step Typography: Changes the typography of the step buttons.
Current Step Typography: Changes the typography of the current step button.
Top Offset: Changes the 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: This option allows you to allow users to click on the steps to jump to a specific step.

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”.

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:

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 expexts 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 repepeater 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.

Nestable Pro Forms

This is the new approach of creating forms. Since Bricksforge 1.0.5, the “Pro Forms” element is a Nestable Element. Also, activating Pro Forms, you will now see a new group “Bricksforge Forms” and additional Form related elements in the Elements Panel. These new elements can be used to build your form in a very flexible way. You can nest them inside each other and create complex forms. But you’re not limited to the form related Bricksforge elements. You can use any Bricks element you want inside your form. This gives you a lot of flexibility and allows you to create forms in a very intuitive way.

Understanding the new approach

In general, you can use Pro Forms the same way as before. The main difference is on how you add form fields to your form. Instead of adding form fields using the Repeater Field inside the Pro Forms Settings area, you can now add form fields using the new form related elements. These elements can be found in the Elements Panel under “Bricksforge Forms”. To insert a form field to your form, simply add the desired field as child of the “Pro Forms” element.

Technically, you could use both ways. The children of the “Pro Forms” element will be rendered below the form fields added using the Repeater Field inside the Pro Forms Settings area. However, it’s not recommended to use both methods simultaneously as it may lead to confusion and unexpected behavior. It’s best to stick to one method for consistency and ease of management.

Form Actions

Despite the change in how you add form fields, the way you create form actions remains exactly the same. Actions can be set up using the settings of the Pro Forms field. To make it easier and more understandable, the form fields added using the nestable approach will allow you to define a custom ID. This ID can be used to map certain form fields to actions.

Styling

In general, you can apply global styles to your form using the standard Pro Forms Settings. This allows you to add a consistent style to all form input fields. However, with the new nestable approach, some fields also include additional styling options. These can be used to further customize the appearance of your form, providing a more tailored user experience. If using styles on the form field level, it’s recommended to add a global class which takes those styles.

Elements

Input Elements

Input Elements are the most common form fields. They allow users to enter data into a form, such as text, numbers, or dates. The settings are the same as in the Pro Forms Settings area. However, some fields also include additional styling options.

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.

Slider Settings

Handlers: A Handler is a draggable element that can be used to select a value. You can add as many handlers as you want. Each Handler takes the following settings:
- Value: The value of the handler. Example: 10 or “10MB”
- Connect: The connect option allows you to connect the handler to another handler. This way you can create a range slider. Example: If you have two handlers with the values 10 and 20, you can connect them. This will change the background color of the slider between the two handlers.
- Binding: If you want to bind your handler to another form field, just enter the ID of the form field here. Example: If you have a form field with the ID “slider_value”, you can enter “slider_value” here. This way the value of the form field will be updated when the handler is moved. Also, because we are using two way binding here, the handler will be updated when the value of the form field is changed.
- Show Tooltips: If enabled, a tooltip will be displayed when the handler is moved. The tooltip will display the value of the handler.
Connect Last: If enabled, the last handler will be connected to the end of the slider.
Use Static Values: If you want to use static values instead of default numeric values, you can enable this option. This way you can use any value you want. Example: You can use “10MB” instead of “10”.
Round to x decimals: If you want to round the values of the handlers, you can enter the number of decimals here. Example: If you enter “2”, the value “10.123” will be rounded to “10.12”.
Step: The step size of the slider. Example: If you enter “10”, the slider will move in steps of 10.
Show Pips: If enabled, pips will be displayed on the slider. Pips are small indicators that show the values of the slider.
Pips Density: The density of the pips.
Pips Mode: The mode of the pips. You can choose between Steps and Range.
- Steps: The pips will be displayed for each step.
- Range: The pips will be displayed for each range.
Orientation: The orientation of the slider. You can choose between Horizontal and Vertical. If you are using a vertical slider, you need to set a height.
Height: The height of the slider. This setting is required if you are using 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:

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.

Special Checkboxes / Radio Buttons

Pro Forms is coming with some special 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”. 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:

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:

Trigger: The trigger of the Download Info Field. You can choose between Automatic and Manual.

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 which is automatically added by default. This button is required 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:

Upload Location: The location where the signature will be saved. You can choose between Media Library and Custom. The “Custom” will not create any reference in the database and is safer. The disadvantage: This method will not work with the “File Upload” meta fields of providers like ACF or Metabox, which require an attachment ID instead of a file URL.
- Media Library: The signature will be saved in the Media Library.
- Custom: The signature will be saved in a custom location, relative to wp-content/uploads. Example: my-location. This will create a folder wp-content/uploads/my-location
Canvas Height: The height of the canvas. This is the height of the signature field.
Dot Size: The size of the dot, which is used to draw the signature.
Min Width: The minimum width of the line. Default: 0.5
Max Width: The maximum width of the line. Default: 2.5
Background Color: The background color of the canvas.
Border Color: The border color of the canvas.
Pen Color: The color of the pen.
Throttle: The time interval between each point. Default: 16
** Show Clear Button (Actions Group):** If enabled, a clear button will be displayed. This button can be used to clear the signature.

Important: For all styles related to the signature, CSS Variables are not supported. Please use static values.

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

Validation Type: The type of the validation, for example “Required” or “Number”. There is a special type “Custom (Regex)“. This type allows you to define a custom validation using a regular expression. Example: If the input should not contain numbers, you can use the following regex: ^[^0-9]*$
Validation Message: The message that will be displayed 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.