Require: Bricks Builder > 2.0 Alpha Version

Bricks Builder is a powerful WordPress page builder that allows for extensive customization of elements, including forms. The following guide demonstrates how to extend Bricks Builder form controls to support icons for each field and how to render those icons in the frontend form output.

1. Extending Form Controls

The code adds several new controls to the Bricks form element, such as:

  • Enable Icon: A checkbox to toggle icon support.
  • Icon Size, Width, Height: Controls for adjusting icon dimensions.
  • Color and Fill: Allows setting the icon color and SVG fill.
  • Position Controls: Options for positioning the icon (top, right, bottom, left, z-index, transform).
  • Choose Icon: Adds an iconField to each form field, letting users select an icon.

This is achieved by hooking into the bricks/elements/form/controls filter and modifying the $controls array. The code ensures that the new iconField is inserted before the type key in each field’s controls.

2. Rendering Icons in Form Fields

To display the selected icons in the frontend, the code hooks into the bricks/frontend/render_element filter. It checks if the element is a form and if icon support is enabled. For each form field with an icon selected, it:

  • Uses a regular expression to find all .form-group divs in the form HTML.
  • For each field with an icon, it generates the icon HTML using \Bricks\Element_Icon::render_icon.
  • Inserts the icon HTML before the first <input> element within the .form-group div.

This approach ensures that each form field can have its own icon, styled and positioned according to the controls set in the Bricks editor.

3. Example Use Case

With this customization, you can create forms where each input field is visually enhanced with an icon, improving user experience and form aesthetics. For example, a “Name” field can have a user icon, while an “Email” field can have an envelope icon.

4. Summary

This solution demonstrates how to:

  • Add custom controls to Bricks Builder form elements.
  • Allow per-field icon selection and styling.
  • Dynamically inject icons into the frontend form markup.

By leveraging Bricks Builder’s hooks and flexible control system, you can create highly customized and visually appealing forms for your WordPress site.

Watch video tutorial here