Search »

Form Builder

Navigation

If your form is more than a page, providing some navigation can be an important addition to the form, to improve usability and clarity. It lets users to see how many steps are in the form, how they are progressing, and the option to click back to a previously edited page.

The Navigation template works by looping through all pages in the $nav_pages variable and displaying the appropriate label and link.

Here's some example code:

<ul id="css_nav">
  {{foreach from=$nav_pages item=page_info name=row}}
    {{assign">assign">assign var=i value=$smarty.foreach.row.iteration}}
    {{if $current_page > $i && $current_page != $num_pages}}
      <li><a href="?page={{$i}}">{{$page_info.page_name}}</a></li>
    {{elseif $current_page == $i || $current_page == $num_pages}}
      <li class="css_nav_current_page">{{$page_info.page_name}}</li>
    {{else}}
      <li>{{$page_info.page_name}}</li>
    {{/if}}
  {{/foreach}}
</ul>

What this code does is compare each page number against the current page being rendered. If it hasn't been passed yet, only the label is shown. If it's the current page, it adds a special CSS class to it. If the page has been passed, it provides a link back to it. The CSS layer handles the styles for each nav item.

DOCUMENTATION

Navigation