Floating submit button | XM Community
Solved

Floating submit button

R
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
icon

Best answer by mattyb513 30 July 2018, 17:55

View original

11 replies

R
FOLLOW UP: Here is the link to earlier question about floating timer. the conext for this is that the pages are really long so a floating timer/submit button would make it so the respondent doesn't have to scroll all the way up or down to see the timer or hit the submit/next page button.
w.patrick.gale
Rank
Userlevel 5
Badge +13
Hi @rkchristensen, you should be able to override the styling of any of the elements on the survey but probably need to use the !important CSS rule in your overrides to ensure that your CSS 'has the final say'.

div#QIDXXXX {
position: fixed !important;
top: 0 !important;
right: 0 !important;
background: #000 !important;
}
mattyb513
Rank
Userlevel 6
Badge +6
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
R
mattyb513, thanks for your suggestions here. And for the working example. This solution doesn’t seem to work on any of the pages where we have the floating timing being implemented. The solution of putting a “cloned” submit button in the header works fine on all the other pages. I’m wondering if this is because the timer pages are using that submit button as a part of the timing logic (i.e., they’re tracking what how long someone is on the page before they submit the page).

In short, is it possible to have a submit button in the head AND a floating timer (as per link)?

Thanks!
Rob
R
mattyb513, thanks for your suggestions here. And for the working example. This solution doesn’t seem to work on any of the pages where we have the floating timing being implemented. The solution of putting a “cloned” submit button in the header works fine on all the other pages. I’m wondering if this is because the timer pages are using that submit button as a part of the timing logic (i.e., they’re tracking what how long someone is on the page before they submit the page).

In short is it possible to have both a floating submit button in the header AND a floating timer [link]?(https://www.qualtrics.com/community/discussion/1400/how-to-get-a-timer-to-float-item-remain-in-position#latest "link")
mattyb513
Rank
Userlevel 6
Badge +6
What behavior are you seeing if they are both on the page?
R
The fixed submit header is not active on any page that uses timing.
mattyb513
Rank
Userlevel 6
Badge +6
Add this after the clone within the function

`jQuery('#Header #Buttons #NextButton, #Header #Buttons #PreviousButton').attr('disabled', false);`
R
Thanks. This gets me closer. I can now see the black space where my timer should be AND the submit button in the header. However, now I can't see the actual timer in that black box. Any ideas?

Before the submit header !

After the submit header !
Z
So I'm trying to get a floating submit button and using an image that I want participants to be able to skip past.

When I have the timer on the page (without a page break) it messes up my floating header.

here's what it looks like:

Any tips on how to fix this?
!




> @mattyb513 said:
> 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
S
Rank
Userlevel 1
Badge +3
I tried to add the submit button to the top of my survey as advised by adding the code provided with script tags -<script></script> and the CSS code but it does not work for me. I am not a developer to any degree so I am following your steps as is. Is there something else that I need to do?

Leave a Reply


Terms & Conditions