�� poss�­vel fixar o valor total do pedido?

É possível fixar o valor total do pedido para que ele fique sempre visível na tela do celular ou computador?

Seria ótimo! dessa forma o cliente estaria adicionando as quantidades dos produtos e visualizando a todo tempo o valor total do pedido... Assim ele tem um controle melhor da sua compra.

 

 

 

 

 

Código de acesso da página do url:  4321

Yes, it is possible to force the total price to be visible at all times on the screen. We can do that by inserting custom CSS such as this:

.form-payment-total { position: fixed; top: 0; right: 0; }

It will force the total price to always display in the top right corner of the form. If you do not mind it being on the top center part of the screen, where it can possible overlap some parts of the form, I would recommend this CSS instead:

.form-payment-total { position: fixed; top: 0; right: 0; left: 0; margin: 0 auto; background: gold; padding: 3px 15px 5px; }

It would result in your form looking like this:

You can add this code to your form by opening your form in the Designer:

Once opened, please switch to the CSS tab and paste the code at the bottom of the textbox, as depicted in the following image:

Please let us know if this will work to your satisfaction, or if you need further assistance, and we will be happy to help.

Muito bom! funcionou!

Entretanto quando eu incorporo o formulário no meu site (Plataforma: Wix) o valor total não fica visível todo momento. Será que é possível resolver?

 

Can you try embedding your form using the iFrame code only then adjust the height of the iFrame? Remove the script tag in the embed code.

<script type="text/javascript">

      window.handleIFrameMessage = function(e) {

        var args = e.data.split(":");

        var iframe = document.getElementById("JotFormIFrame");

        if (!iframe)

          return;

        switch (args[0]) {

          case "scrollIntoView":

            iframe.scrollIntoView();

            break;

          case "setHeight":

            iframe.style.height = args[1] + "px";

            break;

          case "collapseErrorPage":

            if (iframe.clientHeight > window.innerHeight) {

              iframe.style.height = window.innerHeight + "px";

            }

            break;

          case "reloadPage":

            window.location.reload();

            break;

        }

        var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

        if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

          var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

          iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

        }

      };

      if (window.addEventListener) {

        window.addEventListener("message", handleIFrameMessage, false);

      } else if (window.attachEvent) {

        window.attachEvent("onmessage", handleIFrameMessage);

      }

      if(window.location.href && window.location.href.indexOf("?") > -1) {

        var ifr = document.getElementById("JotFormIFrame");

        var get = window.location.href.substr(window.location.href.indexOf("?") + 1);

        if(ifr && get.length > 0) {

          var src = ifr.src;

          src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;

          ifr.src = src;

        }

      }

      </script>

 

You can try to use this code below and see if will fix the issue:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformz.com/53388139727669" frameborder="0" style="width: 100%; height: 1000px; border: none;" scrolling="yes"></iframe>

Agora sim! Do jeito que eu queria! Ficou ótimo!

 

Aproveitando o assunto... É possível fixar o "botão de envio" para ficar visível a todo momento também?

 

Grato: Bruno

Please add the CSS code below to your form: 

#id_15{

position: fixed;

bottom:0px;

right : 0;

left : 0;

background : gold;

margin : 0 auto;

width: 690px;

}

Once you've done that, you're form should look like this after:

In addition to the CSS code above, you can also add this code to your form to make the buttons centered.

#id_15 .form-buttons-wrapper{

margin-left: 30.58% !important;

 

}

The issue on the mobile device is caused by the fact that the form's iFrame *the element that holds your form) is taller than the screen of the mobile device. A mobile device that has a shorter screen height than the iFrame will only display a part of the iFrame - when you start scrolling down, it displayes only the top part of the iFrame (where the Total Price field is).

As you scroll all the way down to the bottom, the mobile phone finally gets to the bottom of the iFrame where you can see the Submit button - but the top of the iFrame is then outside of the screen height and Total Price is no longer visible.

You can see the same thing even on a desktop browser, as long as you make the screen to be shorter than the height of the iFrame is set to. You can see what I mean by opening the following screencast:

You may want to try reducing the height you are using in the iFrame embed codes, until the height is short enough to be fully displayed on a mobile screen. If you were using the embed code that my colleague provided above, than you can adjust the height of the iframe by changing the part marked in bold red:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformz.com/53388139727669" frameborder="0" style="width: 100%; height: 1000px; border: none;" scrolling="yes"></iframe>

Please let us know how it goes.

Entendi! Estou usando o código que ele me passou sim! inclusive eu já havia diminuído ele para 650px para ajustar com a tela do meu computador.

Tem como a regulagem do iFrame do formulário se ajustar de forma automática para assim aproveitar melhor qualquer tamanho de tela?

 

Observação: Quando eu abro meu formulário através da plataforma Jotform ele já se ajusta automaticamente em qualquer tamanho de tela... O problema só ocorre quando eu abro através do formulário incorporado no meu site Wix. A limitação então seria da plataforma do meu site que não possui este recurso de se adaptar automaticamente?

If you try embedding by using the full iFrame embed codes, the form would automatically resize itself to to the size of the form - which means that you couldn't have the total price and submit buttons visible at all times on your Wix embedded form.

I believe that this is a limitation of the Wix platform. We can either make the form automatically resize itself such that the entire form is visible on your website without any scrollbars (in which case total price and submit button can't be made visible at all times), OR we can specify a fixed height for the form so that we can position the total price and submit buttons to be visible at all times.

If you really want to have the Total Price and Submit buttons visible at all times for people filling out your form, regardless of the device they are using, I would recommend providing them with a direct link to your form instead:

https://form.jotformz.com/form/53388139727669

I hope this helps.

Muito obrigado! dúvidas esclarecidas!

I am glad to know that your questions have been resolved. On behalf of my colleagues, you are most welcome. Feel free to contact us again if you have any other concerns.