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>
Add CSS to Your Survey Theme
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 SurveyGizmo 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!
Admin
— Dave Domagalski on 09/17/2019
@Deborah: Thank you for your question!
I'm afraid that we do not have any pre-written scripts that maintain the standard interaction while using the not optimized version of the next/back/submit buttons.
As a potential alternative, one option could be to use the standard interaction and place soft-required validation on questions that are located on the bottom of the page:
https://help.surveygizmo.com/help/require-question-settings#overall-soft-require-setting
This would trigger a warning on any of those questions if they were left unanswered when navigating to the next page.
I'm sorry for the trouble!
David
Technical Writer
SurveyGizmo Learning & Development
— Deborah on 09/16/2019
Hi, I really want to use standard interaction for my mobile survey, but in the past it has caused HUGE problems that the back and next arrows always appear at the bottom of the mobile screen, because sometimes respondents don't realize that they have to scroll down to get to the bottom of the page, and they click the next arrow way too early, leaving many questions unanswered. Do you have any pre-written script that maintains standard interaction EXCEPT for the back and next arrows, and instead replaces those with bottom-of-the-page buttons as in desktop interaction, i.e., buttons that the respondent doesn't see until they actually reach the bottom of the page? Thanks.
Admin
— Dave Domagalski on 07/18/2019
@Adi: Thank you for taking the time to share this with us and other users!
David
Technical Writer
SurveyGizmo Customer Experience
— Adi on 07/18/2019
@CX: Changing the button text in mobile surveys on a per-language basis.
Here is the script you need, just add conditionals (if-statements) per language as you desire (demonstrated for French, Hebrew, and English as default for any other language).
$(document).ready(function(){
if ($('html')[0].lang == 'fr'){
$('.sg-mobile-optimized .sg-submit-button').val('Soumettre');
$('.sg-mobile-optimized .sg-next-button').val('Suivant');
$('.sg-mobile-optimized .sg-back-button').val('Premier');
} else if ($('html')[0].lang == 'he') {
$('.sg-mobile-optimized .sg-submit-button').val('שלח');
$('.sg-mobile-optimized .sg-next-button').val('הבא');
$('.sg-mobile-optimized .sg-back-button').val('קודם');
} else {
$('.sg-mobile-optimized .sg-submit-button').val('Submit');
$('.sg-mobile-optimized .sg-next-button').val('Next');
$('.sg-mobile-optimized .sg-back-button').val('Back');
}
});
Admin
— Dave Domagalski on 12/14/2017
@CX: Thank you for exploring SurveyGizmo documentation content!
As you have noticed, the script documented in this example is for a single language use-case. While what you are looking to do is certainly possible (via additional customization), we do not currently have a ready-made example for a multi-language use-case.
If you do not have access to development resources directly on your team, this customization could be explored with SurveyGizmo's Programming Services Team:
https://www.surveygizmo.com/programming-services/
I hope this helps!
David
Documentation Specialist
SurveyGizmo Customer Experience
— Cx on 12/14/2017
Hi there. My survey has translation (English and French) and I'd like the text of the Back/Next/Submit buttons to change based on the language of the survey. Is this possible? Can we use the same copy from the Text & Translations Tool? If not, is there any way to add a condition in the custom code to display "A" if survey language = "en" and "B" if survey language = "fr"
Thanks in advance!
Admin
— Dave Domagalski on 08/08/2017
@Adi: Thank you for your note!
I'm terribly sorry that the content led you astray. I have now updated the title of the heading to more accurately reflect where the JavaScript should be added.
Thank you very much for your suggestion!
David
Documentation Specialist
SurveyGizmo Customer Experience
— Adi on 08/08/2017
I've been using this solution for a long time, I just figured - the title is very misleading "Add Javascript to Each Page of Your Survey"
After reading (not thoroughly, I admit), what I did was to add a JavaScript action to each page, since I only read the title :(
I suggest to change it to "Add JavaScript to the head section of your survey".
Admin
— Bri Hillmer on 09/07/2016
@Tom: Thank you for this feedback! I will pass this along to our development team.
Bri
Documentation Coordinator/Survey Sorceress
SurveyGizmo Customer Experience Team
— Tom on 09/06/2016
I am sure this issue is crucial to many survey builders. Make the mobile button design (and other layout elements) completely congruent with the desktop design, without the end user having to have familiarity with Javascript Actions and CSS modifications.
Thanks.
Admin
— Dave Domagalski on 06/17/2016
@Katy: Thank you for this feedback!
This customization does assume some familiarity with JavaScript Actions and CSS modifications. Our Customer Service Team can walk your through implementing this - please feel free to reach out to us via chat!
https://help.surveygizmo.com/help/article/link/chat-with-a-hero
David Domagalski
Survey Explorer
SurveyGizmo Customer Support
— Katy on 06/16/2016
Too technical for me