Custom Navigation Buttons

A survey displays a set of navigation buttons for respondents to start and end the survey, switch between survey pages, or preview answers. This example demonstrates how to add a custom navigation button that performs any required action.

To add a custom button to your survey, call the addNavigationItem method on a SurveyModel instance. This method accepts an IAction object whose properties configure the button. Assign a unique string value to the id property and a button caption to the title property. Use the action property to specify the function this button should execute. This demo adds a custom "Clear Page" button that clears question values on the current page.

Navigation buttons are ordered according to their visibleIndex values. The following table lists the visibleIndex values of built-in buttons:

To insert a custom button before, after, or between two other buttons, assign a corresponding visibleIndex value to this button. If you do not specify visibleIndex, your button will be added to the end.

You can also position a button using CSS. Navigation buttons are <input> elements wrapped in <div> elements. Create a CSS class that positions a <div> the way you need and assign the class name to the css property of the IAction object when you add the button. In this demo, the "Clear Page" button is aligned to the left using the .nav-button CSS class.

To give your custom button a distinct appearance, create one or several CSS classes for the inner <input> element. Assign space-separated class names to the innerCss property of the IAction object. Include the .sd-btn class name if you don't want to configure the entire button appearance from scratch. This demo shows how to override background and font colors for a custom button in normal and hover states.