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.

When the field is left empty you get NaN (Not a Number) as a result. To choose a default value to return in this situation pass it as the third parameter to the function:

return getField("age", true, 25);

Getting Value from ACF

In order to get the value of an ACF Field from JS Field, you can create an Elementor Hidden Field that is set with a Dynamic tag, and then you can get the value of this field from JS Field.

JS Field:

Did this answer your question?