Creating Dependent Fields in Forms

Our customers often request the ability to create dependent/conditional fields in forms. This means that when a contact is completing a form, the response on one field will dictate the options for another field that appears. While we plan on making this a feature directly available within the product, this guide prevents a short-term solution for use cases where dependent fields are critical.

Creating the form

Most of the steps for creating a form in Mautic where you’ll use dependent fields are the same, but there are a few key differences.

Dependent fields can apply to select (picklist), checkbox group, or radio group field types.

Create all of your fields as you normally would. The main field referred to here is the first field in the dependent sequence – the one that other fields depend on. The dependent fields will only appear based on the response to the main field.

On the main field, add wrapper-list=”main” in the Field Container Attributes field. You’ll find this on the Attributes tab of the field editor. The word “main” in this attribute will not change.

On the dependent fields, add wrapper-list=”optionX” in the Field Container Attributes field. “Option1” will be the first option on your picklist from the main field, “option2” would be the second, etc. Rather than using Option1, option2, and so on, use a word related to the actual option.

Once you’ve added those attributes to the main field and dependent fields, save and return to the form’s main page.

Adding the form to your webpage

Use the Manual Copy option to add the form to your webpage(s). Copy the code in the top box into the head or body. Then, copy the code in the bottom box into the body of the page where you want the form to appear.

Manual Copy

After the form is on the page, check to see if each field appears properly. At this stage, you should see every field on the form, including ones that depend on another field.

Once you’re satisfied with the appearance, copy and paste the following code between the </div> tag at the end of the form and </body> tag at the end of the page:

const mainField = ‘main’; // name of main field
const wrapperEls = document.querySelectorAll(`[wrapper-list]`);

const init = function () {
for (const wrapperEl of wrapperEls) {
if (wrapperEl.getAttribute(‘wrapper-list’).toUpperCase() !== mainField.toUpperCase()) {
wrapperEl.setAttribute(‘style’, ‘display: none’);
}
if(wrapperEl.getAttribute(‘class’).includes(‘mauticform-select’)){
wrapperEl.setAttribute(‘onchange’, “validate()”);
}
wrapperEl.lastElementChild.innerText= ”;
}
}();

function validate() {
const currentEl = this.event.currentTarget;
const selectedValue = this.event.target.value.toUpperCase();
const messageEl = this.event.currentTarget.lastElementChild;
let sectionList = {};
try {
for (const wrapperEl of wrapperEls) {
if(wrapperEl.getAttribute(‘class’).includes(‘mauticform-select’)){
sectionList = wrapperEl.children[1];
}
wrapperEl.lastElementChild.innerText= ”;

messageEl.innerText = ”;

if (wrapperEl.getAttribute(‘wrapper-list’).toUpperCase() !== mainField.toUpperCase()) {
if (wrapperEls[0].children[1].value === ”) {
wrapperEl.setAttribute(‘style’, ‘display: none’);
sectionList.options.selectedIndex = 0;
messageEl.innerText = ‘Please select an item from list(it\’s required)’;
messageEl.setAttribute(‘style’, ‘display: block’);
}

if ((!wrapperEl.getAttribute(‘wrapper-list’).toUpperCase().includes(selectedValue) &&
!currentEl.getAttribute(‘wrapper-list’).toUpperCase().includes(wrapperEls[0].children[1].value.toUpperCase()))) { // check if selected field is related with the main field’s option which has been selected
wrapperEl.setAttribute(‘style’, ‘display: none’);
sectionList.options.selectedIndex = 0;
messageEl.innerText = ‘Please select an item from list(it\’s required)’;
messageEl.setAttribute(‘style’, ‘display: none’);
}

if (wrapperEl.getAttribute(‘wrapper-list’).toUpperCase() === selectedValue) {
wrapperEl.setAttribute(‘style’, ‘display: block’);
messageEl.innerText = ”;
messageEl.setAttribute(‘style’, ‘display: none’);
} else if (selectedValue === “”) {
messageEl.innerText = ‘Please select an item from list(it\’s required)’;
messageEl.setAttribute(‘style’, ‘display: block’);
} else {
console.log(`Dependent field “${selectedValue}” doesn’t exist on the page`);
}
}
}
} catch (e) {
console.log(‘Error-log: ‘, e);
messageEl.setAttribute(‘style’, ‘display: block’);
messageEl.innerText = `Error log ${e}`;
}
}

Once you save your page, you should see only any standard fields you have (e.g. first name, last name, email) as well as the main field, but none of the dependent fields.

If you need additional help with this and are a Mautic Cloud customer, please email support@mautic.com.