Using dependency fields in forms

Version 7 of Kentico enables you to create dependent fields on forms without any programming. In this knowledge base article we will create an input-dependent field on our form with macros.
You will have to either create a simple form in CMSDesk / Tools / Forms with custom fields or you can install the Sample Corporate site and use the Contact us sample form, which I am using in this example. Our requirement is to only display the Email field if the user enters a first name. Thus we need to edit the fields FirstName and Email in CMSDesk / Tools / Forms / Contact Us / Fields. Please make sure you’ve enabled Advanced mode:

The properties of the Email field need to be changed to the following:

Visible condition: FirstName.Value != ""
Depends on another field: True

The visible condition can be designed using the Code tab when clicking the edit button:

As you have the context of the current Form definition available, the help box should be displayed as you start typing any field name:

Then you can navigate through the properties of the field and its methods:

Now, you just have to compare the value to an empty string, for example:

FirstName.Value != ""

The Depends on another field property enables us to update the field if something changes on the form. It wraps the form control into an update panel. Now you just have to go to the FirstName field and set the following property:

Has depending fields: true

This enables the given field (here, FirstName) to fire a postback to update the fields, which are set to depend on another field (are wrapped in an update panel) . To summarize, here are the settings of the relevant properties:

Now, if you display the form on the live site (e.g. on the Sample Corporate tab in Examples/Web-parts/Forms/Online-form.aspx), you can see, that  the Email field isn’t displayed at first:

However, if you enter some text in the First name field, the Email field is displayed after a short delay:


Applies to: Kentico CMS 7.0
Share this article on   LinkedIn Google+