react-drupal-webform demos

Hello ! This website showcases a few example Webforms built using the react-drupal-webform package. The forms displayed here are for demonstration purposes only and don't perform any real submission or send data to a backend.

 

The interactive preview shows how the form is rendered in a real application, while the YAML view exposes the raw data used to generate that form.

 

After submitting the form, the submitted data is displayed in a preview below the form to illustrate how the values can be accessed and handled in a real-world scenario.

 

You can find the documentation, installation instructions, and usage examples here

Webform preview

Please refer to the help section below.

This field have a placeholder.

Details

This content is rendered using a Webform Basic HTML element and is displayed inside a layout section.

400 characters maximum.

This is the end of the layout.

Your favorite fruit ?

Description Description Description Description Description 

Select your favorites hobbies

YAML

type_a_random_word:
  '#type': textfield
  '#title': 'Type a random word'
  '#description': '<p>Please refer to the help section below.</p>'
  '#help': '<p>This field must container between 2 and 20 characters.</p>'
  '#more_title': 'More title'
  '#more': '<p>More text displayed for this field.</p>'
  '#minlength': 2
  '#maxlength': 20
  '#required': true
  '#required_error': 'The field is required. '
  '#default_value': 'test default value'
type_a_test_email:
  '#type': email
  '#title': 'Type a test email'
  '#description': '<p>This field have a placeholder.</p>'
  '#minlength': 4
  '#maxlength': 20
  '#placeholder': 'For exemple "test@gmail.com"'
enter_a_random_number:
  '#type': number
  '#title': 'Enter a random number'
layout:
  '#type': container
  '#title': Details
  markup:
    '#type': webform_markup
    '#markup': '<p>This content is rendered using a Webform Basic HTML element and is displayed inside a layout section.</p>'
  i_like_the_blue_color:
    '#type': checkbox
    '#title': 'I like the blue color '
    '#help_title': 'help title'
    '#help': '<p>help text</p>'
  how_was_your_day:
    '#type': textarea
    '#title': 'How was your day?'
    '#description': '<p>400 characters maximum.</p>'
    '#minlength': 20
    '#maxlength': 400
    '#size': 4
  fake_phone_number:
    '#type': tel
    '#title': 'Fake phone number'
  markup_01:
    '#type': webform_markup
    '#markup': '<p>This is the end of the layout.</p>'
select_your_favorite_country:
  '#type': select
  '#title': 'Select your favorite country'
  '#options':
    Brazil: Brazil
    USA: USA
    Japan: Japan
  '#empty_option': 'Empty option label'
  '#empty_value': 'Empty optien value'
  '#required': true
  '#required_error': "it's required"
your_favorite_fruit:
  '#type': radios
  '#title': 'Your favorite fruit ? '
  '#description': '<p>Description Description Description Description Description&nbsp;</p>'
  '#options':
    Mango: Mango
    Watermelon: Watermelon
    Apple: Apple
  '#required': true
select_your_favorites_hobbies:
  '#type': checkboxes
  '#title': 'Select your favorites hobbies'
  '#options':
    'Reading ': 'Reading '
    Traveling: Traveling
    Sport: Sport
  '#required': true
  '#required_error': 'required message here'
  '#default_value':
    - bhb
actions:
  '#type': webform_actions
  '#title': 'Submit button(s)'
  '#submit__label': 'Submit Button'