1. DE

Drop-down list

The Drop-down list form element offers you a space-saving option for integrating various possible responses into your form using a list format. Users can click to expand your drop-down list and view the various options. When they select an option, the drop-down list then closes automatically.

If you want, you can also add a note to your dropdown list, so as to give users advice about selecting an option, for example. You can also specify whether one or more options can be selected. One of the options for selection in this field can also be set as the default option selected when the form is accessed. The form field can also be set as a required field. You can decide and specify all of these aspects individually according to your requirements.

A drop-down list is shown.

  1. In the Structure area, click the green plus sign.
  2. Navigate to General →Standard and click Drop-down list.
    You can now see the form element you’ve just added in the form tree.
  3. On the right, under Edit Drop-down list, you can now adjust the settings for your new form element as required.

Property Description
Label Enter the text of the label for the drop-down list. By default, the label is shown above the drop-down list.
Technical name Each form element that is added to a form is automatically assigned a unique name – known as the ‘technical name’ – by Formcentric. This name is based on the designator for the form element.
Alternatively, you can generate the technical name from the label. To do this, click New from label. Find out more about the technical name.
Here you have the option of adding some text to your drop-down list that gives users additional information, such as instructions about filling out the field. By default, this text is shown underneath the drop-down list.
Select image This setting gives you the option of adding an image to be displayed next to this form element.
Field width You use the field width to set the width at which the drop-down list is shown in the form.
Display variant You can use this to add a CSS class from the website that you will be embedding the form into. The CSS class chosen here will be applied to the form element.
Alternatively, you can select one or more display variants to apply to the form element.
Required field Check Required field if an option must be selected from this form element when completing the form. An ‘*’ will then be added to the end of the label for this drop-down list, marking it as a required field. Accordingly, users will be unable to submit the form or move to the next page (if this is a multi-page form) if they have not completed this form element properly.
Error message In this field, enter the text shown to users if they try to skip filling out this form field.
Placeholder If you check Placeholder, you can enter a piece of text like ‘Please select’, which is displayed in the drop-down list. This disappears automatically once an option is selected.
User input If you check User input, then users can enter their own option.
Multiple choice Check the Multiple choice checkbox if your users should be able to select multiple options.
Data source Select a data source here that you want to link to and use for the options in your drop-down list. The information provided by this data source will be accessed dynamically, i.e. at the exact moment that your users access the form.
Formcentric provides you with the default data source Country names.

You can enter additional parameters to the data source via Key and Value. The data source Country names does not require any parameters. Learn more about data sources here.
Preselection If you have linked your drop-down list to a data source, then you can specify that one option from the data source is preselected when the form is first accessed. You do this by entering the value for the corresponding option into this field.

Let’s assume that you have added the Country names data source and you would like the option ‘Germany’ to be preselected. In the Country names data source, the values for the options match the country codes according to ISO 3166. Accordingly you enter DE here for Germany. If you want to select Portugal instead, you would enter PT accordingly.
Autofill The Autofill option is active by default. This involves form data stored by the browser being suggested as autocomplete options for the form field.
To improve the quality of these suggestions, you can tell the browser about the information that is expected for this form field.

  1. Shipping or invoice address
    Select Shipping or Invoice if this form field is part of a shipping address or an invoice address.
  1. Contact type
    Select an appropriate contact type here if users are expected to input a fixed-line or mobile phone number, fax or pager number, or an email address into this form field. Specifying a contact type will affect the selection offered to you for ‘Usage’ (see below). This field is optional and can be left empty.
  1. Usage
    Specify the kinds of information entered into this form field.

Deactivate autofill
Select Deactivate autofill to prevent the field from using autofill. This will also stop web browsers from saving the form field data. To do so, move the slider to the left, which deactivates autofill for this form field.

Adding options

After you’ve added your drop-down list to the form and defined its corresponding properties, you can then add the individual options to the field.

To do so, click New option in the editing area for the drop-down list. Alternatively, you can add an option by using the green circled plus sign for the drop-down list in the form tree.

You can then specify the properties for each individual option in the corresponding option editing area

Property Description
Label Enter the text for the option to be shown in the drop-down list. You can use the buttons to change the formatting of this text.
Enter a value for the option. Please note that this identifier must be unique. Make sure that you choose a value that lets you easily recognise the option that it refers to.

You will need this value if you want to link a condition to this option, for example. When creating a condition, you first select the form element where this option is stored. In the next step, you are then shown all of the values that are present in this form element and you will then need to pick your option from this list. To be able to identify the correct value from all the values shown, using an easily recognisable identifier is a wise idea.
Select image
This setting lets you add an image that will be displayed next to this option.
Preselected Check the Preselected checkbox and the corresponding option is then selected initially when the form is loaded.