How To Find The Form ID And Form Fields For A Bricks Builder Custom Form Action

When building a custom form action PHP snippet, you must find the form field IDs and the parent form ID. In this post, I will show you how to find and format the form field IDs and form ID. Bonus: Ill provide you with some JavaScript to see the data in the console as well as a PHP snippet to see the data in your log file.

How To See The Bricks Form Data in the Browser Console with JavaScript

Inspect the page where you have a bricks form, right click the page and click “inspect”, navigate to the console tab at the top of the window, paste the below code into the console and hit enter.

//Get the form element
//if you have multiple forms, target by the specific form element ID:
//const form = document.getElementById('brxe-onaswm');

//use when you only have one form on the page
const form = document.querySelector('.brxe-form');

// Log form details
const formDetails = {
    id: form.id,
    scriptId: form.dataset.scriptId,
    elementId: form.dataset.elementId
};
console.log('Form Details:', formDetails);

// Get and log all field details
const fieldDetails = {};
form.querySelectorAll('input, textarea').forEach(field => {
    fieldDetails[field.getAttribute('aria-label').toLowerCase()] = {
        id: field.id,
        name: field.name,
        type: field.type,
        value: field.value
    };
});
console.log('Field Details:', fieldDetails);

How To See The Bricks Form Object Data In PHP

While the JavaScript approach works fine, sometimes I want to write the data to my server log files.

Bricks exposes all the form object data like this: $form.

So you can access the all the form form data like this:

<?php

add_action('bricks/form/custom_action', function ($form) {
	$fields = $form->get_fields();
    $formId = $fields['formId'];
	error_log("Fields: " . print_r($fields, true));	
	error_log("Form ID: " . print_r($formId, true));	

});

OUTPUT FROM LOG:

Fields: Array
(
    [form-field-73a68e] => Bob Grey //You need this [form-field-73a68e]
    [form-field-0b68f3] => [email protected] //You need this form-field-0b68f3]
    [form-field-522767] => test //You need this [form-field-522767]
    [action] => bricks_form_submit
    [loopId] => 923
    [postId] => 923
    [formId] => onaswm //You need this
    [recaptchaToken] => 
    [nonce] => ecabb3dd3e
    [referrer] => https://forge.local/notion/?bricks_preview=1736110841
    [urlParams] => {"bricks_preview":"1736110841"}
)

Form ID: onaswm

You want to grab all form field IDs that looks like this:

[form-field-73a68e] => Bob Grey

[form-field-0b68f3] => [email protected]

[form-field-522767] => test

And your form ID that looks like this:

[formId] => onaswm

To get this data in your error log, first, Add this code to your child theme’s function.php file.

Next go inside the builder and set your Form’s action to ‘custom’.

Submit a form and then review your log files.

Store the form ID and field IDs

When working inside your PHP snippet, I like to go grab all my form ID and field ID variables like this:

$formId  = isset($fields['formId']) ? sanitize_text_field($fields['formId']) : null;
$name    = isset($fields['form-field-73a68e']) ? sanitize_text_field($fields['form-field-73a68e']) : null;
$email   = isset($fields['form-field-0b68f3']) ? sanitize_email($fields['form-field-0b68f3']) : null;
$message = isset($fields['form-field-522767']) ? sanitize_textarea_field($fields['form-field-522767']) : null;

if (!$formId) {
    error_log('Form ID is missing. Aborting.');
    return;
}

Note: I check if my form ID exists. This is a good check to make sure you retrieved it properly in the debugging steps above. Then, you can see if you used the correct ID in the custom action code. That sounds complex, but read it carefully and try your best to apply what you learned. You only really need to check your form ID if you have multiple form custom actions. Like form A does this and Form B does that.

What to take from your Log File

You need to grab your form field ID, and the ID’s of all your fields. As I mentioned before, here is the information you need when building your custom form action PHP file:

[form-field-73a68e] => Bob Grey

[form-field-0b68f3] => [email protected]

[form-field-522767] => test

And your form ID that looks like this:

[formId] => onaswm

Conclusion

This post will help you find the required data you need when building custom Bricks Builder form actions.

Once you have all of your form field ID’s and your form ID, you can start working on your PHP code that will extend your Bricks Builder form’s functionality.

Here are a few ideas of custom actions your could program to help track data coming in from your forms:

• Log form data to Google Sheets
• Send form data to Slack
• Log form data in Notion

Tip when using multiple form and form action functions on the same site:

I like to tie my form ID to the custom action so I can run only certain actions for a specific form on my website. If my form needs to trigger a certain action, I will check if the form equals a hard coded form ID value and then run the subsequent code.