Should Conditional Visibility on form builder only show fields on submit?

Michael Legacy asked on April 5, 2021 20:27

I'm using Kentico 12 MVC and am working with the Form Builder. We've built many forms before but this is the first with Conditionally visible fields.

I'm doing something very simple: a user selects Yes or No to a question and another form field shows up if they select "Yes". Simple.

The conditional field only shows up AFTER the user hits submit, however. This seems asinine to me and horrible user experience. Am I doing something wrong?

form builder conditional visibility

Recent Answers

Liam Goldfinch answered on April 5, 2021 22:08 (last edited on April 5, 2021 22:12)

Hi Michael,

You are correct, the conditional logic should happen when you're clicking an option, not on submission of the form.

I believe you are missing key JavaScript that is bundled with Kentico, you should be including the following in your views (or on the layout directly):

@section styles
{
    @* Includes stylesheets necessary for page builder functionality *@
    @Html.Kentico().PageBuilderStyles()
}

@section scripts
{
    @* Includes scripts necessary for page builder functionality *@
    @Html.Kentico().PageBuilderScripts()
}

There is an example of this on the tutorial area here.

However, if you don't want to include all of the pagebuilder script, and you specifically want just the form updating code, you could add an MVC bundle that includes the following JS:

~/Kentico/Scripts/forms/updatableFormHelper.js

You can do this by adding/editing the BundleConfig.cs and adding:

namespace DancingGoat.Web
{
    /// <summary>
    /// Bundle configuration for application.
    /// </summary>
    public class BundleConfig
    {
        /// <summary>
        /// Register bundles to given <paramref name="bundles"/> collection.
        /// </summary>
        public static void RegisterBundles(BundleCollection bundles)
        {
            RegisterCustomFormBuilderBundle(bundles);
        }

        private static void RegisterCustomFormBuilderBundle(BundleCollection bundles)
        {
            var bundle = new ScriptBundle("~/bundles/updatableFormHelper")
                .Include("~/Kentico/Scripts/forms/updatableFormHelper.js");

            bundles.Add(bundle);
        }
    }
}

and then in the layout file, you can reference the bundle:

@Scripts.Render("~/bundles/updatableFormHelper")

2 votesVote for this answer Mark as a Correct answer