Skip to main content

This is a new service - your feedback will help us to improve it.

Feedback loop


About

What does it do?

  • Collects user feedback to allow measure user satisfaction, effectiveness of the page both in-terms of content and usability and capture bugs.

When to use it?

  • Every page must have feedback loop.
  • It must be placed directly above the footer.



Component example

Help us improve West Midlands NetworkClose





How would you...?

Select all options that apply


HTML Markup

<div class="wmcads-feedback-loop">
  <div class="wmcads-container wmcads-feedback-loop__questions">
    <div class="wmcads-feedback-loop__useful">
      Is this page useful?

      <a href="#" title="link title" target="_self" class="wmcads-link wmcads-m-l-sm">Yes</a>
      <a href="#" title="link title" target="_self" class="wmcads-link wmcads-m-l-sm">No</a>
    </div>
    <div class="wmcads-feedback-loop__wrong">
      <a href="#" title="link title" target="_self" class="wmcads-link">Is there anything wrong with this page?</a>
    </div>
  </div>

  <form class="wmcads-container wmcads-feedback-loop__form wmcads-grid">
    <div class="wmcads-grid wmcads-grid--align-center wmcads-grid--justify-between">
      <legend class="wmcads-col-auto wmcads-m-none">Help us improve West Midlands Network</legend>
      <a  href="#" class="wmcads-link wmcads-col-auto wmcads-m-l-md">Close</a>
    </div>
    <br>
    <div class="wmcads-col-1 wmcads-col-md-1-2">
      <div class="wmcads-fe-group">
      <label class="wmcads-fe-label" for="fb-textarea">Textarea label</label>
      <textarea  class="wmcads-fe-textarea" id="fb-textarea" name="fb-textarea" rows="3"></textarea>
    </div>

    </div>
    <br><br>
    <div class="wmcads-col-1 wmcads-col-md-1-3">
      <div class="wmcads-fe-group">
      <label class="wmcads-fe-label" for="fb-input">Input label</label>
      <input class="wmcads-fe-input" id="fb-input" name="fb-input" type="text"/>
    </div>

    </div>
    <br><br>
    <div class="wmcads-col-1">
      <div class="wmcads-fe-group">
      <fieldset class="wmcads-fe-fieldset">
        <legend class="wmcads-fe-fieldset__legend">
          <h3 class="wmcads-fe-question">
            How would you...?
          </h3>
        </legend>
        <div class="wmcads-fe-checkboxes">
          <span class="wmcads-fe-checkboxes__desc">
            Select all options that apply
          </span>
          <label class="wmcads-fe-checkboxes__container">
            Option 1
            <input class="wmcads-fe-checkboxes__input" value="Option 1" checked="checked" type="checkbox"/>
            <span class="wmcads-fe-checkboxes__checkmark">
              <svg class="wmcads-fe-checkboxes__icon">
              <use xlink:href="#wmcads-general-checkmark" href="#wmcads-general-checkmark"></use>
            </svg>
            </span>
          </label>
          <label class="wmcads-fe-checkboxes__container">
            Option 2
            <input class="wmcads-fe-checkboxes__input" value="Option 2" type="checkbox"/>
            <span class="wmcads-fe-checkboxes__checkmark">
              <svg class="wmcads-fe-checkboxes__icon">
              <use xlink:href="#wmcads-general-checkmark" href="#wmcads-general-checkmark"></use>
            </svg>
            </span>
          </label>
          <label class="wmcads-fe-checkboxes__container">
            Option 3
            <input class="wmcads-fe-checkboxes__input" value="Option 3" type="checkbox"/>
            <span class="wmcads-fe-checkboxes__checkmark">
              <svg class="wmcads-fe-checkboxes__icon">
              <use xlink:href="#wmcads-general-checkmark" href="#wmcads-general-checkmark"></use>
            </svg>
            </span>
          </label>
        </div>
      </fieldset>
    </div>

    </div>
    <br><br>
    <button class="wmcads-btn wmcads-btn" >
        Submit feedback
    </button>

  </form>
</div>



Open

Component example

Help us improve West Midlands NetworkClose





How would you...?

Select all options that apply


HTML Markup

<div class="wmcads-feedback-loop wmcads-is-open">
  <div class="wmcads-container wmcads-feedback-loop__questions">
    <div class="wmcads-feedback-loop__useful">
      Is this page useful?

      <a href="#" title="link title" target="_self" class="wmcads-link wmcads-m-l-sm">Yes</a>
      <a href="#" title="link title" target="_self" class="wmcads-link wmcads-m-l-sm">No</a>
    </div>
    <div class="wmcads-feedback-loop__wrong">
      <a href="#" title="link title" target="_self" class="wmcads-link">Is there anything wrong with this page?</a>
    </div>
  </div>

  <form class="wmcads-container wmcads-feedback-loop__form wmcads-grid">
    <div class="wmcads-grid wmcads-grid--align-center wmcads-grid--justify-between">
      <legend class="wmcads-col-auto wmcads-m-none">Help us improve West Midlands Network</legend>
      <a  href="#" class="wmcads-link wmcads-col-auto wmcads-m-l-md">Close</a>
    </div>
    <br>
    <div class="wmcads-col-1 wmcads-col-md-1-2">
      <div class="wmcads-fe-group">
      <label class="wmcads-fe-label" for="fb-open-textarea">Textarea label</label>
      <textarea  class="wmcads-fe-textarea" id="fb-open-textarea" name="fb-open-textarea" rows="3"></textarea>
    </div>

    </div>
    <br><br>
    <div class="wmcads-col-1 wmcads-col-md-1-3">
      <div class="wmcads-fe-group">
      <label class="wmcads-fe-label" for="fb-open-input">Input label</label>
      <input class="wmcads-fe-input" id="fb-open-input" name="fb-open-input" type="text"/>
    </div>

    </div>
    <br><br>
    <div class="wmcads-col-1">
      <div class="wmcads-fe-group">
      <fieldset class="wmcads-fe-fieldset">
        <legend class="wmcads-fe-fieldset__legend">
          <h3 class="wmcads-fe-question">
            How would you...?
          </h3>
        </legend>
        <div class="wmcads-fe-checkboxes">
          <span class="wmcads-fe-checkboxes__desc">
            Select all options that apply
          </span>
          <label class="wmcads-fe-checkboxes__container">
            Option 1
            <input class="wmcads-fe-checkboxes__input" value="Option 1" checked="checked" type="checkbox"/>
            <span class="wmcads-fe-checkboxes__checkmark">
              <svg class="wmcads-fe-checkboxes__icon">
              <use xlink:href="#wmcads-general-checkmark" href="#wmcads-general-checkmark"></use>
            </svg>
            </span>
          </label>
          <label class="wmcads-fe-checkboxes__container">
            Option 2
            <input class="wmcads-fe-checkboxes__input" value="Option 2" type="checkbox"/>
            <span class="wmcads-fe-checkboxes__checkmark">
              <svg class="wmcads-fe-checkboxes__icon">
              <use xlink:href="#wmcads-general-checkmark" href="#wmcads-general-checkmark"></use>
            </svg>
            </span>
          </label>
          <label class="wmcads-fe-checkboxes__container">
            Option 3
            <input class="wmcads-fe-checkboxes__input" value="Option 3" type="checkbox"/>
            <span class="wmcads-fe-checkboxes__checkmark">
              <svg class="wmcads-fe-checkboxes__icon">
              <use xlink:href="#wmcads-general-checkmark" href="#wmcads-general-checkmark"></use>
            </svg>
            </span>
          </label>
        </div>
      </fieldset>
    </div>

    </div>
    <br><br>
    <button class="wmcads-btn wmcads-btn" >
        Submit feedback
    </button>

  </form>
</div>