Table of Contents

Show and hide form fields

Ingo Updated by Ingo

With some web forms, further input should only be requested when a checkbox is ticked or a value of a dropdown / radio button is selected. The query of accompanying persons is already stored in the form editor. For further queries, such as an optional billing address or other additional queries, JavaScript codes are required. In the following we show this for the use of a checkbox and for the use of a radio button / drop-down selection.

Show and hide fields with a checkbox

To access the Javascript Editor in the template "Registration Form" within the Web Page Generator:

7.png

The following JavaScript code line must now be inserted in the JavaScript section of the Web Page Generator in the "Registration Form" module to program the display and hiding:

felderEinUndAusblenden('HTML ID Checkbox', ['HTML ID 1', 'HTML ID 2']);

The red placeholders HTML IDs must be replaced with the correct values.

As soon as the JavaScript area is unfolded, the column "HTML ID" of the form fields is displayed. This HTML ID must first be entered in the JavaScript code for the checkbox in the first placeholder between the single quotation marks. Please note the correct spelling. The HTML ID can also be inserted directly in the JavaScript code by placing the cursor in the JavaScript code in the correct position between the single quotation marks and then clicking on the correct field line in the form list. Next, you have to enter the form fields that you want to expand and collapse. To do this, insert the HTML ID in single quotation marks in the area between the square brackets. The list can be extended by commas.

Where do you find the correct HTML ID designation? 

The HTML ID designation can be found in the CMS of your registration form. This is always the form field (such as checkbox or radio button), which must first be filled in by the guest before further fields are displayed. As long as this field is not filled in, the hidden form fields are not displayed.

1.png

As you can see, the HTML ID usually starts with "form_".

ATTENTION: Please note with this procedure that fold-in and fold-out form fields must not be mandatory fields.

We would like to show this in concrete terms using the example of an optional company invoice. For this purpose, the form will be extended by a checkbox to query a company invoice and two text fields to query the company and address. These are not mandatory fields. We then insert the JavaScript code and enter the correct HTML IDs of the checkbox and the two fields. This can be seen in the following section of the web page generator:

Formulargenerator_Checkbox_einblenden.png

The corresponding form on the website will then look like this. After selecting the checkbox "I need a company invoice" both fields for the company and the address are displayed.

Formular_Checkbox_einblenden.png

Show and hide fields with a radio button or a drop-down

Showing and hiding a selection after a radio button or dropdown works very much like a checkbox. You can then show and hide various things, such as text fields and a checkbox. We will look at this in more detail later in the example. 

The following JavaScript code line must be inserted in the JavaScript section of the Web Page Generator in the "Registration Form" module But the red placeholders HTML IDs must be replaced with the correct values and the value fields must contain values from the radio button / dropdown.

felderEinUndAusblenden('HTML ID RADIOBUTTON', '', ['HTML ID 1', 'HTML ID 2']);

felderEinUndAusblenden('HTML ID RADIOBUTTON', '', ['HTML ID 1']);

felderEinUndAusblenden('HTML ID RADIOBUTTON', '', ['HTML ID 2', 'HTML ID 3', 'HTML ID 4']);

This code is very similar to the code for the checkbox. In addition, the value of the radio button/dropdown selection must still be entered. For each value of the selection a line of code must be created. Only the fields in the square brackets will be displayed when selected by the user. All other fields, which are specified with a different value, are hidden. Please make sure that the value is entered exactly as it is noted in the form for the radio button / drop-down. Only the upper and lower case is irrelevant here.

Please note that for the radio button / dropdown selection, too, the form fields that can be folded in and out must not be mandatory fields.  

Summary

Simplified you can say that you replace the HTML ID with the name of the radio button or dropdown, which is supposed to act as a signal for showing or hiding additional fields. Then you enter the name of the values that have to be clicked on in the radio button to show or hide additional fields. All fields that are to be shown must then be specified within the square brackets. 

Concrete example

Your event consists of the actual event and an aftershow party. Now you would like to ask your guests in the event whether they participate in the event and the party or only in a part of it. For this you use a radio button selection:

2.png

Depending on which event sections the guest attends, you may want to make further queries. A meal is included with the event. So, for example, you could ask for the meal requests when attending "event only" and "event and aftershow". We assign the values "Meat", "Vegetarian" and "Vegan".

Since you are convinced that the party could go on into the late evening hours, you would like to offer all participants of the aftershow party a free bus shuttle and would therefore have to include the request for the bus shuttle by checkbox. 

So let us summarize:

  • Option 1: Guest only comes to the event. Only the query for the food wishes should appear (drop-down selection between meat, vegetarian and vegan)
  • Option 2: Guest comes to the event and to the after show. Therefore, the drop-down request for food and the checkbox for the bus shuttle should appear.
  • Option 3: Guest only participates in the aftershow. Therefore only the query about the bus shuttle should be displayed. 

And so the whole thing is then implemented in the Javascript Editor:

9.png

And this is how it looks like in your registration form. You will now see 3 screenshots with the displayed fields, which vary depending on your selection:

Participation only in the event:

4.png

Participation in event and after show:

5.png

Participation only in the after show:

6.png
Always pay attention to the correct spelling of the individual HTML IDs and values you need for the Javascript code! Always use the latest website templates provided by MATE to avoid possible bugs and errors!

How did we do?

Add your privacy policy to the form

Enter accompanying persons

Contact