on_page_feedback:
  label: On Page Feedback Form
  namespace: Organisms/TM - On Page Feedback
  use: '@organisms/tm-opf/on-page-feedback.twig'
  description: On Page Feedback Form
  libraries:
    - on_page_feedback_lib:
        css:
          component:
            ../styles/on-page-feedback.css: {weight: 10}

  fields:
    form:
      type: string
      label: Form
      preview: |
        <form class="webform-submission-form webform-submission-add-form webform-submission-on-page-feedback-form webform-submission-on-page-feedback-add-form js-webform-submit-once js-webform-details-toggle webform-details-toggle form_google_analytics_tracking" data-drupal-selector="webform-submission-on-page-feedback-add-form-5-qkqn75ko0" action="/ajax/on-page-feedback/330192/800689" method="post" id="webform-submission-on-page-feedback-add-form--5_qkQN75kO0" accept-charset="UTF-8" style="" data-once="cvJqueryValidate form-updated" novalidate="novalidate" data-drupal-form-fields="edit-was-this-page-helpful-yes--ZJ7WOPHjOkM,edit-was-this-page-helpful-no--Yn89zqJL8ow,edit-can-you-tell-us-more--Cz17hCpCUtI,edit-submit--52Z7ZvklgRQ,edit-url--hSekBVWZ7ik">                        <div class="alert alert-danger">
                        <h2 class="h3 msgh">
                              <i class="fas fa-times-circle"></i>
                                        Error message
                          </h2>
                    <div class="msgc">
                              <ul class="uln ulp">
                  <li class="lin">Is this page helpful field is required.</li>
                </ul>
                        </div>
          </div>                <div class="on-page-feedback-form-wrapper">                <fieldset data-drupal-selector="edit-was-this-page-helpful" data-msg-required="Was this page helpful field is required." id="edit-was-this-page-helpful--kSxxcpjUN7U--wrapper" class="radios--wrapper fieldgroup form-composite webform-composite-visible-title required error js-webform-type-radios webform-type-radios js-form-wrapper" aria-invalid="true" data-once="webform-radios-required">
          <legend id="edit-was-this-page-helpful--kSxxcpjUN7U--wrapper-legend">
            <span class="fieldset-legend legend-title js-form-required form-required">
                    Is this page helpful?    </span>
          </legend>          <div class="fieldset-wrapper">                <div id="edit-was-this-page-helpful--kSxxcpjUN7U" class="js-webform-radios webform-options-display-side-by-side form-radios">                <div class="form-group js-form-item js-form-type-radio js-form-item-was-this-page-helpful">                <input data-drupal-selector="edit-was-this-page-helpful-yes-zj7wophjokm" type="radio" id="edit-was-this-page-helpful-yes--ZJ7WOPHjOkM" name="was_this_page_helpful" value="Yes" class="form-radio error" aria-invalid="true" required="required" data-msg-required="Was this page helpful field is required.">                        <label for="edit-was-this-page-helpful-yes--ZJ7WOPHjOkM" class="option">
            Yes</label>
                </div>                        <div class="form-group js-form-item js-form-type-radio js-form-item-was-this-page-helpful">                <input data-drupal-selector="edit-was-this-page-helpful-no-yn89zqjl8ow" type="radio" id="edit-was-this-page-helpful-no--Yn89zqJL8ow" name="was_this_page_helpful" value="No" class="form-radio error" aria-invalid="true" required="required" data-msg-required="Was this page helpful field is required.">                        <label for="edit-was-this-page-helpful-no--Yn89zqJL8ow" class="option">
            No</label>
                </div>                </div>                  </div>
        </fieldset>                  <div class="can_you_tell_us_more_container js-form-wrapper form-wrapper" data-drupal-selector="edit-can-you-tell-us-more-container" id="edit-can-you-tell-us-more-container--JC-gFNLpMck">                <div class="js-webform-states-hidden form-group js-form-item js-form-type-textarea js-form-item-can-you-tell-us-more">                <label for="edit-can-you-tell-us-more--Cz17hCpCUtI">
            Can you tell us more?</label>
                        <textarea data-drupal-selector="edit-can-you-tell-us-more" data-drupal-states="{&quot;visible&quot;:{&quot;.webform-submission-on-page-feedback-add-form :input[name=\u0022was_this_page_helpful\u0022]&quot;:{&quot;value&quot;:&quot;No&quot;}}}" id="edit-can-you-tell-us-more--Cz17hCpCUtI" name="can_you_tell_us_more" rows="5" cols="60" class="form-textarea form-control" data-once="states"></textarea>                </div>                  </div>                        <input class="webform-browserinfo form-control" value="url: http://www-d10.westmidlandsrailway.local/tickets-discounts/ticket-types/off-peak-train-tickets
        userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36
        language: en-GB
        windowSize: 1858x959
        screenSize: 1920x1080
        jsEnabled: true
        cookiesEnabled: true
        " data-drupal-selector="edit-browser-info" type="hidden" name="browser_info" data-once="webform-browserinfo">                        <input data-drupal-selector="edit-nid" type="hidden" name="nid" value="330192" class="form-control">                        <input data-drupal-selector="edit-vid" type="hidden" name="vid" value="800689" class="form-control">                        <input data-drupal-selector="edit-admin-response" type="hidden" name="admin_response" value="" class="form-control">                        <input data-drupal-selector="edit-acknowledged" type="hidden" name="acknowledged" value="" class="form-control">                        <input data-drupal-selector="edit-honeypot-time" type="hidden" name="honeypot_time" value="WOvvkm-LzgCzcscQRbUfxI3pqe9QKFFW-U3SdAKehiU" class="form-control">                        <input autocomplete="off" data-drupal-selector="form-zcai2tchrwbd3o4fer6dtyo2rn6nqsyarfptzqj0qg4" type="hidden" name="form_build_id" value="form-zcaI2TcHRwbd3o4feR6Dtyo2RN6NQsyarFPtzqJ0Qg4" class="form-control">                        <input data-drupal-selector="edit-webform-submission-on-page-feedback-add-form-j2da9fwlyqu" type="hidden" name="form_id" value="webform_submission_on_page_feedback_add_form" class="form-control">                  <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions--NMr_5aUJoWY">                        <button class="webform-button--submit button button--primary js-form-submit form-submit btn btn-default btn-md" data-drupal-selector="edit-submit" data-disable-refocus="true" type="submit" id="edit-submit--52Z7ZvklgRQ" name="op" value="Submit" data-once="drupal-ajax">
            Submit
          </button>                </div>                  </div>                  <div class="url-textfield js-form-wrapper form-wrapper" style="display: none !important;">                <div class="form-group js-form-item js-form-type-textfield js-form-item-url">                <label for="edit-url--hSekBVWZ7ik">
            Leave this field blank</label>
                        <input autocomplete="off" data-drupal-selector="edit-url" data-msg-maxlength="Leave this field blank field has a maximum length of 128." type="text" id="edit-url--hSekBVWZ7ik" name="url" value="" size="20" maxlength="128" class="form-text form-control">                </div>                  </div>                        </form>
