Code Samples
      Back to home
      1. Help Center
      2. Developers
      3. Code Samples

      Example Survey Modal

      The following is a code snippet for a survey modal that overlays the page.

      <style>
          .ss-tcmodal {
          position: fixed;
          left: 0;
          top: 0;
          bottom: 0;
          width: 100%;
          overflow: auto;
          background-color: rgb(0,0,0);
          background-color: rgba(0,0,0,0.4);
          z-index: 1001;
          }
          .ss-tcmmodal-content {
          margin: auto;
          padding: 0px 0px;
          border: 1px solid #888;
          max-width: 750px;
          max-height: 600px;
          z-index: 1002;
          position: fixed;
          left: 50%;
          margin-left: -320px;
          top: 50%;
          margin-top: -250px;
          text-align: center;
          background-color: white;
          }
          .ss-tcmclose {
          color: #cfcfcf;
          float: right;
          font-size: 38px;
          line-height: 38px;
          font-weight: bold;
          position: absolute;
          top: 0px;
          right: 20px;
          }
          .ss-tcmclose:hover,
          .ss-tcmclose:focus {
          text-decoration: none;
          cursor: pointer;
          }
          .menu--tier-one li.menu--tier-one-category--expand {
          width: 30px !important;
          }
      </style>
      <script>
          window.jQuery( document ).ready(function() {
              window.jQuery('.ss-tcmclose').on('click', function() { window.jQuery('.ss-tcmodal, .ss-tcmmodal-content').hide(); });
          });    
          (function(){
          var date, expires;
          var days = 30;
          date = new Date();
          date.setTime(date.getTime()+(days*24*60*60*1000));
          expires = "; expires="+date.toGMTString();
          document.cookie="ss-modal=1;"+expires+"; path=/";
          })();
      </script>
      <!-- The Modal -->
      <div class="ss-tcmodal"></div>
      <div class="ss-tcmmodal-content">
        <span class="ss-tcmclose">&times;</span>
        <iframe width="640px" height="480px" src="https://forms.office.com/r/UbvvHFaM0P?embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>
      </div>
      </body>

       

      Notes:

      • Use </body> as a trigger
      • Consider URL, personalisation and other triggers to appropriately target the correct users and pages across your site
      • Use </body> as your insertion point in the Find this field
      • Update the iframe / src within the code to use your chosen form provider
      • Update styling, content and questions as desired from your chosen form provider e.g. Microsoft Forms, Google Forms, Jotform, Typeform, Survey Monkey etc.