Form not working on website

Hi, my form functions perfectly in the editor and designer.

 

However, when inserted into my website, the calculations, multiple choice options, nor payments are working.

 

Please help!

 

Here is the website:

http://db1346.wix.com/destination-blues?_ga=1.35585441.1498082459.1441743012#!shop/nbx2o

There is a conflict in the website that prevented the form from working properly. Please re-embed the form using our iframe method: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

Thanks

Thank you.

 

I was able to embed with the iframe code, however, now when you select quantity for the calculation, the form should expand for the multiple choice selections but instead it is cut off.

 

I changed the iframe widget on my website (expanded height) and also tried increasing the form height in the code and neither has worked.

 

I need this fixed ASAP as I am losing orders.

 

Thanks!

 

Website:
http://db1346.wix.com/destination-blues?_ga=1.35585441.1498082459.1441743012#!shop/nbx2o

 

Form:
https://secure.jotformz.com/form/52655341021647

Hi,

Unfortunately, the problem is that Wix is using an iFrame that has a fixed height, same goes with the iFrame embed code. They do not automatically adjust when the content of the form changes. What we can do is the following:

1. First, set a fixed height in the iFrame code of the form that will cover the whole form regarding if the other fields are shown. Make sure also to set the scrolling attribute to "yes". Here's my sample iframe code with the changes I made:

    <iframe

      id="JotFormIFrame"

      onDISABLEDload="window.parent.scrollTo(0,0)"

      allowtransparency="true"

      src="https://secure.jotformpro.com/form/52715678013961"

      frameborder="0"

      style="width:100%;

      height:2500px;

      border:none;"

      scrolling="yes">

    </iframe>

    <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;

        }

      };

      if (window.addEventListener) {

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

      } else if (window.attachEvent) {

        window.attachEvent("onmessage", handleIFrameMessage);

      }

      </script>

 

2. I cloned your form for testing purposes, this is now how it looks like: http://charmiequino.wix.com/jotformtestsite#!iframe/c1oha. In my Wix website, you'll see that when the form shows the other fields due to conditions and using the form collapse field, it will not adjust the height of the element but instead shows a scroll bar to show all of the fields.

 

I hope that helps. Do let us know if that works.