JS Field for Elementor Pro Form allows you to take advantage of JS full power to set the value of a field on Elementor Pro Form.

JS Field is a field whose value is calculated based on the value of other fields. The calculation is done in a Javascript function.

In the settings you provide the function by using this structure:

return yourFunctionHere;

for example, you could define the function the arrow syntax:

return () => { /* ... */ };

Your function should do some calculations and return its result.

return () => { return 3; }

This is not a very useful example where the field will always be 3. But you can use the function getField to get another field value:

return () => { return "Hello " + getField("name") + "!"; }

Field values are returned always as a string:

return getField("age") + 2;

If the field age has a value of 21, this would return 212! Definitely not what we intended. So if the field you want to get is a number you should pass true as the second argument to getField:

return getField("age", true) + 2;

This does what we expect and returns 23.

Did this answer your question?