Mobile View: "202" and "New" Texts are Showing that Should be Hidden

I have been working on a form solution that involves a starting main starting point with a dropdown that offers any one of 3 different embedded forms. Your techs have been helpful in getting me to to his point but there are a couple of tricky problems with layout that require CSS and the process has become impossible because I'm getting different answers from different techs.

So far William. Norwyn, Girish, Mike_G and Kelvin have all been involved.

Custom CSS that I thought was in place seems to have disappeared.

The 2 remaining problems are:
1) The full width of the form is being cut off in vertical cell phone configuration and there is text showing that should be hidden: eg "202" "NEW"

I need ONE tech to take over from here. Preferably one with deep CSS experience.

I need telephone contact. My needs as a customer do not justify upgrading to a higher level but trying to do this via ticket is just too slow and awkward.

I went to bat to stay with Jotform on this project and I will continue to use and sing the praises of Jotform for many years to come if we can just get over this hump.

Please reread the last 3 sentences.

Thanks,
Geoff

Hi Geoff,

Thanks for reaching out to Jotform Support. You can resize the Signature field in the PDF Editor. Let me show you how to do

• In PDF Editor, click on the field you want to resize.
• On the right corner of the field, click on the Square icon.
• While clicking on it, move your mouse to resize the field.

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

Please reread my submission and escalate this to a higher level.

Hi Geoff,

I'm sorry for the wrong reply. I might have replied to the wrong ticket. Let me look into it and get back to you with a solution.

Thanks for your patience and understanding.

Hi Geoff,

Thanks for waiting. I checked your form using an actual phone and the labels appear to be showing fine on my end. Check out the screencast below:

It seems that you're using the preview function to view the form, can you try checking it with an actual phone device and see if that makes any difference?

As for your other question, I've moved that to a new thread. You can check that out here.

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

Yes it definitely looks better on an actual phone!

But the last 2 bottles are are misaligned

AND

Several of the address fields are missing at the bottom

Hi Geoff,

Thank you for getting back to us. Please try setting the image alignment to the left.

Here's how it looks on mobile view.

Give it a try and let us know if there's anything else we can do for you.

Hi Sigit,

Viewing https://stannersvineyard.ca/order-wines2.html on my iPhone 14 Pro Max

Now each subform is different with respect to alignment despite the fact that I have set the alignment to "Left" for all the bottles on all the forms.

Also fields are cut off on some forms. We have to be careful here because I don't want to mess up how the forms look on a desktop computer because of changes made to accommodate a cell phone

In Option 1—Ship in Ontario and Pay by CC all the bottles are on the right, the form cuts off so all the fields below "Name" are missing including the Submit button

In Options 2 and 3—Pay by eTransfer and Ship outside of Ontario the last 2 bottles are now centered instead of on the left and the form cuts off so all the fields below "Name" are missing including the Submit button

Hi Geoff,

Thanks for getting back to us and sharing the additional information. I'll need some time to look into this and will get back to you as soon as possible. Thanks for your patience and understanding.

Hi Geoff,

Thanks for patiently waiting. I tested the form on your website on an iPhone 14 Pro Max using a Mobile Simulator (Real device) and ran into the same issues you refer to. Below is what I found:

• The submit button is missing on all options.
• Pay by E-transfer shows all bottles on the left, the last two bottles in the center, and the fields missing after the name field.

• The pick or Ship option aligned all the bottles on the right.
• Ship out of Ontario shows all bottles left aligned and the last two bottles center aligned.

I checked your website, and it seems that you are using the Embed code method to embed the form on your website. Can you try using the iFrame Embed method and see if this makes any difference? It's easy to embed iFrame on your website. Let me show you how to do it:

1. In Form Builder, in the orange navigation bar at the top of the screen, click on Publish.
2. Click on Embed from the left panel.
3. Next, select IFrame.
4. Now, click on the Copy Code button.
5. Paste the code into your web page where you would like to display it, usually somewhere in the body of the page.

Alternatively, you can also choose other embed codes according to your needs. To learn more, see our guide on Embed Codes. We also have a guide explaining Embedding a Form to a Web Page that you can check out.

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

Rahul,
You are describing exactly what I had already done. In Build select Publish, choose Embed, select iFrame. Copy and insert the code. Page is https://stannersvineyard.ca/order-wines2.html

I don't know what you were looking at.

Here's a screen shot of the code:

Hi Geoff,

Thanks for getting back to us. Now that you've ensured the image alignment is set to 'Left', please disable the following CSS code on your sub-forms. This will prevent fields from being cut off or hidden when the container for the embedded form is smaller than the form height. In addition, this action also corrected the image alignment:

.supernova {

  overflow: hidden !important;

}

As shown in the screenshot below.

Let us know if there's anything else we can do for you.

You can see in the screenshot you provided that the supernova CSS is already commented out!

This disables it but I went ahead and deleted it from all the subforms anyway.
Makes no difference whatsoever.

I asked for you guys to assign one senior level tech to this but every time there's an answer, someone else is offering yet another non-solution.

There have now been about 7 different techs offering ideas.

For God's sake get a supervisor to read this thread from the top and do what I'm asking so I can get off this merry go round.

Thanks,

Geoff

Hi Geoff,

Thanks for getting back to us. Please be informed that the screenshot I shared with you was from a cloned form under my account. Upon checking your subforms, the said CSS code is still there, and some of the images are not set to 'Left' aligned.

Here's the cloned version of your main form and its subforms inside an iframe embed widget that you can view. After applying the suggested steps, it displays properly on iPhone 14 Pro Max.

If that doesn't help, let us know, and we will forward this to our developers for further checking

Okay, I've discovered that the subforms I have been editing are NOT the forms embedded in the main form — SV Order Form 2024 which is the form at https://stannersvineyard.ca/order-wines2.html

This thing has been driving me nuts. Every change you asked me to make, I did make but these changes to the subforms on my account — eg "E-transfer Stanners Vineyard Wine Order" have no effect on the actual embedded sub forms.

I have no idea where the actual subforms are or how to locate them. I'm trying to contact my programmer who set this up. If you know the answer to this please let me know.

Thanks,
Geoff

Hi Geoff,

Thank you for providing additional information upon getting back to us. After checking your 'SV Order Form 2024,' here are the URLs and locations of the subforms.

• First Iframe Embed Frame URL: https://form.jotform.com/241075997266974, owned by Mike_G.
• Second Iframe Embed Frame URL: https://form.jotform.com/241076453726963, owned by Mike_G.
• Third Iframe Embed Frame URL: https://form.jotform.com/241076070719960, owned by Mike_G.

In your 'SV Order Form 2024,' you have the option to replace those frame URLs with forms that are in your account. Let me show you how.

1. Open the Form Builder for 'SV Order Form 2024'.
2. Click the Magic Wand icon of the First Iframe Embed to access the Widget settings.
3. Replace the Frame URL with your form's URL.
4. Repeat steps #2 and #3 for the Second and Third Iframe Embed widgets.

Let us know if there's anything else we can do for you.

Okay, now that I know the right forms (my own) are there's a new problem that needs to be fixed for correct display on iPhone

1) Forms are not scrolling all the way. They only go down a small amount and then stall.

Hi Geoff,

Thanks for getting back to us. When I checked and tested your form using an iPhone 14 Promax device, everything worked fine the way it was supposed to. Take a look at the screenshot below to see my result:

Can you please try it again and see how it goes? if the same thing happens again, can you please try using a different device to see if that would make any difference?

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

The form is emphatically not working on iPhone 14, X Max, iPad.

Please forward this to Sigit, I am trying to get some continuity in this process.

thank you.

Hi Geoff,

Thanks for getting back to us. Please send us a screenshot of what you see on your end. As far as the embedded form is concerned, it is working as it should. Check out my screencast:

Take a screenshot of what's happening and share it with our Support Forum so that I can have a better idea of what's going on and help you with this. This guide will show you how to do that.

Also, try this Iframe on your website as I have enabled the scroll function explicitly:

<iframe

id="JotFormIFrame-241086248944261"

title="SV Order Form 2024"

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

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://form.jotform.com/241086248944261"

frameborder="0"

style="min-width:100%;max-width:100%;height:539px;border:none;"

scrolling="yes"

></iframe>

<script src='https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js'</script>

<script>window.jotformEmbedHandler("iframe[id='JotFormIFrame-241086248944261'", "https://form.jotform.com/")</script>

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

I have decided that this solution is not reliable when displaying on a phone. It seems to work on yours but it doesn't on mine. The embedded forms are now situated on separate pages. Everything seems to be working except the Credit Card option form which is now here: https://stannersvineyard.ca/order-wines-1.html

It's fine on a desk top but the bottom part of the form gets cut off on a phone. 14 Pro Max

Hi Geoff,

Thanks for getting back to us. The same thing happened to me when I checked the new webpage using my iPhone 14 Promax. Can you please try to re-embed the form using the code below to see if that would resolve the issue?

  <iframe

      id="JotFormIFrame-240907916543259"

      title="Enquiry Form"

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

      allowtransparency="true"

      allowfullscreen="true"

      allow="geolocation; microphone; camera"

      src="https://form.jotform.com/240907916543259"

      frameborder="0"

      style="min-width:100%;max-width:100%;height:auto;border:none;"

      scrolling="no"

    >

    </iframe>

    <script type="text/javascript">

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

    if (ifr) {

      var src = ifr.src;

      var iframeParams = [];

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

        iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));

      }

      if (src && src.indexOf("?") > -1) {

        iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));

        src = src.substr(0, src.indexOf("?"))

      }

      iframeParams.push("isIframeEmbed=1");

      ifr.src = src + "?" + iframeParams.join('&');

    }

    window.handleIFrameMessage = function(e) {

      if (typeof e.data === 'object') { return; }

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

      if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); }

      if (!iframe) { return; }

      switch (args[0]) {

        case "scrollIntoView":

          iframe.scrollIntoView();

          break;

        case "setHeight":

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

          if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) {

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

          }

          break;

        case "collapseErrorPage":

          if (iframe.clientHeight > window.innerHeight) {

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

          }

          break;

        case "reloadPage":

          window.location.reload();

          break;

        case "loadScript":

          if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; }

          var src = args[1];

          if (args.length > 3) {

              src = args[1] + ':' + args[2];

          }

          var script = document.createElement('script');

          script.src = src;

          script.type = 'text/javascript';

          document.body.appendChild(script);

          break;

        case "exitFullscreen":

          if      (window.document.exitFullscreen)        window.document.exitFullscreen();

          else if (window.document.mozCancelFullScreen)   window.document.mozCancelFullScreen();

          else if (window.document.mozCancelFullscreen)   window.document.mozCancelFullScreen();

          else if (window.document.webkitExitFullscreen)  window.document.webkitExitFullscreen();

          else if (window.document.msExitFullscreen)      window.document.msExitFullscreen();

          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}), "*");

      }

    };

    window.isPermitted = function(originUrl, whitelisted_domains) {

      var url = document.createElement('a');

      url.href = originUrl;

      var hostname = url.hostname;

      var result = false;

      if( typeof hostname !== 'undefined' ) {

        whitelisted_domains.forEach(function(element) {

            if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) ||  hostname === element ) {

                result = true;

            }

        });

        return result;

      }

    };

    if (window.addEventListener) {

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

    } else if (window.attachEvent) {

      window.attachEvent("onmessage", handleIFrameMessage);

    }

    </script>

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

Sorry, It's cut off exactly as before. The other 2 forms for Etransfer payments and Shipment out iof Ontario are fine. It's just the ship in Onatario/pay by CC form that gets cut off.

Hi Geoff,

Could you try using the updated iframe code as provided below?

  <iframe





      id="JotFormIFrame-240907916543259"





      title="Enquiry Form"





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





      allowtransparency="true"





      allowfullscreen="true"





      allow="geolocation; microphone; camera"





      src="https://form.jotform.com/240907916543259"





      frameborder="0"





      style="min-width:100%;max-width:100%;height:auto;border:none;"





      scrolling="no"





    >

    </iframe>

    <script type="text/javascript">





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





    if (ifr) {





      var src = ifr.src;





      var iframeParams = [];





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





        iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));





      }





      if (src && src.indexOf("?") > -1) {





        iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));





        src = src.substr(0, src.indexOf("?"))





      }





      iframeParams.push("isIframeEmbed=1");





      ifr.src = src + "?" + iframeParams.join('&');





    }





    window.handleIFrameMessage = function(e) {





      if (typeof e.data === 'object') { return; }





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





      if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); }





      if (!iframe) { return; }





      switch (args[0]) {





        case "scrollIntoView":





          iframe.scrollIntoView();





          break;





        case "setHeight":





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





          if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) {





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





          }





          break;





        case "collapseErrorPage":





          if (iframe.clientHeight > window.innerHeight) {





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





          }





          break;





        case "reloadPage":





          window.location.reload();





          break;





        case "loadScript":





          if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; }





          var src = args[1];





          if (args.length > 3) {





              src = args[1] + ':' + args[2];





          }





          var script = document.createElement('script');





          script.src = src;





          script.type = 'text/javascript';





          document.body.appendChild(script);





          break;





        case "exitFullscreen":





          if      (window.document.exitFullscreen)        window.document.exitFullscreen();





          else if (window.document.mozCancelFullScreen)   window.document.mozCancelFullScreen();





          else if (window.document.mozCancelFullscreen)   window.document.mozCancelFullScreen();





          else if (window.document.webkitExitFullscreen)  window.document.webkitExitFullscreen();





          else if (window.document.msExitFullscreen)      window.document.msExitFullscreen();





          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}), "*");





      }





    };





    window.isPermitted = function(originUrl, whitelisted_domains) {





      var url = document.createElement('a');





      url.href = originUrl;





      var hostname = url.hostname;





      var result = false;





      if( typeof hostname !== 'undefined' ) {





        whitelisted_domains.forEach(function(element) {





            if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) ||  hostname === element ) {





                result = true;





            }





        });





        return result;





      }





    };





    if (window.addEventListener) {





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





    } else if (window.attachEvent) {





      window.attachEvent("onmessage", handleIFrameMessage);





    }





    </script>

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

OMG OMG OMG!!!

It works! You have no idea what I've been through to get to this.

THANK YOU!