Form Field Module

Purpose and when to use

The Form Field module is a child module of the Form module in the Divi 5 Visual Builder. Each Form Field represents one form control: you choose a single field type (e.g. input, email, textarea, select, checkbox, file upload, step) per field via Field Type in the field’s Content options.

Use Form Field when you need to:

• Add text inputs, emails, URLs, or passwords (single-line)
• Add multi-line text (textarea), numbers (with optional range slider), or dropdowns (select, optional Select2, multi-select)
• Add checkboxes or radio buttons (with optional images)
• Add file or image uploads, date/time pickers, hidden fields, signature pads, or calculable fields
• Add AI output fields, static HTML/editor/code/Divi layout content, or multistep dividers (step)

Add fields from the Form module’s Content tab by using Add New Form Field; then select each field to set its Field Type and type-specific options.

Content tab

The Content tab is organized into groups. Field, Validation, and Layout apply to most field types; other groups appear or matter based on Field Type (field.advanced.fieldType).

Setting groups (Content)

Group	What it configures
Field	Field Type (input, email, url, password, text, number, select, checkbox, radio, file, image, datepicker, datetimepicker, hidden, signature, calculation, ai_output, html_content, step), Field Title, Admin Title, Field ID, Add Field Prefix.
Validation	Required mark, required message and position, min/max length, allowed symbols, pattern, email/URL/pattern messages, required sign.
Layout	Grid column, show label, label position and width, placeholder, description text and location, padding.
Textarea	Rows, character limit, WYSIWYG editor, show media button. (Field type: text)
Number	Min/max number, step, convert to range slider. (Field type: number)
Range	Range type (single/double), min/max/step, prefix/postfix, skin, colors, hide from/to. (When number uses range slider)
Select	Options, placeholder, Select2, multi-select, search, auto-detect (ACF). (Field type: select)
Checkbox	Options, auto-detect, exclude options, only selected, layout. (Field type: checkbox)
Radio	Options, auto-detect, exclude options. (Field type: radio)
Radio / Checkbox image	Show images, image IDs, label position, max width, same height, margins. (checkbox or radio)
Choice field layout	Inline, full width, gap, grid columns, field style (default/button). (checkbox or radio)
Upload	Max file count/size, accepted types (file vs image), preview/icon/description, progress bar, colors, alignment. (Field type: file or image)
Date picker	Language, date/datetime format, year range, default date, disable weekdays/dates, icon. (Field type: datepicker or datetimepicker)
Hidden	Hidden value source (e.g. page name, custom, ACF), custom value. (Field type: hidden)
Step	Previous/Next button text, icon, step title, step description. (Field type: step)
HTML content	Content type (text, editor, code, Divi layout), editor/code/layout value. (Field type: html_content)
Signature	Pen color, background, clear button, icon. (Field type: signature)
Calculation	Formula, decimal places, calculate on server, show result in field/when zero, result content, logic rules. (Field type: calculation)
AI	Prompt, trigger (auto/button/form-submit), output to field, persona, temperature, max words, loading/typing options. (Field type: ai_output)
Field mapping	Mapping type (default, ACF, user, product, etc.), post/user/product/ACF field, custom meta name.
Icon	Use icon, font icon, color, size; password show/hide icon.
Password	Forgot password link, Remember me, default checked. (Field type: password)
Conditional	Enable conditional logic, relation (and/or), rules.
Entries	View in entries, table header, single checkbox value.
Advanced	Google address autocomplete, go next step on change, enable autocomplete.

Content settings table (main groups)

Field

Setting	Type	Default	Notes
Field Type	select	input	input, email, url, password, text, number, select, checkbox, radio, file, image, datepicker, datetimepicker, hidden, signature, calculation, ai_output, html_content, step.
Field Title	text	(empty)	Label shown to the user.
Admin Title	text	(empty)	Label in builder only.
Field ID	text	(empty)	Unique ID; used for name/id when prefix is added.
Add Field Prefix	toggle	on	Prefix field name with form prefix (e.g. de_fb_).

Validation

Setting	Type	Default	Notes
Required Mark	toggle	on	Show required indicator.
Required Message	text	This field is required.	Shown when empty and required.
Required Message Position	select	bottom	Where the message appears.
Min Length	number	0	Minimum character length (0 = no min).
Max Length	number	0	Maximum character length (0 = no max).
Min Length Message	text	Your input is too short.	Validation message.
Email Message	text	Please input correct email address.	For email field type.
Pattern Message	text	Invalid Format.	For custom pattern.
Allowed Symbols	select	all	letters, numbers, alphanumeric, all.
Required Sign	text	*	Character used as required mark.

Layout

Setting	Type	Default	Notes
Field Grid Column	select	et_pb_column_4_4	Column width (full, 3/4, 2/3, 1/2, 1/3, 1/4).
Show Field Label	toggle	off	Show label.
Field Label Position	select	none	none, top, left, etc.
Field Label Width	select	et_pb_column_1_4	Width of label column.
Enable Placeholder	toggle	on	Use placeholder.
Field Placeholder	text	(empty)	Placeholder text.
Description Text	toggle	off	Show description.
Description Text	text	Here is your field description	Description content.
Description Text Location	select	above	above, below.

Textarea (field type: text)

Setting	Type	Default	Notes
Textarea Rows	number	8	Number of rows.
Textarea Limit	text	(empty)	Max characters (optional).
Use WYSIWYG Editor	toggle	off	Rich text editor.
Show Media Button	toggle	on	Add media button in editor.

Number (field type: number)

Setting	Type	Default	Notes
Min Number	number	0	Minimum value.
Max Number	number	(empty)	Maximum value.
Number Increase Step	text	any	Step (e.g. 1, 0.1).
Convert Range Slider	toggle	off	Show as range slider.

Select (field type: select)

Setting	Type	Default	Notes
Select Options	options	(empty)	Label/value pairs.
Select Placeholder Text	text	-- Select Option --	Placeholder.
Select2	toggle	off	Use Select2 dropdown.
Select Multi	toggle	off	Allow multiple selection.
Select Search	toggle	off	Search within options.
Select Auto Detect	toggle	off	Populate from ACF etc.

Checkbox (field type: checkbox)

Setting	Type	Default	Notes
Checkbox Options	options	(empty)	Label/value/checked.
Checkbox Auto Detect	toggle	off	Populate from ACF etc.
Checkbox Only Selected	toggle	off	Submit only checked values.

Radio (field type: radio)

Setting	Type	Default	Notes
Radio Options	options	(empty)	Label/value/checked.
Radio Auto Detect	toggle	off	Populate from ACF etc.

Upload (field type: file or image)

Setting	Type	Default	Notes
Max Upload File Counts	number	5	Max files.
Max Upload File Size	number	10	Max size in MB.
Accepted File Types (File)	text	pdf|csv|docx	For file type.
Accepted File Types (Image)	text	gif|jpg|jpeg|png	For image type.
Upload Description	text	Drop files here or Click to select file.	Dropzone text.

Date picker (field type: datepicker / datetimepicker)

Setting	Type	Default	Notes
Date Format	text	yy-mm-dd	PHP date format.
Date/Time Format	text	hh:mm tt	Time format for datetime.
Date Year Start / End	text	1950 / 2050	Year range.
Date Default Date	select	none	Default date.
Show Time Only	toggle	off	Time only (datetimepicker).

Hidden (field type: hidden)

Setting	Type	Default	Notes
Hidden Value	select	page_name	page_name, custom, ACF, etc.
Hidden Value Custom	text	(empty)	When source is custom.

Step (field type: step)

Setting	Type	Default	Notes
Step Prev Text	text	Prev	Previous button.
Step Next Text	text	Next	Next button.
Step Title	text	(empty)	Step title.
Step Description	text	(empty)	Step description.

HTML content (field type: html_content)

Setting	Type	Default	Notes
HTML Content Type	select	text	text, editor, code, divi_layout.
HTML Content Editor	editor	(empty)	WYSIWYG content.
HTML Content Code	textarea	(empty)	Raw HTML/code.
HTML Content Divi Layout	text	(empty)	Divi layout.

Signature (field type: signature)

Setting	Type	Default	Notes
Signature Pen Color	color	#000000	Stroke color.
Signature Background	color	#efefef	Canvas background.
Signature Clear	toggle	on	Show clear button.

Calculation (field type: calculation)

Setting	Type	Default	Notes
Calculation Formula	text	(empty)	Formula (e.g. field refs).
Calculation Decimal	number	2	Decimal places.
Calculate On Server	toggle	off	Server-side calculation.
Show Result In Field	toggle	off	Display result in field.
Result Content	text	%%result%%	Wrapper for result.

AI (field type: ai_output)

Setting	Type	Default	Notes
AI Prompt	text	(empty)	Prompt for AI.
AI API Call Trigger	select	auto	auto, button, form-submit.
AI Output To Field	toggle	off	Send output to another field.
AI Output Field	select	(empty)	Target field.
AI Persona	select	helpful_expert	Persona preset.
AI Temperature	number	0.5	Model temperature.
AI Max Response Word	number	100	Max words.

Design tab

The Form Field module uses the standard Divi 5 Design tab for the field container and for designable parts (e.g. label, input, placeholder, error notice, upload description, radio/checkbox buttons, signature, calculation result, AI preload animation). Design groups in module.json include Label Text, Field Input, Placeholder Text, Field Description, Required Mark, Error Notice, Upload-related elements, Radio/Checkbox buttons and images, Signature, Calculation content, AI trigger button and content typography. Configure these in the Visual Builder under the field’s Design tab after selecting the field.

Field types (quick reference)

Field Type	Renders as
input, email, url, password	Single-line input (dfb_render_input_field)
text	Textarea (dfb_render_textarea_field)
number	Number input, optional range slider (dfb_render_number_field)
select	Dropdown, optional Select2, multi (dfb_render_select_field)
checkbox	Checkboxes, optional images (dfb_render_checkbox_field)
radio	Radio buttons, optional images (dfb_render_radio_field)
file, image	File/image upload (dfb_render_file_upload_field)
datepicker	Date picker (dfb_render_datepicker_field)
datetimepicker	Date and time (dfb_render_datetimepicker_field)
hidden	Hidden input (dfb_render_hidden_field)
signature	Signature pad (dfb_render_signature_field)
calculation	Calculable field (dfb_render_calculation_field)
ai_output	AI response field (dfb_render_ai_output_field)
html_content	Static HTML/editor/code/Divi layout (dfb_render_html_content_field)
step	Multistep divider (dfb_render_step_field)

Add and verify a Form Field quickly

1. Select your Form module and add a Form Field child.
2. Set Field Type, Field Title, and a unique Field ID.
3. Configure required validation or mapping settings.
4. Save and submit a frontend test entry.
5. Confirm the field value appears where expected (notification, entry data, mapped target).

Common mistakes

• Reusing the same Field ID in multiple fields
• Picking the wrong Field Mapping Type for the selected form type
• Enabling advanced options (AI, calculation, upload) without end-to-end testing
• Styling in the builder without validating real frontend behavior

What's Next

• Form module reference
• Field types
• Form types
• Field mapping