How can I hide the previous and next buttons on my survey?

Poppy
Poppy Provo, UTFounding Community Member CEP (Chief Executive Paw-ficer)

How can I hide the previous and next buttons on my survey?

Best Answer

  • AnthonyR
    AnthonyR Tucson AzFounding Community Member, Community Member Superuser ✭✭✭✭
    Accepted Answer

    If you would like to hide them on all pages:

    Open your Look and Feel Menu
    Selecting the "Advanced" tab
    Click on the green "Add Custom CSS" button
    Paste the following in to the box that appears:

    #PreviousButton, #NextButton{
    display: none;
    }
    

    If you would like to hide them on a specific page of your survey:

    Add the following to the JavaScript editor for the first question on the page you would like to have them hidden for:

    Qualtrics.SurveyEngine.addOnReady(function () {
        $('NextButton').hide();
        $('PreviousButton').hide();
    });
    

Answers

  • BrianPickerill
    BrianPickerill Muncie, INCommunity Member, Qualtrics Brand Admin Qubie ✭

    For me, this works in PREVIEW mode on a page with a display rule, but not from an actual anonymous link. Any idea what the problem could be? Thanks.

  • BrianPickerill
    BrianPickerill Muncie, INCommunity Member, Qualtrics Brand Admin Qubie ✭

    Thanks, it's working now, I had forgotten about the new publish feature. (Sorry)

  • yinbar
    yinbar Community Member Qubie ✭

    @AnthonyR I just tried this and for some reason I still see the back button..... Can you think of a reason why? My first question is a descriptive text (the title). Should I do something different?

  • AnthonyR
    AnthonyR Tucson AzFounding Community Member, Community Member Superuser ✭✭✭✭
    edited September 2018

    @yinbar Which version of this are you using, the css version or the question specific one?

  • yinbar
    yinbar Community Member Qubie ✭

    @AnthonyR Thanks!
    Eventually I managed to do it with:
    Qualtrics.SurveyEngine.addOnload(function ()
    {
    //disables the next button on the page
    this.hidePreviousButton();
    });

  • ssouth
    ssouth New YorkCommunity Member - Trial User Qubie ✭

    Any other ideas? I've tried both @AnthonyR and @yinbar suggestions. I'm trying to get my survey's first two pages to hide the Previous and Next buttons, but to display them for the rest of the pages. I tried both the following in the JavaScript editor for the first question of both pages:

    Qualtrics.SurveyEngine.addOnload(function ()
    {
    //disables the next button on the page
    this.hidePreviousButton();
    });

    and

    Qualtrics.SurveyEngine.addOnReady(function () {
    $('NextButton').hide();
    $('PreviousButton').hide();
    });

    I thought maybe other CSS is overriding, but the only other custom code is in the Look and Feel -> Style -> Custom CSS and seems to have nothing to do with the buttons (just the background color of the answer container:

    .Skin label.SingleAnswer{background-color:#C0C0C0;}

  • UCSBmeta
    UCSBmeta Santa BarbaraCommunity Member Qubie ✭

    Did you ever figure this out? I'm having the same problem.

  • davidhidalgo
    davidhidalgo denmarkCommunity Member Qubie ✭

    Another way of doing this is:


    Qualtrics.SurveyEngine.addOnload(function()

    {

    /*Place your JavaScript here to run when the page loads*/

    jQuery("#PreviousButton").css("visibility","hidden");

    });



    visibility:hidden; also hides an element.

    However, the element will still take up the same space as before. The element will be hidden, but still affect the layout. Taken from here: https://www.w3schools.com/css/css_display_visibility.asp

  • charlotte18
    charlotte18 YorkshireCommunity Member Qubie ✭

    I'm trying to hide them on just one page - I've copied the Java Script in but it won't work on the preview - is there something else I need to do ?

  • husikage
    husikage Community Member Qubie ✭

    @ssouth I changed the "Previous" to "Next" and the code below worked for the "next button". The original version of @yinbar is for hiding the "previous button".


    Qualtrics.SurveyEngine.addOnload(function ()

    {

    //disables the next button on the page

    this.hideNextButton();

    });