Element settings
İletişim
 
This is used as a descriptive label when displaying this webform element.
İletişim settings
VisibleLabelsSettings
name
This is used as a descriptive label when displaying this webform element.
The placeholder will be shown in the element until the user starts entering a value.
A short description of the element used as help for the user when they use the webform.
A tooltip displayed after the title.
A tooltip displayed after the title.
Check this option if the user must enter a value.

Text field
company
This is used as a descriptive label when displaying this webform element.
The placeholder will be shown in the element until the user starts entering a value.
A short description of the element used as help for the user when they use the webform.
A tooltip displayed after the title.
A tooltip displayed after the title.
Check this option if the user must enter a value.

Text field
email
This is used as a descriptive label when displaying this webform element.
The placeholder will be shown in the element until the user starts entering a value.
A short description of the element used as help for the user when they use the webform.
A tooltip displayed after the title.
A tooltip displayed after the title.
Check this option if the user must enter a value.

Email
phone
This is used as a descriptive label when displaying this webform element.
The placeholder will be shown in the element until the user starts entering a value.
A short description of the element used as help for the user when they use the webform.
A tooltip displayed after the title.
A tooltip displayed after the title.
Check this option if the user must enter a value.

The type of element to be displayed.
address
This is used as a descriptive label when displaying this webform element.
The placeholder will be shown in the element until the user starts entering a value.
A short description of the element used as help for the user when they use the webform.
A tooltip displayed after the title.
A tooltip displayed after the title.
Check this option if the user must enter a value.

Text field
address_2
This is used as a descriptive label when displaying this webform element.
The placeholder will be shown in the element until the user starts entering a value.
A short description of the element used as help for the user when they use the webform.
A tooltip displayed after the title.
A tooltip displayed after the title.
Check this option if the user must enter a value.

Text field
city
This is used as a descriptive label when displaying this webform element.
The placeholder will be shown in the element until the user starts entering a value.
A short description of the element used as help for the user when they use the webform.
A tooltip displayed after the title.
A tooltip displayed after the title.
Check this option if the user must enter a value.

Text field
state_province
This is used as a descriptive label when displaying this webform element.
The placeholder will be shown in the element until the user starts entering a value.
A short description of the element used as help for the user when they use the webform.
A tooltip displayed after the title.
A tooltip displayed after the title.
Check this option if the user must enter a value.

The type of element to be displayed.
Please select predefined options.
postal_code
This is used as a descriptive label when displaying this webform element.
The placeholder will be shown in the element until the user starts entering a value.
A short description of the element used as help for the user when they use the webform.
A tooltip displayed after the title.
A tooltip displayed after the title.
Check this option if the user must enter a value.

Text field
country
This is used as a descriptive label when displaying this webform element.
The placeholder will be shown in the element until the user starts entering a value.
A short description of the element used as help for the user when they use the webform.
A tooltip displayed after the title.
A tooltip displayed after the title.
Check this option if the user must enter a value.

The type of element to be displayed.
Please select predefined options.
If 'Automatic' is selected Flexbox layout will only be used if a 'Flexbox layout' element is included in the webform.
Replace select element with jQuery Select2 select box.
A short description of the element used as help for the user when they use the webform.
Displays a Help tooltip after the element's title.
The text displayed in Help tooltip after the element's title.Defaults to the element's title
The text displayed in Help tooltip after the element's title.
Displays a read more hide/show widget below the element's description.
The click-able label used to open and close more text.Defaults to: Devamı
A long description of the element that provides form additional information which can opened and closed.
Determines the placement of the title.
Determines the placement of the description.
Determines the placement of the Help tooltip.
Text or code that is placed directly in front of the input. This can be used to prefix an input with a constant string. Examples: $, #, -.
Text or code that is placed directly after the input. This can be used to add a unit to an input. Examples: lb, kg, %.
Make this element non-editable with the user entered (e.g. via developer tools) value ignored. Useful for displaying default value. Changeable via JavaScript.
Allow element to be populated using query string parameters.
If checked, adds required indicator to the title, if visible. To required individual elements, also tick "Required" under the İletişim settings above.
Conditional logic
StateElementTrigger/ValueOperations
if of the following is met:
Enter a number range (1:100)
When this element is hidden, this element's value will be cleared.
The default value of the composite webform element as YAML.
If checked, the composite sub-element titles will be displayed as the table header labels.
This is used as the table header for this webform element when displaying multiple values.
This is used by the add/remove (+/-) icons.
This is used when there are no items entered.
Minimum items defaults to 0 for optional elements and 1 for required elements.
If unchecked, the elements will no longer be sortable.
If unchecked, the add/remove (+/x) buttons will be removed from each table row.
If unchecked, the add button will be removed from each table row.
If unchecked, the remove button will be removed from each table row.
If checked, an add more input will be added below the multiple values.
If checked, users will be able to input the number of items to be added.
This is used as the add more items button label for this webform element when displaying multiple values.
This is used as the add more items input label for this webform element when displaying multiple values.
Fieldset: Wraps inputs in a fieldset. RecommendedForm element: Wraps inputs in a basic form element with title and description.Container: Wraps inputs in a basic div with no title or description.
Wrapper CSS classes
Apply classes to the element's wrapper around both the field and its label. Select 'custom…' to enter custom classes.
Apply custom styles to the element's wrapper around both the field and its label.
Enter additional attributes to be added to the element's wrapper.
Element CSS classes
Apply classes to the element. Select 'custom…' to enter custom classes.
Apply custom styles to the element.
Enter additional attributes to be added the element.
Apply classes to the element's label.
Apply custom styles to the element's label.
Enter additional attributes to be added to the element's label.
Single item
Select how a single value is displayed.
The HTML to display for a single element value. You may include HTML or Twig. You may enter data from the submission as per the "variables" below.
The text to display for a single element value. You may include Twig. You may enter data from the submission as per the "variables" below.

Learn about Twig and how it is used in Drupal.

The following variables are available:

  • {{ value }}
  • {{ element.name }}
  • {{ element.company }}
  • {{ element.email }}
  • {{ element.phone }}
  • {{ element.address }}
  • {{ element.address_2 }}
  • {{ element.city }}
  • {{ element.state_province }}
  • {{ element.postal_code }}
  • {{ element.country }}
  • {{ item.value }}
  • {{ item.raw }}
  • {{ item.list }}
  • {{ data.element_key }}
  • {{ data['element_key'] }}
  • {{ data.element_key.delta }}
  • {{ data['element_key']['delta'] }}
  • {{ data.composite_element_key.subelement_key }}
  • {{ data.composite_element_key.delta.subelement_key }}
  • {{ original_data }}
  • {{ elements }}
  • {{ elements_flattened }}
  • {{ serial }}
  • {{ sid }}
  • {{ uuid }}
  • {{ token }}
  • {{ uri }}
  • {{ created }}
  • {{ completed }}
  • {{ changed }}
  • {{ in_draft }}
  • {{ current_page }}
  • {{ remote_addr }}
  • {{ uid }}
  • {{ langcode }}
  • {{ webform_id }}
  • {{ entity_type }}
  • {{ entity_id }}
  • {{ locked }}
  • {{ sticky }}
  • {{ notes }}
  • {{ webform }}
  • {{ webform_submission }}

You can also output tokens using the webform_token() function.

{{ webform_token('[webform_submission:values:element_value]', webform_submission, [], options) }}

You can debug data using the webform_debug() function.

{{ webform_debug(data) }}
Multiple items
Select how multiple values are displayed.
The HTML to display for multiple element values. You may include HTML or Twig. You may enter data from the submission as per the "variables" below.
The text to display for multiple element values. You may include Twig. You may enter data from the submission as per the "variables" below.

Learn about Twig and how it is used in Drupal.

The following variables are available:

  • {{ value }}
  • {{ items }}
  • {{ data.element_key }}
  • {{ data['element_key'] }}
  • {{ data.element_key.delta }}
  • {{ data['element_key']['delta'] }}
  • {{ data.composite_element_key.subelement_key }}
  • {{ data.composite_element_key.delta.subelement_key }}
  • {{ original_data }}
  • {{ elements }}
  • {{ elements_flattened }}
  • {{ serial }}
  • {{ sid }}
  • {{ uuid }}
  • {{ token }}
  • {{ uri }}
  • {{ created }}
  • {{ completed }}
  • {{ changed }}
  • {{ in_draft }}
  • {{ current_page }}
  • {{ remote_addr }}
  • {{ uid }}
  • {{ langcode }}
  • {{ webform_id }}
  • {{ entity_type }}
  • {{ entity_id }}
  • {{ locked }}
  • {{ sticky }}
  • {{ notes }}
  • {{ webform }}
  • {{ webform_submission }}

You can also output tokens using the webform_token() function.

{{ webform_token('[webform_submission:values:element_value]', webform_submission, [], options) }}

You can debug data using the webform_debug() function.

{{ webform_debug(data) }}
Display CSS classes
Apply classes to the element's display wrapper. Select 'custom…' to enter custom classes.
Apply custom styles to the element's display wrapper.
Enter additional attributes to be added to the element's display wrapper.
The admin title will always be displayed when managing elements and viewing & downloading submissions.If an element's title is hidden, the element's admin title will be displayed when viewing a submission.
Admin notes/comments are display next to the element title in the form builder and visible in the form's YAML source
Private elements are shown only to users with results access.
Properties do not have to be prepended with a hash (#) character, the hash character will be automatically added to the custom properties.These properties and callbacks are not allowed: #allowed_tags, #tree, #array_parents, #parents, #weight, #access_callback, #ajax, #after_build, #element_validate, #lazy_builder, #post_render, #pre_render, #process, #submit, #validate, #value_callback, #file_value_callbacks, #date_date_callbacks, #date_time_callbacks, and #captcha_validateYou can set sub-element properties using a double underscore between the sub-element's key and sub-element's property (subelement__property). For example, you can add custom attributes or states (conditional logic) to the title sub-element using 'title__attributes' and 'title__states'.
Create submission
Select roles and users that should be able to populate this element when creating a new submission.
Roles
Select roles and users that should be able to update this element when updating an existing submission.
Roles
Select roles and users that should be able to view this element when viewing a submission.
Roles
If unchecked, the element is never displayed. The element will only be visible within the form builder and hidden from all other displays including submission details, results, and download.