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.

One at a Time Interaction

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;
}

Scripting and Other Custom Solutions

We’re always happy to help you debug any documented script that is used as is. That said, we do not have the resources to write scripts on demand or to debug a customized script.

If you have customization ideas that you haven't figured out how to tackle, we're happy to be a sounding board for Alchemer features and functionality ideas that might meet your needs. Beyond this, check out our Professional Services; these folks have the scripting chops to help you to achieve what you are looking for!

Basic Standard Market Research HR Professional Full Access Reporting
Free Individual SurveyGizmo Enterprise*
*Excludes Stakeholder
Feature Included In