Using form elements

The Editor is the most important part of Formcentric: this is where you create, edit and translate your forms. Directly next to the editing area, the Editor also shows you a preview of your form, so that you can always check your current state of progress while you are working on your form. If you create a new form, it will be opened directly in the editor.

Are there errors in your form that are preventing you from publishing it? You won’t need to look for very long to find your errors, as these are displayed directly in the form tree. The red dots and red circles that are shown on the left of the form tree if errors are present let you immediately identify the pages and form elements currently affected by these errors.

Our article The editor - an overview has already given you a first look at the Editor. In this article, we introduce you to the various views in the Editor. When you are working in the Editor, a preview of your form is shown on the right of the editing area. As you make changes to the form, you can see the effects immediately in this preview. This live preview of the state of progress of your form means that you can check to confirm that the form looks as it should while you are putting it together. And it’s not just the form design, either: you can also check the functionality of your form and confirm that it is working as it should be. You do not need to publish the form first. Instead, you can try out all of your changes beforehand.

You can create sets with frequently used combinations of form elements, which you can then add to any form with just a single click. By using sets, you can save time, because you will no longer need to add these groups of recurring form elements individually to each form. Instead, you can simply add them all quickly and easily, while also ensuring the consistent use of these form elements. When creating sets, you can choose whether to make them available just for your own use or also for the members in your team. You can also specify whether certain properties of form elements – such as error messages and information fields – should also be stored in the set.

If you need fields where users can enter short pieces of text like their name, street, etc., then you need to use the single-line input field form field. As with all of the other types of form field, you can also customise this field in many different ways. You can specify whether the input field is a required field, for example, whether it displays some placeholder text or whether it is given a default value.

Use the single choice form element when you want to offer users a set of options but you only want them to be able to choose one option.

With the Multiple choice form element, you can offer your users a set of options from which they can then pick one or more to complete the field. The various options are displayed as checkboxes.

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.

The single-line input field is probably the form field you will use most often in your forms. If you are expecting short, single-line answers from users that need no further validation, then you can use our predefined Short text form element. This element is ideal for form fields such as first and last names, for example.

You use the Long text form field to offer your users more space for entering multi-line text input, such as for comments or messages. As with the other form elements, you can also configure this field to match your requirements. You can decide whether to set the field as a required field, for example, or whether to use placeholder text. You can also add a note to your field to provide additional information to your users.

Whether for general communications, an order or a newsletter subscription, there are many reasons why you might need an email address from your users. To request email address input, you can use our predefined Email form field. With just one click, you can add an input field to your form that will check the text entered by the user automatically, so as to confirm that the email address entered is valid in terms of its format.

Sometimes, you will need a form field that only accepts numbers from your users. This might be a number between 1 and 10 as a rating for your service, for example, or an area value for a roof that must not be less than 80 m². In all of these cases, you can use the predefined Number form element and also specify the range for the number that can be entered into this form field.

The predefined Phone number form element is a one-step method for adding a form field to your form that only accepts properly formatted phone numbers. If you need to restrict the phone numbers entered, then you can specify that phone numbers must be from a specific country or must be of a certain type. If your users are able to select a country from your form and you want them to then enter a phone number from the country that they have selected, then this is also not a problem with Formcentric.

If you need an input field for a date – perhaps for a birth date or a seminar registration – then you can use the predefined Date form element that only accepts dates as input. You can also specify additional requirements for the date, such as setting a date range: the date entered by the user must then be within this period.

Use the Password form element to add a password field to your form. The password field is essentially a single-line input field, with one key difference: characters entered are not shown but are represented by a line of dots. These dots act as a ‘privacy screen’ for users when typing in their password.

Sometimes, you may need to allow your users to upload files such as documents or photos while filling out a form. You can do this by using the predefined Upload file form element, which adds an upload area to your form that your users can use to upload one or more files. After the form has been submitted, you can analyse these files as part of the form data.

The Hidden field is a form element that is not displayed in the form itself. The field is therefore invisible to form users. You can use hidden fields to access additional information about your users. If you add the variable ${serverDate} to a hidden field, for example, then you can find out when your users completed the form. When your user submits a form, this information is shown to you in the Submissions area along with the data from all of the other form fields completed.

You use the Calculated value form element to calculate a value from the input that the user enters into a form.

You use the Condition form element to create a form that responds to user input. This turns your form into a dynamic form. As a result, you can have the form show form elements to the user only if these are relevant, for example, while form elements that are not relevant are hidden. If a certain condition is fulfilled, you can also specify that entire form pages should be skipped or that an input field becomes a required field. By using conditions, you can ensure that the forms you create remain clearly structured and adapt dynamically to the needs of your users.

Sometimes, you will want to provide users with information. Perhaps you need to explain how to fill out the form or offer them some product details. To do this, you can use the Paragraph form element and add text to your form anywhere you like.

Sometimes, it may be necessary to provide users with additional information, such as a price list or a more detailed help file. If you do not want to include this information directly on your form, then you can use the Button form element instead. This allows you to include any JavaScript action you want in your form, which will be executed when users click the button. As examples, you could include a ‘Price list’ or ‘Help’ button in your form. When users click the button, a new window opens with your information presented in it.

You use the Layout form element to combine multiple form elements into a single group that you can then style as a single entity. The form elements that are grouped into a layout behave like one object. This lets you use display variants to change the appearance of several form elements in just a single step. For example, if you assign a display variant that defines a frame to the layout, then all form elements included in the layout will be displayed within a frame. In the following example, form elements that are logically related were grouped within a layout element. By using the horizontal line, users can instantly see when a new semantic unit begins.

Use the Summary form element – as the last page in your form, for example – and present users with a summary of their entered data before submitting the form. This allows users to review their inputs. If they find something that they want to change, they can page back through the form and make these changes. Once everything is correct, they can then submit the form.

Use the Fieldset form element to split your form up into thematically similar sections. This lets you group multiple form elements in a form into a logical unit – such as personal data, invoice address, delivery address, etc.

The form element Image offers you countless ways to make your form more individual. Adding your company logo or product photos are just two examples of how to do this. And you can also add imagery to give your form a certain style.

For publicly accessible forms through which information is forwarded to you, protecting against spam and abuse is an important issue. How can you ensure that entries in your forms are made personally and not by bots or programs? As a security measure, use the Captcha form element in your forms. Captcha is a security test designed to distinguish between humans and computers and prevent spam bots from submitting your forms. The test consists of randomly arranged, distorted, and merged letters, numbers, and symbols, known as a Captcha code. This code is relatively easy for humans to read but difficult for computers to decipher. Users must correctly enter this code into an input field. If the code is correct, they can submit the form - otherwise, they cannot.

Let your users enter their digital signature quickly and easily, directly in the form – and avoid having to use a printer or making a trip to the post office. The Signature form element not only saves both time and money but also significantly simplifies the whole signing procedure itself. Whether your users are working from a PC, tablet or smartphone, they can simply add their signature to the form with the mouse, their fingertip or a stylus.

Often, you will need to have only certain kinds of inputs permitted for a specific form field – such as when users need to enter only an email address or phone number. In such cases, you can use validators to help users complete these kinds of form fields and to make them aware of any errors in their input. Most validators will be available for the Input field form field type, where you can specify the format that users need to follow when inputting data into this field. The Password and File form fields also come with their own validators. Users will receive an error message if their input does not match the requirements set by these validators.

You can use variables when setting default values for input fields. When the form is displayed, these variables are replaced with a value that is generated dynamically at runtime. ‘Dynamically at runtime’ means that the information required for the value is not fetched until the point in time when the user accesses the form.

Formatting helps us to structure our texts. We can apply bold or underline to important words, use headings to make title text stand out from body text, and prefix our list items with bullets or numbers to give them a clear-cut structure. In Formcentric, you can use Markdown, a simplified markup language, to format the text items in your form. Markdown can also be used to add images and links.

JavaScript gives you a way to validate input for several form elements at the same time and create relationships between them. Since you can use all of the operations and functions offered by JavaScript, you can make things as simple or complex as necessary. Access to the form fields – and therefore to the input that users make into the form – is handled in JavaScript using the technical name of the respective form field.

Think of conditions as rules set within forms. These rules determine what happens next based on what users input or select.

You can copy one or multiple form elements, not only within a single form and paste them to another location within the same form, but also transfer them into a completely different form. This functionality allows you to duplicate and reuse form elements across different forms without needing to recreate them from scratch.

When using our provided data sources, you can specify additional parameters. These parameters allow you, for example, to set the language in which the country names are displayed. Depending on the selected data source, different parameters are available to you. In the article Using data sources and parameters, we demonstrate how to configure data sources with practical examples.