Bis powermail 1.x konnte man bei mehrseitigen Formularen immer relativ einfach einen „Weiter“- und „Zurück“-Button einblenden, um zwischen den einzelnen Schritten (Step-by-Step) umschalten zu können.

Ab powermail 2.x wurde dieses Feature durch ein Tab-Menü im oberen Bereich des Formulars ersetzt. Dies ist zwar keine schlechte Idee, im Sinne der Bedienbarkeit (Usability) wäre es allerdings sehr nützlich, wenn weiterhin auch die Buttons angeboten werden. Das Tab-Menü ist sehr leicht zu übersehen, so das eilige Nutzer („the urgent user“) nicht wissen, wie sie im Formular weiterkommen. Dies dürfte dann natürlich die Konversionsrate erheblich senken.

Nach kurzem Suchen auf Google fand ich zahlreiche Anfragen dazu („Wie bekomme ich die Buttons zurück?“), eine einfache Lösung allerdings nicht.

In der forge.typo3.org gibt es schon seit längerem eine Feature-Anfrage für die Navigationsbuttons (http://forge.typo3.org/issues/42994). Marco Huber hat nun eine Lösung dazu, vielen Dank an Marco!

Es sind einige Änderungen am tabs.js (Resources\Public\Js\tab.js) von powermail notwendig. Ich habe noch einige Kleinigkeiten ergänzt bzw. geändert: die Beschriftung ‚Weiter‘ und ‚Zurück‘ und die eq-Methode in forNextButton und forPrevButton (so wird auch im Tab-Menü nach Klick auf die Buttons der aktive Tab durch Unterstrich angezeigt). Hier das Skript:


/**
* Overwrite the standard powermail tabs
*
* extend the standard powermail tabs with buttons for "previous" and "next"
* trigger the validation on changing the tab
*
* @param options
*/
jQuery.fn.powermailTabs = function (options) {
'use strict';
var $this = $(this);
options = $.extend({ container:'fieldset', header:'legend' }, options);

', {id:'powermail_tabmenu', class:'powermail_tabmenu'}).insertBefore($this.children(options.container).filter(':first'));

function forNextButton($button) {
var actFieldset = $($button).parent().hide().next().show();
var number = actFieldset.index() - 2
$($ul).find('li.act').removeClass('act').parent().find('li').eq(1).addClass('act');
}

function forPrevButton($button) {
var actFieldset = $($button).parent().hide().prev().show();
var number = actFieldset.index() - 2
$($ul).find('li.act').removeClass('act').parent().find('li').eq(0).addClass('act');
}

function hasNoValidationErrors(){
return $('.powermail_form').validationEngine('validate');
}

//all containers
$this.children(options.container).each(function (i, $fieldset) {
//tab_menu
$ul.append($('

• ')
  .html($(this).children(options.header).html())
  .addClass((i == 0) ? 'act' : '')
  .bind('doSthTabs', {
  container:$this.children(options.container),
  fieldset:$($fieldset)
  }, function (e) {
  if (hasNoValidationErrors()) {
  //alert('doSome' + i);
  $(this).siblings().removeClass('act').end().addClass('act');
  e.data.container.hide();
  e.data.fieldset.show();
  }
  }
  )
  );

  //"previous" and "next" buttons
  if (i < 1) { $(' Weiter >> ')
  .appendTo($($fieldset))
  .bind('doSthButt', function () {
  forNextButton($(this));
  }
  );
  } else if (i < (($this.children(options.container).length) - 1)) { $(' Zurück << ')
  .appendTo($($fieldset))
  .bind('doSthButt', function () {
  forPrevButton($(this));
  }
  );
  $(' Weiter >> ')
  .appendTo($($fieldset))
  .bind('doSthButt', function () {
  forNextButton($(this));
  }
  );
  } else {
  $(' Zurück << ')
  .appendTo($($fieldset))
  .bind('doSthButt', function () {
  forPrevButton($(this));
  }
  );
  }
  }
  );

  // trigger events
  $ul.find('li').click(function (e) {
  e.preventDefault();
  if(hasNoValidationErrors()){
  $(this).trigger('doSthTabs');
  }
  });
  $('.pm_button').click(function (e) {
  e.preventDefault();
  if (hasNoValidationErrors()) {
  $(this).trigger('doSthButt');
  }
  });

  // initial show first fieldset
  $this.children(options.container).hide();
  $this.find(options.container).first().show();

  // Stop submit
$this.submit(function (e) {
//e.preventDefault();
});
};