Skip to content
English
Kontakt
  • There are no suggestions because the search field is empty.

Plural Extension: Form Element

This extension is a simple web application that offers a dynamic form that can be used within Plural's website element.
 
You can find the website of this element here: https://blue-water-01baa2b03.2.azurestaticapps.net/
 

How to pass data to this app from Plural

  •  Create a website element in Plural
  •  Set the parameters to pass from Plural to the Forms app
  •  Set the attributes that shall be saved from the Forms app into Plural
 

How to pass parameters into this app

  •  This app will create a form field with a label and an input field for each parameter that you pass to the website
  •  Each parameter key will be used as the label
  •  Each value will be used as the prefilled value of the input field
  •  OPTIONAL: you can set the type of the input field by adding a ::<type> to the Parameter Key in Plural (the type has to be any valid input type for HTML input elements and the fallback value / standard type if you do not pass in anything is "text")
  •  OPTIONAL: to force users to fill out a field you can set the "required" attribute by passing a * after the Parameter Key and before the :: (e.g.: User-ID*::number)
  •  OPTIONAL: you can set the language of the form by passing a language code as systemLanguage to the website element (has to be ISO 639-2 format (e.g.: eng or ger) and is currently predefined to only understand German. Default is English.)
 

Here are some examples

Here are some examples that should help you to get started.
 
 

Passing a parameter as text

Your Input in Plural:
 
Parameter Key = First Name::text
 
Parameter Value = Michael
Your rough output in the App:
 
In this case, the parameter key is used as the label and the parameter value is used as the prefilled value of the input field. The type of the input field is set to "text" by default.
 
 

Overriding the shown label of a parameter

 
Your Input in Plural:
 
Parameter Key = First Name[Vorname]::text
 
Parameter Value = Michael
 
 
Your rough output in the App:
 
In this case, the parameter key is used as the label and the parameter value is used as the prefilled value of the input field. The type of the input field is set to "text" by default. The label is overwritten by the text in the square brackets.
 
 

Passing a parameter as email

 
Your Input in Plural:
 
Parameter Key = Email Address*::email
 
Parameter Value = john.doe@humanizing.com
 
 
Your rough output in the App:
 
In this case, the parameter key is used as the label and the parameter value is used as the prefilled value of the input field. The type of the input field is set to "email". The "required" attribute is set because of the * after the Parameter Key.
 

Passing a parameter without a type

 
Your Input in Plural:
 
Parameter Key = Company name
 
Parameter Value = Humanizing
 
 
Your rough output in the App:
 
In this case, the parameter key is used as the label and the parameter value is used as the prefilled value of the input field. The type of the input field is set to "text" by default.
 

Passing a parameter as date

 
Your Input in Plural:
 
Parameter Key = Checkin Date::date
 
Parameter Value = 2023-03-15
 
 
Your rough output in the App:
 
In this case, the parameter key is used as the label and the parameter value is used as the prefilled value of the input field. The type of the input field is set to "date".
 

Passing a parameter as number

 
Your Input in Plural:
 
Parameter Key = Number of People::number
 
Parameter Value = 7
 
 
Your rough output in the App:
 
In this case, the parameter key is used as the label and the parameter value is used as the prefilled value of the input field. The type of the input field is set to "number".
 

Switching between English and German

 
Your Input in Plural:
 
Parameter Key = systemLanguage
 
Parameter Value = ger
 
 
Your rough output in the App: The form will be displayed in German. Precisely, the buttons and the text that the Avatar says when a required field is still missing will be in German.
 

Passing a parameter for a country dropdown

 
Your Input in Plural:
 
Parameter Key = Country::countrydropdown
 
Parameter Value = de
 
 
Your rough output in the App:
 
In this case, the parameter key is used as the label and the parameter value (ISO 3361 alpha-2 country code) is used to pre-select the country in the dropdown list. The dropdown list contains all available countries, each with their respective country codes as values. When a country is selected, the country code will be returned.
 
  

Make the Avatar say something at the start of the form

 
Your Input in Plural:
 
Parameter Key = say
 
Parameter Value = Hello, my name is Mia. I am here to help you with your booking.
 
 
Your rough output in the App:
 
The Avatar will greet the user with the sentence that you passed in.
 

Show a title at the start of the form

 
Your Input in Plural:
 
Parameter Key = title
 
Parameter Value = This is the title.
 
 
Your rough output in the App:
 
You will see a title above the form with the text that you passed in.
 
 

Show a subtitle at the start of the form

 
Your Input in Plural:
 
Parameter Key = subtitle
 
Parameter Value = This is the subtitle.
 
 
Your rough output in the App:
 
You will see a subtitle above the form with the text that you passed in.
 

How to pass parameters back to Plural 

  •  In Plural go to the "Attributes" tab of the website element
  •  For the JSON Key Path add $['<NameOfYourParameterKey>'] (e.g. for the example from above it would be $['First Name'] or $['Checkin Date'] and so on)
  •  Select the variable in which you want to save it
 
Here's an example to save the inputs from above: