Wie lässt sich der Fortschritt auf Mobilgeräten vorantreiben?

Guten Tag,

Es geht um dieses Formular: 241796374397372

ich möchte gerne das die Fortschrittsanzeige bei der mobilen Ansicht oben am Bildschirm mitschwimmt und nicht oben fixiert ist... gibt es diese Möglichkeit.

Können Sie mir helfen? Das wäre super ;-)

Hi André,

Thanks for reaching out to Jotform Support. Our German Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in German, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, you can make the progress bar float in mobile by injecting a Custom CSS code into your form. Let me show you how:

1. First, copy this code:

/* Adjust the max-width value based on your needs */

@media (max-width: 768px) {

  .progressBarContainer {

    position: fixed;

    top: 20px; 

    left: 50%; 

    transform: translateX(-50%);

    z-index: 1000; 

    width: auto; 

    max-width: 300px; 

  }

}

/*Code ends here*/

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject Custom CSS. That’s it. The code is automatically saved.

We also have a guide to help you learn How to Inject Custom CSS Codes. Just to avoid confusion, I've moved the question to a new thread and helped you there. You can check it out here:

Let us know if you have any other questions.

Hi Reymae,

vielen Dank für deine Hilfe ;-)
Leider funktioniert der CSS Code nicht. Kannst du den bitte nochmal überprüfen?

Ist es möglich im Fortschrittsbalken das Wort Completed auszublenden?

Hi André,

You can replace the recent code to make sure that the changes will take effect on your form in mobile.

/* Adjust the max-width value based on your needs */

@media ( max-width: 768px ) {

 #progressTextCompleted 

{ 

  color: transparent; /*Hides the completed word in mobile*/

 }

  .progressBarContainer { 

   position : fixed; /*Make the progress bar float*/

   top : 20px ;

   transform : translateX (- 50% );

   z-index : 1000 ;

   width : auto;

   max-width : 300px ;

   

 }

}

/*Code ends here*/

Take a look at the screenshot below to see my results:

Give it a try and reach out again if you have any other questions.

it works not like a floating - the progress bar is just on top on formular. Can you check again

Hi André,

I cloned your form, added the code my colleague shared, and it appears to work as expected. Check this out:

Can you explain a bit more about what else is missing? Do you want to make it more visible on view? If so, then we can add a background color to it, to make it more standout. You can add the code below into your form.

/* Adjust the max-width value based on your needs */

@media ( max-width: 768px ) {

 #progressTextCompleted 

{ 

  color: transparent; /*Hides the completed word in mobile*/

 }

  .progressBarContainer {

   position : fixed; /*Make the progress bar float*/

   top : 0;

left: 0;

   transform : translateX (- 50% );

   z-index : 1000 ;

   width : auto;

   max-width : 300px ;

   min-width: 100% !important;

   background-color: #fcebd9 !important;

   

 }

}

/*Code ends here*/

Check out the result:

Give it a try and let us know if you need any more help.

Hi Lorenz, thanks you - it works ;-)