Hello again. Thanks in advance to the Qualtrics Community. I haven't stumped you yet. I recently posted a question about making a visible page timer float so that respondents could see how long they were taking on each page. The answer worked perfectly via custom CSS:
div#QIDXXXX {
position: fixed;
top: 0;
right: 0;
background: #000;
}
Now I'm wondering how I might make the next page/submit button do the same thing--right below the timer-- so that a respondent could -- if they wanted -- submit a page of questions (even if unfinished) and move to the next page.
I've found how to change the next button language but not its position -- to floating or any other position. Any ideas? I'd also be happy to have a solution that inserted the next page button as a static button (vs. floating) every 5 or so questions throughout a 60 question page. Part of the objective of the study, I should mention, is to determine at what point people give up on a survey.
Thanks!
Rob
Solved
Floating submit button
Best answer by mattyb513
If I were you I would add an additional floating button to the top but leave the buttons on the bottom.
You can do this with the `.clone()` method in jQuery. Add this JavaScript within `<script>` tags in the header
```javascript
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery('#Buttons').clone().appendTo('#Header');
jQuery('#Header #Buttons #NextButton').click(function() {
jQuery('#SkinContent #Buttons #NextButton').click();
});
jQuery('#Header #Buttons #PreviousButton').click(function() {
jQuery('#SkinContent #Buttons #PreviousButton').click();
});
});
```
Then add some styling (to the Look and Feel > Advanced > Custom CSS):
```css
#SurveyEngineBody {
/* Don't want to cover the top of your survey with the button div */
padding-top: 50px;
}
#Header #Buttons {
top: 0;
position: fixed;
width: 100%;
left: 0;
right: 0;
background: #fff;
border-bottom: 1px solid #ddd;
margin-top: 0;
}
```
Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_dnz1a6CmIfXwzCB?Q_SurveyVersionID=current&Q_CHL=preview
QSF attached
View originalYou can do this with the `.clone()` method in jQuery. Add this JavaScript within `<script>` tags in the header
```javascript
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery('#Buttons').clone().appendTo('#Header');
jQuery('#Header #Buttons #NextButton').click(function() {
jQuery('#SkinContent #Buttons #NextButton').click();
});
jQuery('#Header #Buttons #PreviousButton').click(function() {
jQuery('#SkinContent #Buttons #PreviousButton').click();
});
});
```
Then add some styling (to the Look and Feel > Advanced > Custom CSS):
```css
#SurveyEngineBody {
/* Don't want to cover the top of your survey with the button div */
padding-top: 50px;
}
#Header #Buttons {
top: 0;
position: fixed;
width: 100%;
left: 0;
right: 0;
background: #fff;
border-bottom: 1px solid #ddd;
margin-top: 0;
}
```
Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_dnz1a6CmIfXwzCB?Q_SurveyVersionID=current&Q_CHL=preview
QSF attached
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.