Finding the Form Builder
Open WooCommerce products
In the WordPress admin sidebar, click Products. The product list shows all published and draft products.
Edit the target product
Hover over the product you want to configure and click Edit, or click the product title. This opens the standard WooCommerce product editor.
Scroll to the UTB Product Builder panel
Below the classic WordPress editor area, locate the UTB Product Builder meta box. It appears after the WooCommerce product data tabs.
The Form Builder tab is only meaningful for products that have a flow assigned. If no flow is assigned, the form fields you configure will not render on the frontend. See Flow Assignment first.
Builder layout
The Form Builder has three columns:| Column | Purpose |
|---|---|
| Left sidebar — Tools | Palette of draggable field types and pre-built system fields |
| Center canvas | The live field list; defines field order as it appears on the frontend |
| Right sidebar — Properties | Inspector panel for the currently selected field; also contains theme and CSS controls |
Adding fields
Choose a field type
In the Tools sidebar, locate the field you want to add. Basic field types available:
- Texto — single-line text input
- Párrafo — multi-line textarea
- Lista — dropdown selector
- Fecha — date picker
- Archivo — file upload
- Título — non-input heading element
- Nota — informational text block
- Nombres — maps to field ID
utb_nombre - Apellidos — maps to field ID
utb_apellido - Correo — maps to field ID
utb_correo, renders as an email input
Add the field to the canvas
Click the field item in the palette, or drag it into the center canvas area. The field appears at the bottom of the current field list.
Removing fields
Hover over the field
Move your cursor over the field you want to remove in the canvas. A red trash icon appears on the field card.
Reordering fields
Drag any field card in the canvas up or down to change its position. The order in the canvas is the exact order rendered in the browser at checkout. Drop the field in the desired position and release.Modifying labels and descriptions
Select the field
Click any field in the canvas. The Properties sidebar on the right activates and shows that field’s editable attributes.
Edit the label
In the Properties panel, find the Etiqueta / Label input. Type the visible field title students see above the input — for example,
Programa Académico (Requerido).Edit the description
The Descripción Adicional field controls the smaller secondary text that appears below the label. Use it to guide students — for example,
Selecciona el programa que deseas cursar.If you clear this field entirely, the secondary text line does not appear on the frontend, producing a more compact form.Injecting API validation rules onto input fields
API validation rules are created in UTB Builder > API Connections (see API Connections). Once a rule exists, you can attach it to any input field.Select the target field
Click the input field in the canvas — for example, the
Cédula field. The Properties panel opens on the right.Open the API validation rules section
Scroll down in the Properties panel until you reach the Reglas de Validación API section. The dropdown lists all rules configured in the API Connections hub.
Select a rule
Choose the rule to apply, for example
Validar Roles Banner. The inspector expands to ask which other field provides the variable values required by the rule’s endpoint template.Inline validation rules (regex-based)
The Form Builder also provides built-in regex validation rules that do not require an API call. These are available in the same Reglas de Validación section:| Rule ID | Label | Pattern |
|---|---|---|
email_utb | Email UTB | ^[a-zA-Z0-9._-]+@utb\.edu\.co$ |
phone_co | Teléfono Colombia | ^(\+57)?[0-9]{10}$ |
cedula_co | Cédula Colombia | ^[0-9]{6,10}$ |
alphanumeric | Alfanumérico | ^[a-zA-Z0-9\s]+$ |
Theme and styling
The bottom of the Properties sidebar contains visual theme controls that apply to this product’s form:- Color Principal — primary color for buttons and accents
- Redondez (Bordes) — border radius in pixels (0–20)
- Espaciado — layout density: Compacto, Cómodo, or Espacioso
.utb-field to target form elements.
Saving the form
Click Save Changes
At the bottom of the Properties sidebar, click the Guardar Cambios button. The builder sends the current field configuration as a JSON payload to the server via AJAX (
wp_ajax_utb_save_form_config).Testing the form
After saving, visit the product’s frontend page to verify:- All fields appear in the correct order.
- Labels and descriptions display as configured.
- Dropdown fields populated from data sources render their options.
- API validation rules fire when the target field loses focus (if applicable).
- Required field enforcement works before the Add to Cart / checkout step.
The Form Builder opens in fullscreen mode when accessed via the Constructor Visual hidden admin page (
/wp-admin/admin.php?page=utb-builder&product_id=ID). This mode hides the WordPress admin bar and expands the canvas to full viewport height for easier editing.