How to Add Conditional Logic to Elementor Form Widget (without Add-on)

We’ll invite you to take your Elementor forms to the next level by including conditional logic. Conditional logic is a powerful feature that allows you to tailor the form’s behavior based on user input, creating a more dynamic and interactive experience.

This tutorial will show you how to add conditional logic to the Elementor Form widget without the help of any additional Elementor addons.

We’ll walk you through setting up conditions, exploring and implementing the JavaScript snippet, and showcasing practical use cases to enhance your forms.

Steps to Add Conditional Logic to Elementor Form Widget

Step 1: Add the Elementor Form Widget

Let us navigate to the content (page or post) where you want to add the form first. Afterward, click the Edit with Elementor button to bring you to the Elementor editor.

Once you enter the Elementor editor, add the Form widget and place the form in the desired container or section, and then drag & drop it there.

Note: The Form widget is one of the exclusive widgets that only can be accessed on Elementor Pro. So, please ensure that you’ve already upgraded to the pro version.

Step 2: Create the Form Fields

Next, it’s time to create your form fields. By default, this widget has three items (name, email, and message) in the form field once you’ve added it to the canvas area. You can add the necessary fields by clicking the Add Items button.

Once you add the form fields, please customize each field by clicking on it and adjusting the settings, such as the type, label, placeholder of the field, etc.

For this example, we create three form fields and set their style to Radio with two options (Yes or No).

• Replace the Form Fields ID

Replacing the form field ID will make writing JavaScript easier, which we will do in the next step. Go to the field setting, navigate to the Advanced tab, and discover your field’s ID there. Replace the ID with your preference.

In this example, we replace all our form fields’ IDs with passport, entry, and tax.

Step 3: Add the Custom JavaScript

It is now time to use an HTML widget to add the JavaScript snippet to your page. In the canvas area, add the HTML widget. The widget can be positioned anywhere you choose. In this example, we place the HTML widget above the Form widget.

Once you add the HTML widget, please copy the JavaScript snippet below and paste it into the available HTML Code field.

<script>

let showThisFieldIf = {
    entry: {
        passport: [2],
    },

    tax: {
        entry: [2],
    },
}

document.addEventListener('DOMContentLoaded', conditionalFormFieldFunc);
document.addEventListener('DOMContentLoaded',function(){
jQuery(document).on('elementor/popup/show', (event, id, instance) => {
conditionalFormFieldFunc();
});
});

function conditionalFormFieldFunc() {
function testLogic() {
for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
let conditionalInput = setInputsElemArray(conditionalInputID);
let match = true;
for (const [conditionID, conditionValues] of Object.entries(condition)) {
let inputs = setInputsElemArray(conditionID);
let selectedInputs = [];
inputs.forEach((input, i) => { if (input.checked) { selectedInputs.push(i); } });
if (inputs[0].tagName == 'SELECT') {
selectedInputs.push(inputs[0].selectedIndex);
}
let adjustedConditionValues = conditionValues.map(e => e - 1);
if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {
match = false;
}
};
if (match) {
conditionalInput.forEach(e => {
e.closest('.elementor-field-group').style.display = "block";
e.disabled = false;
});
} else {
conditionalInput.forEach(e => {
e.closest('.elementor-field-group').style.display = "none";
e.disabled = true;
});
}
}
}
testLogic();

/* Add event listeners */
for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
for (const [conditionID, conditionValues] of Object.entries(condition)) {
let inputs = setInputsElemArray(conditionID);
inputs.forEach(input => {
input.addEventListener('input', function () {
testLogic();
})
})
}
}

function setInputsElemArray(ID) {
let selectors = `[name="form_fields[${ID}]"]`;
let inputs = Array.from(document.querySelectorAll(selectors));
if (!inputs.length) {
selectors = `[name="form_fields[${ID}][]"]`;
inputs = Array.from(document.querySelectorAll(selectors));
}
return inputs;
}
};

</script>

Edit the JavaScript Snippet

To make the JavaScript you apply work for adding the conditional logic to your form, you need to edit the snippet according to the conditions you want.

The only thing you must do is replace the CSS declaration object named let showThisFieldIf with your actual conditions (lines 4th to 9th).

To write your conditions, use this basic format:

let showThisFieldIf = {
    **If the condition is met, the ID of the field will be shown here.**: {
        **ID of the form field that is the trigger**: [** the value of options checked or selected**],
    },
}

According to our case (as shown in the image above), this object’s structure shows the following conditional logic:

• The presence or visibility of the field ID “entry” is dependent on the value of “passport“. If passport has a value of 2 (No), then the “entry" field should be shown.
• Similarly, the presence or visibility of the field ID “tax” is dependent on the value of “entry". If the “entry" has a value of 2 (No), then the “tax" field should be shown.

The Bottom Line

Your forms’ usability and functionality can be greatly improved by adding conditional logic to an Elementor Form widget without needing additional Elementor addons. Custom JavaScript and the built-in features of Elementor can be used to create dynamic, responsive forms that fluidly adjust to user inputs.

This method guarantees optimized performance by eliminating extra plugin expenses. With a little coding knowledge and cautious application, you can effortlessly convert your static forms into interactive tools that better fulfill the needs of your users.