Form with conditional fields custom layout

Dennis Hulsmans asked on April 22, 2016 13:50

Hi

I'm trying to create a conditional form. The link between the depending fields is working. To show the form, I'm using an HTML layout. But due to the depending fields, the input fields are hidden, but the surrounding divs aren't. This seems to be normal behavior, but now I want the surrounding HTML to be hidden too otherwise my front end shows a lot of white space ( >> see the div with class js-condition conditional_input__row). Is there a way to do this with macro's or with an ASCX layout?

<div class="contact__form">
    <div class="input-group__row">
        <fieldset class="col-md-12"><legend class="form__legend">{$ REN.ReceiveBrochure $}</legend>
        <div class="input-group">$$input:DeliveryMethod$$<label class="form__label"> </label></div>
        </fieldset>
    </div>

<div class="input-group__row">
    <div class="col-md-6">$$input:Name$$</div>
    <div class="col-md-6">$$input:LastName$$</div>
</div>

<div class="js-condition conditional_input__row">
    <div class="input-group__row">
        <div class="col-md-8">$$input:Street$$</div>
        <div class="col-md-4">$$input:Number$$</div>
    </div>
    <div class="input-group__row">
        <div class="col-md-4">$$input:Zipcode$$</div>
        <div class="col-md-8">$$input:City$$</div>
    </div>
</div>

<div class="input-group__row">
    <div class="col-md-12">$$input:Email$$</div>
</div>
<div class="input-group__row">
    <div class="col-md-12">$$submitbutton$$</div>
</div>

kind regards, Dennis

Recent Answers


emma zelewsky answered on April 22, 2016 17:39

You might want to take a look at Kentico's built-in forms module, which has a forms builder and a ton of options for each form field -- K9 forms documentation. The options include show-hide based on conditions, and every field offers the option of "has depending fields" and "depends on another field."

For instance, if you wanted to have a section for a separate billing address, you could set the separate billing as a checkbox set with "has depending fields" and then the address, city, etc. would be "depends on another field" and visibility would be a macro like SeparateBilling.Value=true.

Then on the page template, you can use the webpart for displaying forms or they can be inserted via the text editor.

1 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on April 25, 2016 09:17 (last edited on April 25, 2016 09:18)

Hi Emma

I'm already using the built-in forms module. And I'm also using the "has depending" and "depends on". But the issue I'm having is that I use a custom HTML layout, with custom divs. When you use the has depending and depends on functionality the rendered labels and input fields can be hidden BUT not the custom surrounding HTML.

So my problem is that I have all the div's in my custom HTML layout and I want to test some values there, unfortunately I was unable to hide the custom div's in my custom HTML layout surrounding the labels and input fields. I also tried the custom ASCX layout but that didn't go well either.

Now I managed to get it to work, but I had to use the content before and content after fields for each field in my form, which results in sometimes not closing a div because it's wrapped in a row or something (see my HTML above)

Isn't there an easier solution, a more customer friendly solution? Because if I have to tell the customer how HTML works (especially the content before and content after parts),well... you know :)

2 votesVote for this answer Mark as a Correct answer

emma zelewsky answered on April 26, 2016 15:39

Have you tried using a macro for the HTML envelope content before and content after? For instance, the HTML content before could be a macro like {% if (testDiv.Value=true) {"<div>my div</div>"} #%} and then under the field advanced settings the visibility condition would be testDiv.Value=true (Note that the visibility condition doesn't use typical macro brackets {% foo %}

1 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on April 27, 2016 11:07

Hi Emma

I'm trying to avoid the content before and after fields. The customers usually don't have any "programming background", so they can't work with if-statements like that. They usually don't know HTML either. So that's why I was wondering if there was a more "customer friendly" solution available :) .

2 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.