Visforms 5
Dependent Hidden Fields

Dependent Hidden Fields

Introduction

Note: These features are part of the Visforms Subscription and are not included in the free Visforms version.

This demonstrates how to completely hide conditional form fields. This is necessary because control fields for conditional display cannot be configured for hidden fields.

The goal is the following:

  • When a specific selection is made in listbox field option-1, a conditional listbox field option-2 should be displayed.
  • The user will make a selection in this conditional listbox field option-2.
  • Text not displayed in the form is included in the form data, depending on the selection in listbox field option-2.
  • Text not displayed in the form will be visible in emails and attached PDF documents.
  • The text visible in emails and attached PDF documents is therefore dependent on the user’s selection.

Form

Conditional Text Fields Invisible

The conditional field option-2 should only be displayed when option label2 is selected in the listbox field option-1. A conditional listbox field 'option-2' should only be displayed when a specific selection is made in the listbox field 'option-1'.

When option label2 is selected in the listbox field option-1, the conditional field option-2 is displayed.
The user will make a selection in the conditional listbox field option-2. The user will make a selection in the conditional listbox field 'option-2'.

Text not displayed in the form is included in the form data, depending on the selection in the listbox field option-2. Text not displayed in the form is included in the form data, depending on the selection in the listbox field 'option-2'.

Conditional Text Fields Visible

The text fields text-1, text-2, text-3, and hidden-1, which are not displayed in the form, are shown here purely for illustrative purposes.
The hidden field hidden-1 remains invisible.

In the case of the text field text-3, the permanent suppression of its display in the form must be done using a separate CSS class.
In the case of the hidden field hidden-1, the permanent suppression of its display in the form occurs automatically.

The text not displayed in the form is shown here for illustrative purposes.

Data View

The transferred data matches the requirement. Depending on the user selection, only the corresponding texts are displayed in the form record.

In the case of the text fields text-1 and text-2, the separate start text is set if the selection is correct.

  • Otherwise, the field value is empty.
  • Therefore, two text fields are required here.

In the case of text field text-3 and hidden field hidden-1, the appropriate text is set.

  • If no appropriate selection is made, the field value remains empty.
  • Therefore, one field is sufficient here.
    This simplifies the structure of the email template and the PDF template.
    It also makes the automatically generated data list in the email easier to read.
The transferred data matches the requirement.

The CSS property display: none has no influence on the transmission of field values when the form is submitted.
The HTML attribute disabled prevents the transmission of field values when the form is submitted.

Form configuration:

Note: As of Visforms version 5.5.0, defining a custom CSS class to completely suppress the display of fields is no longer necessary. Starting with this version, specifying the predefined CSS class visinvisible in the field configuration is sufficient. More information can be found in Invisible Field.

  • Form Configuration » Tab: Frontend Web Assets, Sub-Tab Form

    Parameters: CSS =

    .hide-me {
display: none;
}

Field Configurations

option-1

  • Field Type: Listbox, Control Field
  • Controls the display of conditional field option-2:
    option-1 = ‘label2’ –> option-2 is visible

option-2

  • Field Type: Listbox, Conditional Field, and Control Field
  • Is a conditional field:
    • Field Configuration » Tab: Basic Settings

      Group: Dynamic Settings » Parameters: Conditional Display = ‘option-1 || label2’.

  • Controls the display of conditional fields text-1, text-2:
    option-2 = ‘label1’ –> text-1 is visible
    option-2 = ‘label2’ –> text-2 is visible

text-1

  • Field type: Text, conditional field, hidden
  • Is a conditional field:
    • Field configuration » Tab: Basic Settings

      Group: Dynamic Settings » Parameter: Conditional Display = ‘option-2 || label1’.

  • Is hidden by its own CSS class:
    • Field Configuration » Layout tab

      CSS Class Settings group » Parameter CSS Class Control Group = ‘hide-me’

  • Contains a start value:
    • Field Configuration, ‘Basic Settings’ tab

      ‘Start Value Settings’ group » Parameter Fill field with = Start value
      ‘Start Value Settings’ group » Parameter Start value = ‘fix initial value text-1’

text-2

  • Field type: Text, conditional field, hidden
  • Is a conditional field:
    • Field Configuration » Basic Settings tab

      Dynamic Settings group » Parameter: Conditional Display = ‘option-2 || label2’.

  • Is hidden by its own CSS class:
    • Field configuration » Layout tab

      CSS Class Settings group » Parameter CSS Class Control Group = ‘hide-me’

  • Contains a start value:
    • Field configuration, ‘Basic Settings’ tab

      ‘Start Value Settings’ group » Parameter Fill field with = Start value
      ‘Start Value Settings’ group » Parameter Start value = ‘fix initial value text-2’

text-3

  • Field type: Text, hidden
  • Is hidden by its own CSS class:
    • Field configuration » Layout tab

      CSS Class Settings group » Parameter CSS Class Control Group = ‘hide-me’

  • Is an SQL field:
    • Field configuration » Basic Settings tab » Dynamic Settings group

      Parameter SQL Field = Yes
      Parameter Reload on change = ‘option-2’
      Parameter field value SQL statement =

      select CASE 
WHEN 'value1' in ${input:option-2} THEN 'sql-text-value1' 
WHEN 'value2' in ${input:option-2} THEN 'sql-text-value2' 
ELSE '' 
END;

hidden-1

  • Field type: Hidden
  • Is an SQL field:
    • Field configuration » Basic Settings tab » Dynamic Settings group

      Parameter SQL field = Yes
      Parameter Reload on change = ‘option-2’
      Parameter Field value SQL statement =

      select CASE
WHEN 'value1' in ${input:option-2} THEN 'sql-hidden-value1'
WHEN 'value2' in ${input:option-2} THEN 'sql-hidden-value2'
ELSE ''
END;

PDF Template

The HTML for the document

With the color and text formatting:

<h1><span style="font-size: 12px;"><strong>Selection (ID = ${id})</strong></span></h1>
<p><span style="font-size: 12px;">Sent: ${created}</span></p>
<p><span style="font-size: 12px;">By: ${created_by|NAME}</span></p>
<p class="${option-1|DIE}"><span style="font-size: 12px;">option-1 = ${option-1}</span></p>
<p class="${option-2|DIE}"><span style="font-size: 12px;">option-2 = ${option-2}</span></p>
<p class="${text-1|THE}"><strong><span style="font-size: 12px; color: rgb(53, 152, 219);">${text-1}</span></strong></p>
<p class="${text-2|THE}"><strong><span style="font-size: 12px; color: rgb(53, 152, 219);">${text-2}</span></strong></p>
<p class="${text-3|THE}"><strong><span style="font-size: 12px; color: rgb(53, 152, 219);">${text-3}</span></strong></p>
<p class="${hidden-1|THE}"><strong><span style="font-size: 12px; color: rgb(53, 152, 219);">${hidden-1}</span></strong></p>

Without the color and text formatting:

<h1><span><strong>Selection (ID = ${id})</strong></span></h1>
<p><span>Sent: ${created}</span></p>
<p><span>By: ${created_by|NAME}</span></p>
<p class="${option-1|DIE}"><span>option-1 = ${option-1}</span></p>
<p class="${option-2|DIE}"><span>option-2 = ${option-2}</span></p>
<p class="${text-1|DIE}"><strong><span>${text-1}</span></strong></p>
<p class="${text-2|DIE}"><strong><span>${text-2}</span></strong></p>
<p class="${text-3|DIE}"><strong><span>${text-3}</span></strong></p>
<p class="${hidden-1|DIE}"><strong><span>${hidden-1}</span></strong></p>

Overhead fields in the PDF template

Some overhead fields are inserted above the actual form field values:

  • The record ID is output in the heading: ${id}.
  • The first line contains the form submission date: ${created}.
  • The second line contains the name of the registered sender of the form: ${created_by|NAME}.
    Without the placeholder option NAME, the registered sender’s user ID would be displayed: ${created_by}.
    More information can be found in the section Administrative information of the transmitted data.

Preview

Page 1 with transfer ID 28

  • A field value only exists for listbox field option-1.
  • Empty field values do not result in blank lines.
Preview: Page 1 with transfer ID 28

Page 1 with transfer ID 29

  • A field value exists for both listbox fields option-1 and option-2.
  • For listbox field option-2, the label3 option is selected, for which there is no specified suffix.
Preview: Page 2 with Transfer ID 29

Page 1 with Transfer ID 30

  • A field value exists for both listbox fields option-1 and option-2.
  • For listbox field option-2, the label1 option is selected, for which there is a specific suffix.
Preview: Page 3 with Transfer ID 30

Page 1 with Transfer ID 31

  • A field value exists for both listbox fields option-1 and option-2.
  • For listbox field option-2, the label2 option is selected, for which there is a specific suffix.
Preview: Page 4 with Transfer ID 31
What's on this Page