If you have come to this page directly, please start with the Overview page for some important information.

To make your form responsive, open the DataPage in edit mode and go your forms field configuration screen. If the form doesn’t currently have a header/footer, insert them into your form, otherwise the code goes at the bottom of the current content of your header/footer.

The HTML Editor (WYSIWYG toolbar) should not be enabled. If it is enabled, go to the Advanced tab of the header/footer and disable it. If the Advanced tab is not visible, go to the beginning steps of your DataPage and enable Advanced options.

Copy the code below and paste it into the header:

<!-- Responsive Code Begin -->
<style>
/* Change max-width to what size you want the form to change at */
@media (max-width: 768px) {
  * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  }

  #datapage-form table { width: 100% !important; margin: 0px !important; }
  #datapage-form td { display: block; }

  #datapage-form input, 
  #datapage-form select,
  #datapage-form textarea { width: 100% !important; }

  #datapage-form input[type=radio],  #datapage-form input[type=checkbox] {
    width: auto !important;
  }

  #datapage-form img[alt~="Calendar"] {
    position: relative; left: -19px; top: 4px;
  }

  #datapage-form img[alt~="Audio"] {
    position: relative; left: -19px; top: 4px;
  }

  #datapage-form img[alt~="Download"] {
    position: relative; left: -46px; top: 4px;
  }  

  #datapage-form input + span > a {
    display: inline-block;
    width: 1px;
    overflow: visible;
    position: relative;
    left: -8px;
  }

  #datapage-form input + a[href="#"],
  #datapage-form input + a[href="#"] + a {
    display: inline-block;
    width: 1px;
    overflow: visible;
    position: relative;
    left: -8px;
  }
}
</style>
<div id="datapage-form">
<!-- Responsive Code End -->

 

Copy the code below and paste it into the footer:

<!-- Responsive Code Begin -->
</div>
<!-- Responsive Code End -->