Images choices horizontal with a scrolling bar

Add the following Javascript to create a horizontal scrolling container (with a scrolling bar) to display all images on a single line in your form. You can add an HTML field to your form and then put the above script as its content or use a handy free Gravity Forms add-on like Gravity Forms Code Chest.

<script type="text/javascript">
(function($){

 function scrollableImageChoices( formId ) {
  var $fields = ( typeof formId !== 'undefined') ? $('#gform_' + formId + ' .image-choices-field') : $('form[id^="gform_"] .image-choices-field');
  if (!$fields.length) {
   return;
  }
  $fields.each(function(){
   var $field = $(this);
   var $fieldsWrap = $field.closest('.gform_fields');
   var $scroller = $field.find('.ginput_container');
   var $scrolling = $field.find('.ginput_container > .gfield_radio, .ginput_container > .gfield_checkbox');
   $field.width( $fieldsWrap.width() );
   $scroller.css('overflow-x', 'scroll').css('max-width', $fieldsWrap.width() + 'px');
   $scrolling.css('width', '');
   var totalWidth = 0;
   $scrolling.find('.image-choices-choice').each(function(){
    totalWidth += $(this).outerWidth(true);
   });
   $scrolling.width( totalWidth );
  });
 }

 var debounce;

 $(window).on('resize', function(e){
  clearTimeout(debounce);
  debounce = setTimeout(scrollableImageChoices, 100);
 });

 $(document).bind('gform_post_render', function(e, formId, currentFormPage){
  clearTimeout(debounce);
  var styles = [
   "display: -webkit-box",
   "display: -ms-flexbox",
   "display: flex",
   "-webkit-box-orient: horizontal",
   "-webkit-box-direction: normal",
   "-ms-flex-direction: row",
   "flex-direction: row",
   "-webkit-box-align: start",
   "-ms-flex-align: start",
   "align-items: flex-start",
   "-webkit-box-pack: start",
   "-ms-flex-pack: start",
   "justify-content: flex-start"
  ];
  $('head').append('<style type="text/css"> .image-choices-field .gfield_radio, .image-choices-field .gfield_checkbox { ' + styles.join("; ") + '; } </style>')
  debounce = setTimeout(function(){
   scrollableImageChoices( formId );
  }, 100);
 });

 if (window.gform && window.gform.addAction) {
  window.gform.addAction('gform_post_conditional_logic_field_action', function (formId, action, targetId, defaultValues, isInit) {
   clearTimeout(debounce);
   debounce = setTimeout(function(){
    scrollableImageChoices( formId );
   }, 100);
  });
 }

})(jQuery);
</script>

Bundle & Save

JetSloth