Form Builder

Form Builder Overview #

The Form Builder is the core module of PrimeForms where forms are created and edited. It provides all necessary tools to:

• Add/remove fields
• Configure HTML elements
• Customize layouts

User Interface #

The interface consists of three panels:

1. Left Panel
   • Fields Tab: All available form components (drag and drop).
   • Settings Tab: Form name, layout options, disable fields.
   • Code Tab: Real-time HTML output with copy functionality.
2. Center Panel
   • Live preview of the form.
   • Interactive field manipulation.
3. Right Panel (Theme Designer)
   • Backgrounds: Element-specific background customization.
   • Typography: Font family, size, color, and styling.
   • Borders: Border thickness, style, and color.
   • Shadows: Add/remove box shadows.
   • Buttons: Submit button text and styling.

---

Part 2: Field Management Basics #

Adding Fields #

Two methods:

1. Click a widget → adds to bottom of form.
2. Drag & Drop → precise positioning.

Editing Fields #

1. Click any field → configuration popup appears.
2. Adjust settings → Click Save.
   (Press ESC to close popups.)

Reordering Fields #

1. Click/hold a component.
2. Drag vertically → release at desired position.

Column Layouts #

1. Drag a widget left/right of another field.
2. Automatic equal-width column creation.
   • Max 4 columns via drag-and-drop.
   • 12 columns possible using Container CSS Class.

---

Part 3: Advanced Field Operations #

Copying Fields #

1. Click/hold a component → select Copy.
2. Duplicate appears below original.

Deleting Fields #

1. Click/hold a component.
2. Drag outside form bounds → release.

Field IDs #

1. Click/hold → ⋮ (menu) → Copy ID.
2. Use for CSS targeting or email templates.

---

Part 4: Form & Field Settings #

Form-Level Settings #

Configure under Settings Tab:

• Form Name: Admin identifier + page title.
• Layout: Label positioning (Bootstrap-based).
• Disable Fields: For external JS integration.

Field-Specific Options #

Each field type has unique settings (e.g., labels, default values, validation). Click any field to configure.

Part 5: Field Configuration Options (A-C) #

For File Upload fields. Restricts allowed file types:

• Add extensions with leading dot, comma-separated
• Default: ‘.gif, .jpg, .png’ (images only)
• Example for documents: ‘.doc, .docx, .txt’
• Leave empty for all file types

Uses HTML5 ‘accept’ attribute for client/server validation.

Alias
Allows using field alias instead of name for WebHook notifications.

As Button
Displays Radio Buttons and Checkboxes as toggle buttons.

Checkbox
For Checkbox components. Add options via bulk editor:

Shows 5 checkboxes with “Second Choice” and “Fourth Choice” preselected.

DNS Verification
Validates email domain’s A/MX records.
Warning: Advanced feature – may fail due to DNS issues. Disabled by default.

CSS Class
Add custom CSS classes to fields.

Container CSS Class
Add classes to component container. Use Bootstrap grid like col-xs-6 for columns.

Custom Attributes
Add data-* or aria-* attributes for accessibility/JS integration.

Part 6: Field Configuration Options (D-H) #

Default Value
Pre-filled value users can modify.

Disabled
Shows field but prevents editing. Disabled fields aren’t submitted.

Field Size
For Text Areas – number of visible rows (height).

Help Text
Instructions below field.

Help Text Position
Move help text above/below field.

Inline
Displays Checkboxes/Radios horizontally.

Input Type
Specialized input types (URL, Color, etc.):

Part 7: Field Configuration Options (I-P) #

Integers Only
Restricts field to whole numbers only.

Integer Pattern
Advanced number field option. Custom regex for integer validation. Default: /^\s[+-]?\d+\s$/

Label
Primary field description shown above field by default.

Label CSS Class
Add CSS classes to labels. Use sr-only to hide labels.

Minimum Date
Sets earliest allowed date in format yyyy-mm-dd or tags like {today}, {today:+1} (tomorrow).

Maximum Date
Sets latest allowed date with same format options.

Minimum Number
Sets lowest allowed numeric value.

Maximum Number
Sets highest allowed numeric value.

Minimum Size
For file uploads – minimum file size in bytes.

Maximum Size
For file uploads – maximum file size in bytes.

Minimum Length
Minimum character count for text inputs.

Maximum Length
Maximum character count for text inputs.

Minimum Files
Minimum number of files for upload fields.

Maximum Files
Maximum number of files for upload fields.

Multiple
Allows multiple values in Email and Select List fields.

Number Pattern
Advanced number validation regex. Default matches decimals: /^\s[-+]?[0-9].?[0-9]+([eE][-+]?[0-9]+)?\s*$/

Options
For Select List fields. Format: Label|Value|selected

Pattern
Custom regex pattern for validation.

Placeholder
Alternative field description that disappears on input.

Part 8: Field Configuration Options (R-U) #

Radio Button #

For Radio components. Format: <code>Label|Value|selected</code>

Read Only #

Shows field but prevents editing. Submitted with form.

Required #

Makes field mandatory. Shows red asterisk.

Step Number #

For Number/Date fields – increment step value.

Unique #

Ensures submitted value hasn’t been used before.

Part 9: Field Types #

Heading #

Section headers with H1-H6 options.

Paragraph #

Text blocks for instructions/info.

Text Field #

Single-line input with subtypes:

<ul> <li><strong>Text:</strong> Default</li> <li><strong>URL:</strong> Validates web addresses</li> <li><strong>Color:</strong> Color picker</li> <li><strong>Phone:</strong> Telephone numbers</li> <li><strong>Password:</strong> Masked input</li> </ul>

Number Field #

Numeric input with validation:

<ul> <li><strong>Number:</strong> Standard</li> <li><strong>Range:</strong> Slider control</li> </ul>

Date Field #

Date/time inputs:

<ul> <li><strong>Date:</strong> yyyy-mm-dd</li> <li><strong>Local DateTime:</strong> yyyy-mm-ddThh:mm:ss</li> <li><strong>Time:</strong> hh:mm:ss</li> <li><strong>Month:</strong> yyyy-mm</li> <li><strong>Week:</strong> Week number</li> </ul>

Part 10: Special Field Types #

Email Field #

Validates email format with optional DNS check.

Text Area #

Multi-line text input with adjustable height.

Checkbox #

Multiple selection boxes. Supports images/icons.

Radio Button #

Single selection from options. Supports images/icons.

Select List #

Dropdown menu with single/multiple selection.

Hidden Field #

Invisible field for passing default values.

File Upload #

File attachment field with type/size restrictions.

Part 11: Advanced Field Types #

HTML Snippet #

For adding custom HTML/CSS.

reCAPTCHA #

Spam protection with Google integration.

Page Break #

Creates multi-step forms.

Spacer #

Vertical whitespace control.

Signature #

Digital signature capture.

 

Matrix Field #

Grid layout for surveys/questionnaires.

Net Promoter Score #

Customer satisfaction metric (0-10 scale).

Button #

Form actions:

<ul> <li><strong>Submit:</strong> Default</li> <li><strong>Reset:</strong> Clear form</li> <li><strong>Image:</strong> Graphical button</li> <li><strong>Button:</strong> Custom JS actions</li> </ul>

Part 12: Validation & Conclusion #

Field Validation #

Client/server validation ensures data quality:

<ul> <li>Required fields</li> <li>Format validation (email, URLs, etc.)</li> <li>Custom regex patterns</li> <li>File type/size restrictions</li> </ul>

Conclusion #

Primeforms Form Builder provides powerful, flexible form creation with extensive customization options for all use cases.

 

 

Key features include:

• Drag-and-drop interface
• Real-time preview
• Responsive design
• Advanced field validation
• Multi-step forms
• Theme customization

For additional assistance, consult the PrimeForms documentation or contact support.