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
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:
Kentico CMS 7.0