{"id":8748,"date":"2022-06-07T06:01:42","date_gmt":"2022-06-07T06:01:42","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/?post_type=ht_kb&p=8748"},"modified":"2022-11-24T07:24:43","modified_gmt":"2022-11-24T07:24:43","slug":"survey-previous-next-button","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/survey\/creator\/previous-next-button\/","title":{"rendered":"Survey Previous\/Next Button"},"content":{"rendered":"
\n

The Previous\/Next Button helps your customers to move forward or backward through different pages in your survey.<\/p>\n

<\/div>\n

How to use Previous\/Next Button in your Survey?<\/h2>\n

Step 1 \u2013 Navigate to the Survey Creator<\/h3>\n

Open the Survey Creator to start creating your survey<\/a>.
\n\"Survey<\/p>\n

Step 2 \u2013 Add Previous\/Next Widget in your survey<\/h2>\n

To add a Previous\/Next to your Survey, drag and drop the widget to the work area.<\/p>\n

<\/div>\n

\"Survey<\/p>\n

<\/div>\n

Step 3 \u2013 Customize the Previous\/Next Widget<\/h2>\n

Once you drop the widget in the work area, you\u2019ll see the widget settings on the right side.<\/p>\n

<\/div>\n

\"Previous\/Next<\/p>\n

<\/div>\n

Use the settings to define Previous and Next Button for the current page.
\nYou can:<\/p>\n

    \n
  1. Select which page the button should take the customer on to once they finish filling the current page.<\/li>\n
  2. Hide Previous or Next Button according to your preferences. It is useful for the Home page and the last page of your survey.<\/li>\n<\/ol>\n
    <\/div>\n

    Step 4 \u2013 Style your Previous\/Next Button<\/h2>\n

    You can edit how the Previous\/Next Button should look by clicking on the Style tab.<\/p>\n

    <\/div>\n

    \"Survey<\/p>\n

    <\/div>\n

    The different design options available to you are:<\/p>\n

    4.1 Previous\/Next Button Font and Color Settings<\/strong><\/h3>\n
    <\/div>\n

    \"Previous\/Next<\/p>\n

    <\/div>\n
      \n
    1. Border Size and Color for you to adjust the thickness and color of the border around your buttons.<\/li>\n
    2. Border Style to edit how the border should look i.e., solid, dashed, dotted, etc.<\/li>\n
    3. Rounded Corners to edit how rounded or sharp you want the corners to be.<\/li>\n<\/ol>\n
      <\/div>\n

      4.2 Previous\/Next Text Style<\/strong><\/h3>\n

      \"Survey<\/p>\n

      <\/div>\n

      Use the options available under this section to edit the font style, color, font family, and font-weight, text position, and button text and style.<\/p>\n

      <\/div>\n

      4.3 Previous\/Next Button Settings<\/strong><\/h3>\n

      \"Survey<\/p>\n

        \n
      1. Previous\/Next Button Width to adjust the width of the button.<\/li>\n
      2. Middle gap size adjuster to adjust the gap between the Previous and the Next button.<\/li>\n
      3. Button Positions to adjust where you want to place the button on the page i.e left, middle, or right alignment.<\/li>\n
      4. Padding to enter in the desired padding measurements. Padding refers to the gap between the text entered in the button and the button boundary.<\/li>\n
      5. Apply style to all (Previous\/Next) Widgets to ensure the buttons on all the pages look the same. This means you don\u2019t have to edit every button on each page separately.<\/li>\n
      6. Top Bottom Gap to put a gap between the last text on the page and the button.<\/li>\n<\/ol>\n

        Click Save and that\u2019s it!
        \nYou have successfully added a custom Previous\/Next button to your survey<\/a>!<\/p>\n<\/div>\n