Supplement Awards Portal

Settings for the Supplement Awards Voting Portal built on wordpress. The voting form used Gravity forms with a host of other plugins

WORDPRESSForms > 20## Supp Awards > Edit Settings > Edit Choices

Gravity Forms Input Value

Code for the values in the collapsible section. This allows the user to click on an image which represents a value.

Section Choices

The choices section represent the users options to select on the voting form. The values are represented by images and the user can click on the image to select the value.

Name
Image Size
Type
Image
Description
Images used on the voting platform need to be a small file size to reduce the bandwidth load on flywheel.
Recommended image dimensions: 400px by 400px

Image aspect ration doesn't matter so much

Example Product Image

Example Logo Image

<div class="radio-selector">
  <img src="https://awards.nutritionwarehouse.com.au/wp-content/uploads/2022/05/EHPLABS_CMYK_noword.png" alt="Brand Logo" width="150" height="50" loading="lazy" />
  <span>EHP Labs<span>
</div>

Preview

WORDPRESSCustom Codes > FORM JS

Gravity Forms Input Value

JQUERY Codes to close a collapsible section when user clicks an option.

Trigger section collapse on user selection

(function($){
  // update this value as needed
  var scrollOffset = 135;
  $(document).bind('gform_post_render', function(e, formId, currentFormPage) {
    var $form = $('#gform_' + formId);
    if ( $form.hasClass('auto-advance') && !$form.hasClass('auto-advance-init') ) {
      $form.find('.gsection').not(':first').each(function(){
        var $section = $(this);
        $section.addClass('inactive');
        if ( $section.hasClass('collapsible-sections-field') ) {
          $section.next('.collapsible-sections-collapsible-body').addClass('inactive');
        }
        else {
          $section.nextUntil('.gsection').addClass('inactive');
        }
      });
      $form.find('.gform_footer input:submit, .gform_footer button');/* .addClass('inactive').prop('disabled', true); */
      var firstRun = true;
      $form.find('input:radio').on('change', function(e){
        var $input = $(this);
        if ( $input.is(':checked') ) {
          var $field = $input.closest('.gfield');
          var $nextSection;
          var nextSectionScrollDelay = 10;
          if ( $field.closest('.collapsible-sections-collapsible-body').length ) {
            $nextSection = $field.closest('.collapsible-sections-collapsible-body').nextAll('.gsection').first();
          }
          else {
            $nextSection = $field.nextAll('.gsection').first();
          }
          if ( $nextSection.length ) {
            $nextSection.removeClass('inactive');
            if ( $nextSection.hasClass('collapsible-sections-field') ) {
              $nextSection.next('.collapsible-sections-collapsible-body').removeClass('inactive');
              nextSectionScrollDelay = 500;
              if ( !firstRun ) {
                $nextSection.trigger('click');
              }
            }
            else {
              $nextSection.nextUntil('.gsection').removeClass('inactive');
            }
            if ( !firstRun ) {
              setTimeout(function(){
                var targetTop = $nextSection.offset().top - scrollOffset;
                $('html,body').animate({ scrollTop: targetTop }, 300);      
              }, nextSectionScrollDelay);
            }
            if ( !$nextSection.nextAll('.gsection').length ) {
              
            }
          }
        }
      }).trigger('change');
      $form.addClass('auto-advance-init');
      setTimeout(function(){
        firstRun = false;
      }, 500);
      $(".nwhNextBtn").on("click", function(e) {
        const $this = this;
        console.log(`#${$this.parentElement.parentElement.id}`);
        $(`#${$this.parentElement.parentElement.id}`).next().click();
        console.log($form)
        $form.find('.gform_footer input:submit, .gform_footer button').removeClass('inactive').prop('disabled', false);
      });
    }
  });
})(jQuery);