What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to make Forms mobile responsive

    Asked by Dylan on May 14, 2015 at 02:40 PM
    I platform Weebly site and was looking for a way to make an iframe that bring in a chat page that was suitable to any screen resolution or just for Mobile devices . The link in question is as follows :
    https://widget00.mibbit.com/?settings=bd390ef6340f3fdf5c213a6dce6b2842&server=irc.simosnap.com&NoServerTab=false&nick=&channel=%23IlSole&dest=_fullscreen&promptPass=true
  • Profile Image
    JotForm Support

    Answered by Mike_G on May 14, 2015 at 02:46 PM

    To make your form mobile responsive, you may follow these instructions.

    First, you can go to Preferences and select the "Yes" option for Responsive Form.

    Or, you can also click the Designer button from the toolbar.

    Then, 

     

    You may also check this link for your reference: How-to-make-forms-Mobile-Responsive

  • Profile Image

    Answered by raul on May 14, 2015 at 07:36 PM

    User replied on the wrong thread, so I'm posting here his response:

    Answered by Dylan  (bobdylan1941@libero.it) on May 14, 2015 at 06:20 PM

    Thank you for answers and even dates soon , but my request was different: How do I create an iframe that contains a URL to the appropriate resolution of mobile devices (Phone , Smartphone , tablet , etc. ) . the url is this :

     

    https://widget00.mibbit.com/?settings=bd390ef6340f3fdf5c213a6dce6b2842&server=irc.simosnap.com&NoServerTab=false&nick=&channel=%23Il_Sole&dest=_fullscreen&promptPass=true

     

    Thank you very much.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 15, 2015 at 12:47 AM

    Hello Dylan,

    To make your embedded form mobile responsive, here are the two steps you should follow:

    #1. You should enable the mobile responsive property of your form. The steps are already explained to you by my colleague @Mike_G.

    #2. You should embed your form using its iFrame embed code. For your form to be mobile responsive, we recommend to use your form's iFrame embed code. The following guide should help you grab your form's iFrame embed code:  http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Do try the above steps and see if that solves your problem.

    Thank you! 

  • Profile Image

    Answered by Dylan  on May 17, 2015 at 09:34 AM

    Sorry , please , I'm italian man ... I would known : is it a responsive iframe ?

    <iframe frameborder="0" scrolling="no" style="width: 100%; height: 470px; border: medium none;" src="https://widget00.mibbit.com/?settings=bd390ef6340f3fdf5c213a6dce6b2842&server=irc.simosnap.com&NoServerTab=false&nick=&channel=%23Il_Sole&dest=_fullscreen&promptPass=true" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame">

    </iframe>

    Thank you very much for your work

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 17, 2015 at 09:51 AM

    In order for you to get the iFrame code of your form. Here's what you need to do: 

    Suppose you are in Edit mode. (Please see image below)

    Then, 

    Let us know if you have any further questions. Thank you.

  • Profile Image

    Answered by Dylan  on May 19, 2015 at 10:59 AM

    Sorry for the insistence and thank you for your patience . I logged into my site code that I have mentioned , but many people with smartphone , tablet and computer have trouble viewing all .

    This is the code:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://widget.mibbit.com/?settings=bd390ef6340f3fdf5c213a6dce6b2842&server=irc.simosnap.com&autoConnect=true&NoServerTab=false&nick=&channel=%23Il_Sole&dest=_fullscreen&promptPass=true" frameborder="0" style="width:100%; height:487px; 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;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>

    Now I ask:

    I wonder what is wrong with that code . Thank you very much and sorry for my ignorance. Hello

  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 19, 2015 at 12:28 PM

    Hello Dylan,

    The iFrame code what you have shared is correct iFrame code but the source url of the iFrame is different and it is not a JotForm URL. 

    What is the web page URL where you have embedded your iFrame embed code? Please share the web page URL and we will take a look.

    You make like to check the following guide on how to get your form's iFrame embed code:  http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by Dylan  on May 19, 2015 at 01:03 PM

    hello dear ashwin_d and thank uo so much. the code is here :

    http://chatilsole.weebly.com/chat.html

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 19, 2015 at 01:45 PM

    I went to your web page and it's asking me to enter a username and a password: 

    However, could you please try to embed your code using only the iFrame code and leave the script code behind. 

    Another thing, I've noticed that you have changed the "src" url of your iFrame code.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://widget.mibbit.com/?settings=bd390ef6340f3fdf5c213a6dce6b2842&server=irc.simosnap.com&autoConnect=true&NoServerTab=false&nick=&channel=%23Il_Sole&dest=_fullscreen&promptPass=true" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no"></iframe>

    I'm not sure of your purpose of why you did that, but normally, for your Form to appear using the iFrame code, the src attribute of the iFrame should remain as your form's URL.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/51335663457964" frameborder="0" style="width:100%; height:1458px; border:none;" scrolling="no"></iframe>

    Please let us know if this helps. Thank you. 

     

     

  • Profile Image

    Answered by Dylan  on May 19, 2015 at 04:02 PM
  • Profile Image
    JotForm Support

    Answered by Mike_G on May 19, 2015 at 04:27 PM

    The "scr" attribute of the iFrame code calls the form you created with JotForm. The form is the one that is mobile responsive that was just placed inside the <iframe> when called through the src attribute. An iframe(inline frame) is used to embed another document within the current HTML document. Reference: http://www.w3schools.com/tags/tag_iframe.asp

    Meaning, the iframe itself  is not the one that is mobile responsive, but the form from JotForm that was just called. So, if you replace the "src" value with a different form, <iframe> doesn't make that form mobile responsive, iFrame is more of like a container that holds documents/forms so you can embed within the current HTML.

    I hope this answers your question to why the Form: https://widget.mibbit.com/?settings=bd390ef6340f3fdf5c213a6dce6b2842&server=irc.simosnap.com&autoConnect=true&NoServerTab=false&nick=&channel=%23Il_Sole&dest=_fullscreen&promptPass=true is not becoming mobile responsive even if it is called by an iFrame from JotForm.

  • Profile Image

    Answered by Dylan  on May 28, 2015 at 07:58 AM
    Good morning,I'm trying this form on a page of my site Weebly,but not working . I need 100% width and height 98 %

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/51472774123353" frameborder="0" style="width:100%; height:98%; 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;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>

    Thank you so much

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 28, 2015 at 09:09 AM

    @Dylan

    I have moved your new concern to a different thread since it is somehow different with your initial concern posted on this thread. You may follow this link to view the new thread: http://www.jotform.com/answers/577625. Thank you.