EleField

Description

EleField extends the native Elementor Pro Form widget with practical tools for building smarter, more visual and more interactive forms — without replacing the Elementor form builder you already use.

Add icons inside standard fields, turn Radio, Checkbox and Select options into visual image, icon or card choices, display helpful tooltips, format phone numbers, assign prices to options, create simple calculations and show automatically calculated totals.

Everything is configured directly inside the familiar Elementor editor.

Make Elementor Forms more visual

EleField enhances existing Elementor fields while keeping their normal form behavior and submitted values intact.

  • Add built-in icons to Text, Email, Tel, Number, Textarea and Select fields.
  • Control icon position, size, inset, normal color and focused color.
  • Turn supported choice fields into image choices, icon choices or card choices.
  • Add plain-text tooltips to explain fields and options.
  • Display additional help text below supported fields.

Build quote and pricing forms

Turn a standard Elementor form into a simple interactive estimator or quote form.

  • Assign individual prices to Radio, Checkbox and Select options.
  • Sum prices from selected choices.
  • Create basic calculations using two fields, or a field and a fixed number.
  • Add, subtract, multiply or divide numeric values.
  • Display a calculated Total field anywhere in the form.
  • Show an optional breakdown of selected items and their prices.
  • Recalculate calculation and total values server-side during form validation.

EleField can be used for service quotes, cleaning estimates, project estimators, booking requests, product configuration forms and other forms where users need an instant calculated result.

Improve form input

EleField also adds practical input enhancements to standard Elementor fields.

  • Phone masks with 5–15 required digit positions, including the country code.
  • Character counters and limits for Text and Textarea fields.
  • Contextual tooltips for additional instructions.
  • Help text displayed directly below supported fields.

Built directly into Elementor

EleField works with the native Elementor Pro Form widget.

You continue creating, arranging and styling your form with Elementor. EleField simply adds additional controls to the existing field settings.

No separate form builder is introduced.

Elementor Pro must be installed separately.

Features

  • Fourteen built-in field icons with color, size, position and inset controls.
  • Icons inside Text, Email, Tel, Number, Textarea and Select fields.
  • Image, built-in icon and card choices for Radio, Checkbox and Select.
  • Plain-text tooltips and field help text.
  • Phone masks with 5–15 required digit positions, including the country code.
  • Character counters and limits for Text and Textarea fields.
  • Basic arithmetic with two fields, or a field and a fixed number.
  • Separate prices for choice options.
  • Sum all priced fields or selected priced fields.
  • Total fields with a currency label and optional selected-item breakdown.
  • Server-side recomputation of calculation and total values during form validation.

All listed EleField features are included without a license key, subscription or submission quota.

Requirements

  • WordPress 6.2 or newer.
  • PHP 7.4 or newer.
  • Elementor and Elementor Pro 3.5 or newer with the native Form widget.
  • JavaScript for interactive enhancements and live calculations.

Elementor Pro must be installed separately.

Privacy and external resources

EleField has no telemetry, license-server requests, remote fonts, remote icon libraries or external form-processing service.

Its scripts and styles are bundled locally.

Images selected from the WordPress Media Library use their configured attachment URLs; a media-offloading plugin may serve those images from another domain.

Form submissions are processed by the Elementor actions you configure. Other plugins and those actions may contact external services.

Development source

The JavaScript files included in this plugin are the human-readable source files used at runtime.

EleField does not require a JavaScript compilation or minification step.

Screenshots

Installation

  1. Install and activate Elementor and Elementor Pro.
  2. Install and activate EleField.
  3. Edit a page with Elementor and add or select the native Form widget.
  4. Open a form field to find the EleField icon, tooltip, mask and visual choice controls.
  5. To build a quote, enable Prices for choices on a Radio, Checkbox or Select field and enter the amounts in the Choices table.
  6. Add a Total — EleField field at the desired position.
  7. For a basic calculation, add Calculation — EleField, choose the first field, an operation, and a second field or fixed number.
  8. Save the form and test a complete submission.

FAQ

Does EleField require Elementor Pro?

Yes. Elementor Pro supplies the Form widget. EleField does not supply a standalone form builder.

Are icons, calculators and Total included?

Yes. The built-in icons, visual choices, basic calculations and totals are all included.

What does Total add together?

Total adds prices assigned in the Choices table of Radio, Checkbox and Select fields.

It can include all priced fields or selected priced fields.

To add ordinary Number fields, use a basic Calculation field with the Add operation.

A calculator using numeric choice values uses those values, not the separate prices in the Choices table.

Can I use negative numbers?

Basic calculations accept negative numbers.

Choice prices must be nonnegative and use at most two decimal places.

All option prices in a total use the same currency. The currency label does not convert amounts.

Is Total a payment gateway?

No.

It displays and submits a quote. It does not collect payments or configure a payment action.

Payment integrations must validate their own final amount on the server.

Can I enter executable code in formulas?

No.

EleField builds bounded arithmetic from the selected fields.

PHP and JavaScript code cannot be entered as formulas.

Why does a calculation show an error?

Check that field IDs are unique, references point to supported numeric fields and a divisor is not zero.

Calculations cannot refer back to themselves.

Forms with calculations support up to 100 configured fields and 16 nested calculation references.

Choice enhancements support up to 100 choices per field.

How do phone masks work?

Each # represents one required digit.

Use only #, +, spaces, parentheses, dots and hyphens.

For example:

+### (##) ###-##-##

requires 12 digits.

Fixed digits and optional positions are not supported.

An optional phone field can remain empty.

Are form settings removed when I deactivate EleField?

No.

EleField settings remain in Elementor form data.

Enhancements stop when EleField is inactive.

Back up the site before upgrading and verify saved forms afterward.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“EleField” is open source software. The following people have contributed to this plugin.

Contributors

Translate “EleField” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.0.0

  • Initial EleField release.
  • Add built-in field icons with positioning and color controls.
  • Add visual image, icon and card choices.
  • Add plain-text tooltips and field help text.
  • Add phone masks and character counters.
  • Add option pricing and quote totals.
  • Add basic calculation fields.
  • Add dependency guards for the Elementor Forms field API.
  • Extend translation coverage for editor controls and frontend messages.
  • Retain saved field identifiers and settings during upgrades.
  • Preserve complete option values in editor previews.
  • Avoid calculator validation on forms that only use decorative enhancements.