Change Arrows on Next, Back and Submit Buttons to Text

The one-at-a-time interaction for desktop and all mobile-optimized interactions will change the text of the Next, Back, and Submit buttons to arrows by default. If you're not a fan of how this looks you can use a little JavaScript and CSS to change these back to text.

Add Javascript to Custom Head

Copy and paste the below JavaScript into your survey's theme. To do so, go to the Style tab and scroll to the bottom of the survey preview to access the link to the HTML/CSS Editor. JavaScript code should be placed on the Custom Head tab.

Change the Navigation Buttons on Mobile Only

<script>
 $(document).ready(function(){
  $('.sg-mobile-optimized .sg-submit-button').val('Submit');
   $('.sg-mobile-optimized .sg-next-button').val('Next');
   $('.sg-mobile-optimized .sg-back-button').val('Back');
});
</script>

Change All Navigation Buttons (Mobile and Desktop)

<script>
$(document).ready(function(){
   $('.sg-back-button').val('Back');
   $('.sg-submit-button').val('Submit');
   $('.sg-next-button').val('Next');
});
</script>

If Necessary: Add CSS to Your Survey Theme

If you have spacing issues after adding the Javascript, you can copy and paste the below CSS in your survey's theme. To do so go to the Style tab and scroll to the bottom of the survey preview to access the link to the HTML/CSS Editor. CSS code should be placed on the Custom CSS tab.

.sg-survey body.sg-mobile-optimized .sg-button-bar .sg-next-button, .sg-survey body.sg-mobile-optimized .sg-button-bar .sg-submit-button, .sg-survey body.sg-int-virtual-page .sg-button-bar .sg-next-button, .sg-survey body.sg-int-virtual-page .sg-button-bar .sg-submit-button {
width: 77px;
}


.sg-survey body.sg-mobile-optimized .sg-button-bar .sg-back-button, .sg-survey body.sg-int-virtual-page .sg-button-bar .sg-back-button { 
width: 77px;
}