Changed width of form, HTML for IFRAME was garbage

  • tsolomita
    Asked on July 15, 2014 at 6:11 PM

    I changed the width of my form from 700-500 so that it could possibly appear correctly in mobile phone.  Once I did this, however, the HTML for IFRAME did not resemble the original HTML.  

    The form in question is my Singles Discussion Group Registration Form.  I changed the width directly on my website.

     

    http://www.therapy2change.com/#!registrationform/c1jel

     

    The form looks great in iPAD now, but it still does not work on my mobile phone (iphone5).

     

    So, I guess there are two questions here - what happened to the HTML code for my form? and Why is this not working on a smart phone?

     

    Thank you!

  • David JotForm Support Manager
    Replied on July 15, 2014 at 7:56 PM

    I guess when you are referring to "the HTML code to my form?", you are referring to the width set on the embedded method:

    Changed width of form, HTML for IFRAME was garbage Image 1 Screenshot 30

    Once you copy it, you can change it, and it should reflect on your webpage when embedded. Regarding the mobile viewing, please add the "Mobile Responsive" widget on your form:

    1) Click on Widgets

    2) Type "Mobile Responsive"

    3) Drag and drop the widget in your form

    Changed width of form, HTML for IFRAME was garbage Image 2 Screenshot 41

    Please try that, and let us know what happens, we will be glad to assist you.

  • tsolomita
    Replied on July 16, 2014 at 7:44 AM

    Thanks, I've added the mobile widget and it comes up correctly.  However, it bounces all over the place as I attempt to enter the fields and will not allow me to submit form.  

    Also curious about the embedded HTML code.

      This is the previous code HTML code that I had on my page.  Somewhat readable to this novice.:

    <script src="//max.jotfor.ms/static/feedback2.js?3.2.2406" type="text/javascript">

    new JotformFeedback({

    formId:'41594127553154',

    base:'http://jotform.us/',

    windowTitle:'Singles Discussion Group Registration Form',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:500

    });

    </script>

    <a class="lightbox-41594127553154" style="cursor:pointer;color:blue;text-decoration:underline;">Singles Discussion Group Registration Form</a>

     

    This is the code that is currently being generated:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/41594127553154" frameborder="0" style="width:100%; height:1776px; border:none;" scrolling="no"></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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    What do you think?

  • Welvin Support Team Lead
    Replied on July 16, 2014 at 10:01 AM

    The first one is the Lightbox Embed Codes and the second one is our iFrame Embed Codes. Note that responsiveness CSS codes will not work on a lightbox-ed form like it would on a regularly embedded form or standalone form as lightboxes have a different HTML structure.

    iFrame method should work so I would advise to use it instead.

    Thanks

  • tsolomita
    Replied on July 16, 2014 at 7:16 PM

    Thanks Welvin.  However, I was using iFrame.  The code came from iFrame.  I tried it a number of times.  I tried rebooting my computer (MAC) as well to see if it was a storage issue.

    Can you look at the form?  Could my form have gotten corrupted somehow?  Or a bug in Jotform?

  • TitusN
    Replied on July 17, 2014 at 3:31 AM

    Hello,

    Looks like the webpage looks OK on Android:

    Changed width of form, HTML for IFRAME was garbage Image 1 Screenshot 40

    But not on Iphone 5 (safari browser):

    Changed width of form, HTML for IFRAME was garbage Image 2 Screenshot 51

    This is because I phones usually have a greater width pixel density than most smart phones (480px and 568px).

    The view-port you have on your web-page supports 320px wide devices:

    Changed width of form, HTML for IFRAME was garbage Image 3 Screenshot 62

    Please add two more viewports to support 480px and 568 px wide screens. This will help display properly on Iphone devices.

    I'm sorry if all this is too technical - but please let us know where you get stuck and we'll do our best to assist.

    Looking forward to your response.

  • tsolomita
    Replied on July 17, 2014 at 8:38 AM

    Thank you Titus. Unfortunately, you've gone over my head! I am using Wix's editor, which has no view-port mention in the help forums or on it's menus. Any ideas? Teresa

    (I have posted this question to Wix as well)

  • Welvin Support Team Lead
    Replied on July 17, 2014 at 10:29 AM

    Hi Teresa,

    Well, that involves modification to the source codes of your website. I'm not sure, but I think there's no way you can edit it, right?

    Please send a screenshot: http://www.jotform.com/answers/277033 of the current look of the form using your mobile device so we have the idea on what to adjust to your form. I guess we'll have to manually add the custom CSS codes to your form instead of using the mobile responsive widget.

    Thanks

  • tsolomita
    Replied on July 17, 2014 at 3:15 PM

    Hi Welvin,

     

    I submitted a screenshot earlier.  The issue is not just the alignment on the screen, but the ability to fill in the fields and press the Submit button.  The screen behaves in a way that it jumps all over the place and when you attempt to hit submit, it bounces to the top.  So a user is unable to submit this (could this be an iphone5 setting?)

     

    thanks

  • David JotForm Support
    Replied on July 17, 2014 at 5:25 PM

    Hi,

    I also tested your form on mobile (android also) and everything appeared to be working fine:

    Changed width of form, HTML for IFRAME was garbage Image 1 Screenshot 20

    I appears the whatever is running at the bottom of your page that shows a phone icon, twitter icon, and a few other things, causes the form to load a bit slow and even lags my phone a bit when scrolling the form which makes it jump around a bit.  When viewing the form itself without aside from the page, everything works perfectly though.  Adding in different view ports would help this, but unfortunately Wix source code comes out as a ton of gibberish and is very much so against allowing users to modify it and I could not find a way of doing so.

    If you could give us a bit more detail about the "jumping around" issue specific to the form, we may be able to set something up to resolve that portion.  Let us know and we will be happy to look into it further.

    Thank you for using Jotform!