Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Microsurvey

Microsurvey is used to request quick feedback from the learner about a specific feature or an experiment we’re trying out in an unobtrusive way. There is an option to dismiss the survey.

.m-microsurvey
  .a-content.a-content--tight
    .m-microsurvey__new-response
      %fieldset
        .m-microsurvey__group.m-microsurvey__group--question
          .m-microsurvey__header Question
          .m-microsurvey__icons
            .m-microsurvey__btn.m-microsurvey__btn--positive
              = render partial: "shared/svg_icons/sentiment_positive"
            .m-microsurvey__btn.m-microsurvey__btn--neutral
              = render partial: "shared/svg_icons/sentiment_neutral"
            .m-microsurvey__btn.m-microsurvey__btn--negative
              = render partial: "shared/svg_icons/sentiment_negative"
    .m-microsurvey__dismiss
      = render partial: "shared/svg_icons/cross"

It includes animated interactions to encourage the learner to engage with microsurvey. In the next step of the interaction we invite the learner to provide additional feedback:

.m-microsurvey
  .a-content.a-content--tight
    .m-microsurvey__edit-response
      %label.m-microsurvey__group.m-microsurvey__group--feedback
        .m-microsurvey__icons
          = render partial: "shared/svg_icons/sentiment_positive"
        .m-microsurvey__header
          Question
          %span.m-microsurvey__subheading Disclaimer
      %textarea.input
      %input.a-button{type: 'submit', value: 'Submit feedback'}

Finally, we thank the learner for their feedback.

.m-microsurvey
  .a-content.a-content--tight
    .m-microsurvey__group--thanks
      %p.m-microsurvey__header Thank you message