<form class="webform-submission-form webform-submission-add-form webform-submission-contact-form-form webform-submission-contact-form-add-form webform-submission-contact-form-xb_page-4-form webform-submission-contact-form-xb_page-4-add-form webform-submission-contact-form-xb-page-4-add-form js-webform-details-toggle webform-details-toggle" data-drupal-selector="webform-submission-contact-form-xb-page-4-add-form" action="/resources" method="post" id="webform-submission-contact-form-xb-page-4-add-form" accept-charset="UTF-8" data-once="webform-details-toggle form-updated" data-drupal-form-fields="edit-first-name,edit-last-name,edit-name,edit-email,edit-select-example,edit-telephone-example,edit-radiobutton-example-option-1,edit-radiobutton-example-option-2,edit-radiobutton-example-option-3,edit-checkbox-example-option-1,edit-checkbox-example-option-2,edit-checkbox-example-option-3,edit-message,edit-submit,edit-url">

  <fieldset data-drupal-selector="edit-flex-fieldset" id="edit-flex-fieldset" class="hg-flex-fieldset-2col js-webform-type-fieldset webform-type-fieldset js-form-item form-item js-form-wrapper form-wrapper">
    <legend>
      <span class="visually-hidden fieldset-legend">Flex fieldset</span>
    </legend>
    <div class="fieldset-wrapper">
      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-first-name form-item-first-name">
        <label for="edit-first-name">First name</label>
        <input autocomplete="off" data-drupal-selector="edit-first-name" type="text" id="edit-first-name" name="first_name" value="" size="60" maxlength="255" placeholder="Placeholder" class="form-text">
      </div>
      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-last-name form-item-last-name">
        <label for="edit-last-name">Last name</label>
        <input autocomplete="off" data-drupal-selector="edit-last-name" type="text" id="edit-last-name" name="last_name" value="" size="60" maxlength="255" placeholder="Placeholder text" class="form-text">
      </div>
    </div>
  </fieldset>

  <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-name form-item-name">
    <label for="edit-name" class="js-form-required form-required">Name</label>
    <input data-drupal-selector="edit-name" type="text" id="edit-name" name="name" value="" size="60" maxlength="255" class="form-text required" required="required">
  </div>

  <div class="js-form-item form-item js-form-type-email form-type-email js-form-item-email form-item-email">
    <label for="edit-email" class="js-form-required form-required">Email</label>
    <input data-drupal-selector="edit-email" type="email" id="edit-email" name="email" value="" size="60" maxlength="254" class="form-email required" required="required">
  </div>

  <div class="webform-element-help-container--title webform-element-help-container--title-after js-form-item form-item js-form-type-select form-type-select js-form-item-select-example form-item-select-example">
    <label for="edit-select-example">
      Select example
      {# <span class="webform-element-help js-webform-element-help" role="tooltip" tabindex="0" aria-label="This is help title" data-webform-help="<div class="webform-element-help--title">This is help title</div><div class="webform-element-help--content">This is help text block</div>" data-once="webform-element-help" aria-expanded="false">
        <span aria-hidden="true">?</span>
      </span> #}
    </label>
    <select data-drupal-selector="edit-select-example" aria-describedby="edit-select-example--description" id="edit-select-example" name="select_example" class="form-select">
      <option value="" selected="">- None -</option>
      <option value="option_1">Select Option One</option>
      <option value="option_2">Select Option Two</option>
      <option value="option_3">Select Option Three</option>
    </select>
    <div class="description">
      <div id="edit-select-example--description" class="webform-element-description">This is the description text</div>
      {# <div id="edit-select-example--more" class="js-webform-element-more webform-element-more" data-once="webform-element-more">
        <div class="webform-element-more--link">
          <a role="button" href="#edit-select-example--more--content" aria-expanded="false" aria-controls="edit-select-example--more--content">This is more title</a>
        </div>
        <div id="edit-select-example--more--content" class="webform-element-more--content">This is more text</div>
      </div> #}
    </div>
  </div>

  <div class="js-form-item form-item js-form-type-tel form-type-tel js-form-item-telephone-example form-item-telephone-example">
    <label for="edit-telephone-example">Telephone example</label>
    <input data-drupal-selector="edit-telephone-example" type="tel" id="edit-telephone-example" name="telephone_example" value="" size="30" maxlength="128" class="form-tel">
  </div>

  <fieldset data-drupal-selector="edit-radiobutton-example" aria-describedby="edit-radiobutton-example--wrapper--description" id="edit-radiobutton-example--wrapper" class="radios--wrapper fieldgroup form-composite webform-composite-visible-title webform-element-help-container--title webform-element-help-container--title-after js-webform-type-radios webform-type-radios js-form-item form-item js-form-wrapper form-wrapper" data-once="webform-radios-required">
    <legend id="edit-radiobutton-example--wrapper-legend">
      <span class="fieldset-legend">
        Radiobutton example
        {# <span class="webform-element-help js-webform-element-help" role="tooltip" tabindex="0" aria-label="help title" data-webform-help="<div class="webform-element-help--title">help title</div><div class="webform-element-help--content">help text</div>" data-once="webform-element-help" aria-expanded="false">
          <span aria-hidden="true">?</span>
        </span> #}
      </span>
    </legend>
    <div class="fieldset-wrapper">
      <div id="edit-radiobutton-example" class="js-webform-radios webform-options-display-one-column form-radios">
        <div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-radiobutton-example form-item-radiobutton-example">
          <input data-drupal-selector="edit-radiobutton-example-option-1" aria-describedby="edit-radiobutton-example--wrapper--description" type="radio" id="edit-radiobutton-example-option-1" name="radiobutton_example" value="option_1" class="form-radio">
          <label for="edit-radiobutton-example-option-1" class="option">Option One</label>
        </div>
        <div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-radiobutton-example form-item-radiobutton-example">
          <input data-drupal-selector="edit-radiobutton-example-option-2" aria-describedby="edit-radiobutton-example--wrapper--description" type="radio" id="edit-radiobutton-example-option-2" name="radiobutton_example" value="option_2" class="form-radio">
          <label for="edit-radiobutton-example-option-2" class="option">Option Two</label>
        </div>
        <div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-radiobutton-example form-item-radiobutton-example">
          <input data-drupal-selector="edit-radiobutton-example-option-3" aria-describedby="edit-radiobutton-example-option-3--description" type="radio" id="edit-radiobutton-example-option-3" name="radiobutton_example" value="option_3" class="form-radio">
          <label for="edit-radiobutton-example-option-3" class="option">Option Three</label>
          {# <div class="description">
            <div id="edit-radiobutton-example-option-3--description" class="webform-element-description">Description placeholder</div>
          </div> #}
        </div>
      </div>
      {# <div class="description">
        <div id="edit-radiobutton-example--wrapper--description" data-drupal-field-elements="description" class="webform-element-description">the description</div>
        <div id="edit-radiobutton-example--more" class="js-webform-element-more webform-element-more" data-once="webform-element-more">
          <div class="webform-element-more--link">
            <a role="button" href="#edit-radiobutton-example--more--content" aria-expanded="false" aria-controls="edit-radiobutton-example--more--content">more title</a>
          </div>
          <div id="edit-radiobutton-example--more--content" class="webform-element-more--content">more text</div>
        </div>
      </div> #}
    </div>
  </fieldset>

  <fieldset data-drupal-selector="edit-checkbox-example" aria-describedby="edit-checkbox-example--wrapper--description" id="edit-checkbox-example--wrapper" class="checkboxes--wrapper fieldgroup form-composite webform-composite-visible-title webform-element-help-container--title webform-element-help-container--title-after js-webform-type-checkboxes webform-type-checkboxes js-form-item form-item js-form-wrapper form-wrapper">
    <legend>
      <span class="fieldset-legend">
        Checkbox example
        {# <span class="webform-element-help js-webform-element-help" role="tooltip" tabindex="0" aria-label="help text title" data-webform-help="<div class="webform-element-help--title">help text title</div><div class="webform-element-help--content">the help text</div>" data-once="webform-element-help" aria-expanded="false">
          <span aria-hidden="true">?</span>
        </span> #}
      </span>
    </legend>
    <div class="fieldset-wrapper">
      <div id="edit-checkbox-example" class="js-webform-checkboxes webform-options-display-one-column form-checkboxes">
        <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-example-option-1 form-item-checkbox-example-option-1">
          <input data-drupal-selector="edit-checkbox-example-option-1" aria-describedby="edit-checkbox-example-option-1--description" type="checkbox" id="edit-checkbox-example-option-1" name="checkbox_example[option_1]" value="option_1" class="form-checkbox">
          <label for="edit-checkbox-example-option-1" class="option">Option One</label>
        </div>
        <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-example-option-2 form-item-checkbox-example-option-2">
          <input data-drupal-selector="edit-checkbox-example-option-2" aria-describedby="edit-checkbox-example-option-2--description" type="checkbox" id="edit-checkbox-example-option-2" name="checkbox_example[option_2]" value="option_2" class="form-checkbox">
          <label for="edit-checkbox-example-option-2" class="option">Option Two</label>
        </div>
        <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-example-option-3 form-item-checkbox-example-option-3">
          <input data-drupal-selector="edit-checkbox-example-option-3" aria-describedby="edit-checkbox-example--wrapper--description" type="checkbox" id="edit-checkbox-example-option-3" name="checkbox_example[option_3]" value="option_3" class="form-checkbox">
          <label for="edit-checkbox-example-option-3" class="option">Option Three</label>
        </div>
      </div>
      {# <div class="description">
        <div id="edit-checkbox-example--wrapper--description" data-drupal-field-elements="description" class="webform-element-description">the description</div>
        <div id="edit-checkbox-example--more" class="js-webform-element-more webform-element-more" data-once="webform-element-more">
          <div class="webform-element-more--link">
            <a role="button" href="#edit-checkbox-example--more--content" aria-expanded="false" aria-controls="edit-checkbox-example--more--content">the more title</a>
          </div>
          <div id="edit-checkbox-example--more--content" class="webform-element-more--content">and more text</div>
        </div>
      </div> #}
    </div>
  </fieldset>

  <div class="js-form-item form-item js-form-type-textarea form-type-textarea js-form-item-message form-item-message">
    <label for="edit-message" class="js-form-required form-required">Message</label>
    <div class="form-textarea-wrapper">
      <textarea data-drupal-selector="edit-message" id="edit-message" name="message" rows="5" cols="60" class="form-textarea required resize-vertical" required="required"></textarea>
    </div>
  </div>

  {# <fieldset data-drupal-selector="edit-captcha" class="captcha captcha-type-challenge--captcha" data-nosnippet="">
    <legend class="captcha__title js-form-required form-required">
      CAPTCHA
    </legend>
    <div class="captcha__element">
      <input data-drupal-selector="edit-captcha-sid" type="hidden" name="captcha_sid" value="17">
      <input data-drupal-selector="edit-captcha-token" type="hidden" name="captcha_token" value="3QVa_v-xJJRGnyGT8U6RZ1Cbe0mDRoSzclglQKrQqVk">
      <input data-drupal-selector="edit-captcha-response" type="hidden" name="captcha_response" value="Friendly Captcha no captcha">
      <div class="frc-captcha" data-sitekey="${site_uuid}" data-lang="en" data-puzzle-endpoint="https://drupal-cms-dev.ddev.site/api/v1/puzzle" data-attached="1">
        <div class="frc-container">
          <svg class="frc-icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
            <path d="M17,11c0.34,0,0.67,0.04,1,0.09V6.27L10.5,3L3,6.27v4.91c0,4.54,3.2,8.79,7.5,9.82c0.55-0.13,1.08-0.32,1.6-0.55 C11.41,19.47,11,18.28,11,17C11,13.69,13.69,11,17,11z"></path>
            <path d="M17,13c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4C21,14.79,19.21,13,17,13z M17,14.38"></path>
          </svg>
          <div class="frc-content">
            <span class="frc-text">Anti-Robot Verification</span>
            <button type="button" class="frc-button">Click to start verification</button>
          </div>
        </div>
        <span class="frc-banner">
          <a lang="en" href="#" rel="noopener" target="_blank">
            <b>Friendly</b>Captcha ⇗
          </a>
        </span>
        <input name="frc-captcha-solution" class="frc-captcha-solution" type="hidden" value="null">
      </div>
      <noscript>You need Javascript for CAPTCHA verification to submit this form.</noscript>
      <input data-drupal-selector="edit-captcha-cacheable" type="hidden" name="captcha_cacheable" value="1">
    </div>
    <div class="captcha__description description">This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.</div>
  </fieldset> #}

  <input autocomplete="off" data-drupal-selector="form-12" type="hidden" name="form_build_id" value="form-123">
  <input data-drupal-selector="edit-webform-submission-contact-form-xb-page-4-add-form" type="hidden" name="form_id" value="webform_submission_contact_form_xb_page_4_add_form">

  <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
    <input class="webform-button--submit button button--primary js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Submit">
  </div>

  <div class="url-textfield js-form-wrapper form-wrapper" style="display: none !important;">
    <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-url form-item-url">
      <label for="edit-url">Leave this field blank</label>
      <input autocomplete="off" data-drupal-selector="edit-url" type="text" id="edit-url" name="url" value="" size="20" maxlength="128" class="form-text">
    </div>
  </div>

</form>