Show Back button only for one block of questions | Experience Community
Skip to main content
Solved

Show Back button only for one block of questions

  • January 30, 2026
  • 4 replies
  • 38 views
M
Level 1 ●
Forum|alt.badge.img+1

Hi everyone!

I would like to show the back button only for a given subset of questions within a single block of my survey. I know that Qualtrics allows you to activate the back button for the entire survey and then deactivate it on the questions where you don’t want it to appear using JavaScript. I’ve already done this in the past.

However, I wanted to ask: in your experience, is there a more efficient approach than placing JavaScript on every question where I don’t want the back button to be shown? For example, could this be handled by combining Survey Flow, embedded data, and JavaScript—or is there an even simpler solution?

Best answer by vgayraud

Hi ​@martamaxia 

I had to do this for a very long survey in which the client only wanted to show the back button on a few questions.

You’re right that the first step is to activate the back button for all questions and then hide it where you don’t want it.

But instead of adding custom code to each question, I added a script to the survey header to hide the button unless the QID was matched in an array.

It’s for the new survey taking experience layout, but you can adapt it to legacy layouts by changing the selectors.

<script>
Qualtrics.SurveyEngine.addOnload(function() {
    // QIDs that should display the Back button
    var displayBackButton = ["QID2", "QID4"];

    var currentQuestion = document.querySelector('section[id^="question-QID"]');
    var currentQID = currentQuestion ? currentQuestion.id.replace("question-", "") : null;
    var prevButton = document.getElementById("previous-button");

    if (prevButton && currentQID) {
        if (displayBackButton.indexOf(currentQID) === -1) {
            prevButton.style.display = "none";
        } else {
            prevButton.style.display = "";
        }
    }
});
</script>

 

4 replies

vgayraud
QPN Level 7 ●●●●●●●
Forum|alt.badge.img+60
  • vgayraud
  • QPN Level 7 ●●●●●●●
  • Answer
  • January 30, 2026

Hi ​@martamaxia 

I had to do this for a very long survey in which the client only wanted to show the back button on a few questions.

You’re right that the first step is to activate the back button for all questions and then hide it where you don’t want it.

But instead of adding custom code to each question, I added a script to the survey header to hide the button unless the QID was matched in an array.

It’s for the new survey taking experience layout, but you can adapt it to legacy layouts by changing the selectors.

<script>
Qualtrics.SurveyEngine.addOnload(function() {
    // QIDs that should display the Back button
    var displayBackButton = ["QID2", "QID4"];

    var currentQuestion = document.querySelector('section[id^="question-QID"]');
    var currentQID = currentQuestion ? currentQuestion.id.replace("question-", "") : null;
    var prevButton = document.getElementById("previous-button");

    if (prevButton && currentQID) {
        if (displayBackButton.indexOf(currentQID) === -1) {
            prevButton.style.display = "none";
        } else {
            prevButton.style.display = "";
        }
    }
});
</script>

 

Vincent Gayraud - https://www.linkedin.com/in/vincent-gayraud-790344116/
    M
    Level 1 ●
    Forum|alt.badge.img+1
    • martamaxia
    • Author
    • Level 1 ●
    • January 30, 2026

    Hi ​@martamaxia 

    I had to do this for a very long survey in which the client only wanted to show the back button on a few questions.

    You’re right that the first step is to activate the back button for all questions and then hide it where you don’t want it.

    But instead of adding custom code to each question, I added a script to the survey header to hide the button unless the QID was matched in an array.

    It’s for the new survey taking experience layout, but you can adapt it to legacy layouts by changing the selectors.

    <script>
    Qualtrics.SurveyEngine.addOnload(function() {
        // QIDs that should display the Back button
        var displayBackButton = ["QID2", "QID4"];

        var currentQuestion = document.querySelector('section[id^="question-QID"]');
        var currentQID = currentQuestion ? currentQuestion.id.replace("question-", "") : null;
        var prevButton = document.getElementById("previous-button");

        if (prevButton && currentQID) {
            if (displayBackButton.indexOf(currentQID) === -1) {
                prevButton.style.display = "none";
            } else {
                prevButton.style.display = "";
            }
        }
    });
    </script>

     

    Thank you so much! Would you know how to adapt this to the legacy layout? I think in the old layout we have PreviousButton instead of previous-button and then directly the Question id with QID.

    M
    Level 1 ●
    Forum|alt.badge.img+1
    • martamaxia
    • Author
    • Level 1 ●
    • January 30, 2026

    Hi ​@martamaxia 

    I had to do this for a very long survey in which the client only wanted to show the back button on a few questions.

    You’re right that the first step is to activate the back button for all questions and then hide it where you don’t want it.

    But instead of adding custom code to each question, I added a script to the survey header to hide the button unless the QID was matched in an array.

    It’s for the new survey taking experience layout, but you can adapt it to legacy layouts by changing the selectors.

    <script>
    Qualtrics.SurveyEngine.addOnload(function() {
        // QIDs that should display the Back button
        var displayBackButton = ["QID2", "QID4"];

        var currentQuestion = document.querySelector('section[id^="question-QID"]');
        var currentQID = currentQuestion ? currentQuestion.id.replace("question-", "") : null;
        var prevButton = document.getElementById("previous-button");

        if (prevButton && currentQID) {
            if (displayBackButton.indexOf(currentQID) === -1) {
                prevButton.style.display = "none";
            } else {
                prevButton.style.display = "";
            }
        }
    });
    </script>

     

    Thank you so much! Would you know how to adapt this to the legacy layout? I think in the old layout we have PreviousButton instead of previous-button and then directly the Question id with QID.

    For the new survey experience your code works. I tried to adapt it to the old layout but it’s not working. I tried to identify the right selectors using the developer tools but I might be getting something wrong. This is my code:

     

    <script>
    Qualtrics.SurveyEngine.addOnload(function() {
      var displayBackButton = ["QID1219388341", "QID1219388344", "QID1219388347", "QID1219388350", "QID1219388353", "QID1219388356", "QID1219388359", "QID1219388362", "QID1219388365", "QID1219388368", "QID1219388371"];

        
        var currentQuestion = document.querySelector('div[id^="QID"]');
        var currentQID = currentQuestion ? currentQuestion.id : null;

       
        var prevButton = document.getElementById("PreviousButton");

        if (prevButton && currentQID) {
            if (displayBackButton.indexOf(currentQID) === -1) {
                prevButton.style.display = "none";
            } else {
                prevButton.style.display = "";
            }
        }
    });
    </script>

    vgayraud
    QPN Level 7 ●●●●●●●
    Forum|alt.badge.img+60
    • vgayraud
    • QPN Level 7 ●●●●●●●
    • January 30, 2026

    Not extensively tested, but you can try this:

    <script>
    Qualtrics.SurveyEngine.addOnReady(function() {
        var displayBackButton = ["QID2", "QID4"];
        var currentQuestion = document.querySelector('div.QuestionOuter[id^="QID"]');
        var currentQID = currentQuestion ? currentQuestion.id : null;
        var prevButton = document.getElementById("PreviousButton");

        if (prevButton && currentQID) {
            if (displayBackButton.indexOf(currentQID) === -1) {
                prevButton.style.setProperty("display", "none", "important");
            } else {
                prevButton.style.setProperty("display", "", "important");
            }
        }
    });
    </script>

     

    Vincent Gayraud - https://www.linkedin.com/in/vincent-gayraud-790344116/
      Terms & ConditionsAccessibility statement