Fixar Valor Total e botão quebra de página

Oi! Gostaria de obter código CSS para fixar o botão quebra de página (Finalizar) e campo de calculo de formulário (TOTAL GERAL 🔴🔴🔴) na parte inferior da tela. Gostaria que ficasse suspenso na tela

Hi tec0,

Thanks for reaching out to Jotform Support. Unfortunately, our Portuguese Support agents are busy helping other Jotform users at the moment. 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 Portuguese, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

Now, let me help you with your question. As you are requesting CSS code regarding, can you please provide a little more details, so we can assist you properly. Do you want to change the submit button at the end of your form? Also, what changes you required for calculation field TOTAL GERAL?

Once we hear back from you, we'll be able to help you with this.

Não é o botão Enviar.
Quero deixar suspenso é o botão Quebra de página (Próximo) que está como o nome de "Finalizar". Desejo fixa-lo na parte de baixo da tela.

E também quero fixar o resultado do campo de cálculo com uma faixa suspensa também na parte de baixo da tela.

Meu objetivo é que o usuário possa ver o valor total a qualquer momento na parte de baixo da tela e que também possa clicar no botão quebra de página a qualquer momento.

Veja o exemplo na parte de baixo dessa tela: Total R$ 41,00 e Botão Finalizar

Hi Bruno,

Thanks for getting back to us with a screenshot. That helps us understand what you're trying to accomplish. To achieve that style, you will have to inject custom CSS codes into your form. Let me show you how to do that:

• In Form Builder, click on the Form Designer (blue paint roller icon) found in the top right corner of the page.
• Click STYLES and paste the CSS code below in the Inject Custom CSS area.

@media screen and (max-width:480px){

.payment_footer.new_ui {

    width: 50%;

    position: fixed !important;

    bottom: 0 !important;

    left:0;

    background: #ffffffcf;

    z-index: 2;

    padding: 0 !important;

    margin:0 !important;

    height:80px;

}

li#cid_76 {

    width: 50% !important;

    position: fixed;

    bottom: 0;

    right: 0;

    background:#ffffffcf;

}

#cid_76 .form-pagebreak {

    padding: 0 10px !important;

    margin:0 !important;

    height:80px;

}

#cid_76 .form-pagebreak-next-container {

    align-items: center;

}

.payment_footer.new_ui .total_area .form-payment-price > span {

    justify-content: flex-start;

}

div#total-text,

.payment_footer.new_ui .total_area * {

    font-size: 20px !important;

}

}

The result will look like this:

Give it a try and let us know if you have more questions.

Não funcionou na tela do computador...

O código acima ficou ótimo na tela do celular! Entretanto ele não funcionou na tela do computador.

Como fazer para também funcionar quando visto pela tela do computador?

Grato: Bruno

Hi Bruno,

Please replace all your form CSS code with the one provided below.

.form-label.form-label-auto {

    display : inline-block;

    float : left;

    text-align : left;

}



body, .form-all {

margin-top: 0;

}



/*Total and Next button fixed position for desktop & mobile - 7797421*/

@media screen and (max-width:480px){



#cid_76 .form-pagebreak-next-container {

    align-items: center;

}



.payment_footer.new_ui .total_area .form-payment-price > span {

    justify-content: flex-start;

}



div#total-text,

.payment_footer.new_ui .total_area * {

    font-size: 20px !important;

}



}



.payment_footer.new_ui {

    width: 50%;

    position: fixed !important;

    bottom: 0 !important;

    left:0;

    background: #ffffffcf;

    z-index: 2;

    padding: 0 !important;

    margin:0 !important;

    height:80px;

}

li#cid_76 {

    width: 50% !important;

    position: fixed;

    bottom: 0;

    right: 0;

    background:#ffffffcf;

}

#cid_76 .form-pagebreak {

    padding: 0 10px !important;

    margin:0 !important;

    height:80px;

}

#cid_76 .form-pagebreak-next-container {

    align-items: center;

}

.payment_footer.new_ui .total_area .form-payment-price > span {

    justify-content: flex-start;

}

div#total-text,

.payment_footer.new_ui .total_area * {

    font-size: 20px !important;

}

.payment_footer.new_ui .total_area:nth-child(1) {

  float: left;

}

.payment_footer.new_ui .total_area {

  padding: 30px 0px 0px 10px;

}

Give it a try and let us know how it goes.

Oi Christopher!

Para ficar perfeito tem como fazer com que o Valor Total e o botão Finalizar não ultrapasse as margens da grade de produtos?

Para ficar conforme a imagem que editei abaixo:

Outra alteração: Tem como fixar o botão Voltar também? Ou seja, deixar ele suspenso.

Grato: Bruno

Hi Bruno,

Thanks for getting back to Jotform Support. In addition to the already added CSS. Please add the below CSS code to your form and check.

.form-pagebreak-back-container {

  margin-right: unset;

}

.payment_footer.new_ui .total_area:nth-child(1) {

  margin-right: 30%;

  float: right;

}



@media screen and (min-width:481px) and (max-width:768px){

  .payment_footer.new_ui .total_area:nth-child(1) {

  margin-right: 0%;

  float: right;

}

}

Give it a try and let us know how it goes.

E quanto ao botão Voltar? Tem como deixa-lo fixo também (Ficar suspenso também).

Hi Bruno,

Thanks for getting back to Jotform Support. In order to make the back button and submit button fixed. Please add the below CSS code in your form Designer.

#cid_2{

 position: fixed;

  left: 0;

  bottom: 0;

  background: #ffffffcf;

   z-index: 2;

}

.form-pagebreak-back-container{

 transform: translate(-270%, 0);

}

.form-submit-button-gradient-1{

 transform: translate(113%, 0);

}



@media screen and (max-width:480px){

 .form-pagebreak-back-container{

 transform: translate(-99%, 0);

}

.form-submit-button-gradient-1{

 transform: translate(56%, 0);

}

}

Give it a try and let us know how it goes.

Hi Bruno,

To avoid confusion, I have moved your new question to this thread.

Let us know if there’s anything else we can help you with.