Script Embed | XARA Pro X11: Forms calculating height continuously and forms are not shown on mobile devices

  • Profile Image
    dhebe
    Asked on May 15, 2017 at 01:23 AM

    Hi,

    I've created two froms and copied them into two different placeholder widgets in the backoffice of the

    XARA Pro X11 editor, each two in the standard, the tablet and the smartphone version of the page. See

    attached Screenshot-1 It shows the display of the forms correctly e.g in the tablet version of the

    page. In the backoffice view the two forms are displayed correctly in all of the 3 page sizes.

    The browsers however (Firefox, Chrome, Explorer) only show the forms in the desktp width of the page

    but not in the shrinked tablet and smartphone width. You can see this problem online on page

    http://www.jures-fachseminare.de/anmeldung_verkehrsrecht-strafrecht.htm

    So, what's wrong?

    Kind regards
    Dieter

  • Profile Image
    candy
    Answered on May 15, 2017 at 02:52 AM

    Dear Dieter,

    We're sorry for the inconvenience you have.

    I have checked your website on mobile devices. I have seen the issue. The forms are not displaying as you have described in the thread. I have added a mobile responsive widget to your form. However, it doesn't seem to be worked.

    Please find the following comment in this thread in order to make the forms mobile responsive in XARA web designer:

    "In Xara Designer Pro X10, you need to first draw a rectangle graphic in your web page to the approximate size you want the form and adjust it's web properties to convert it to a placeholder to contain the JotForm html. To do this, once you have the rectangle graphic in place, right click on the graphic to open its "Web Properties" dialogue box. Click on the "Placeholder" tab then click on the "Replace with HTML code" button and paste into the dialogue box the code you copied from JotForm. Click "OK" to go back to "Web Properties" and check the "re-generate placeholder image automatically" box. Click OK and the form will be placed and working. If part of the form is missing, play with the page boundaries and the form boundaries until you're happy. View in "Web Preview" mode to see how it behaves in various browsers"

    Moreover, you can check this thread in order to see the comment of Chris, he had the mobile responsiveness problem on Xara 11 also.

    Thanks.

  • Profile Image
    Dieter
    Answered on May 15, 2017 at 09:40 PM

    Hi Candy,

    thanks for your response. I’ve disabled the Mobile Responsive option on the Advance Designer Tool. And of course I followed the XARA procedure properly to place the code into the placeholder widget.

    The result in the browser view is:

    Only in the desktop width the forms are displayed in different browsers but not in the tablet and smartphone width.

    Internet Explorer and Chrome show the Forms correctly in the desktop width but in Firefox the lower half of the form content jumps up and down displaying at the lower end the forms headline again. The embedded JotForm code permanently tries to load all the former versions of the form.

    This seems to be the reason why the form is not loaded into the tablets and smartphone versions. Something must be wrong with the JotForm code. See the source code debugger of  http://www.jures-fachseminare.de/anmeldung_verkehrsrecht-strafrecht.htm

    Please find a solution!

  • Profile Image
    dhebe
    Answered on May 15, 2017 at 09:43 PM
    Hello,
    thanks for your response. I’ve disabled the Mobile Responsive option on the Advance Designer Tool. And of course I followed the XARA procedure properly to place the code into the placeholder widget.
    The result in the browser view is:
    ...
  • Profile Image
    liyam
    Answered on May 16, 2017 at 01:10 AM

    Hello dhebe,

    Unfortunately the screenshot you have attached is not appearing here in the forum. Can you please visit this page and upload the image here instead: https://www.jotform.com/answers/1144463

    Thanks.

  • Profile Image
    dhebe
    Answered on May 16, 2017 at 08:03 AM

    Here is the screenshot of the page. See also Firebug for page http://www.jures-fachseminare.de/anmeldung_verkehrsrecht-strafrecht.htm

  • Profile Image
    seth
    Answered on May 16, 2017 at 08:34 AM

    Hello,

    Thank you very much for the detailed explanation.

    I can replicate the issue on my side using FireFox.

    I am escalating the issue to our developers. Let them fix this one, and if the issue with the mobile version of your website continues, we will investigate it further.

    Can you please tell us when did you get this iFrame code from JotForm? Can you please share the code that you used?

    Thank you very much.

  • Profile Image
    dhebe
    Answered on May 16, 2017 at 03:34 PM

    Hi,

    I used this codes:

    Last edited at 16. May, 2:27 am CET:
    <script type="text/javascript" src="https://form.jotformeu.com/jsform/62887746821369"></script>
    used on page http://www.jures-fachseminare.de/anmeldung_verkehrsrecht-strafrecht.htm (form on the top of the page)

    Last edited at 16. May, 12:40 am CET:
    <script type="text/javascript" src="https://form.jotformeu.com/jsform/71315022377348"></script>
    used on page http://www.jures-fachseminare.de/anmeldung_familienrecht.htm (form on the top of the page)

    Last edited at 15. May:
    <script type="text/javascript" src="https://form.jotformeu.com/jsform/71318697077366"></script>
    used on the bottom of the above mentioned two pages)



  • Profile Image
    seth
    Answered on May 17, 2017 at 02:46 AM

    Can you please try using the iFrame method to embed your forms into your website:

    https://www.jotform.com/help/148-Getting-the-form-iFrame-code

    Please turn back to us with the results.

    Thank you.

  • Profile Image
    dhebe
    Answered on May 17, 2017 at 09:01 AM

    Hi,

    that's exactly what I tried last night. No succees! The form doesn't show up. So I reversed it.
    But to show you the result, now I used the iframe embedding method again for the upper form on page /anmeldung_familienrecht.htm. You can see the result on this page: No form appears!

     

  • Profile Image
    seth
    Answered on May 17, 2017 at 09:11 AM

    Hello,

    I can confirm that the form disappears after a second on the page using FireFox browser. However, it is available in Chrome.

    I add this issue to the notes that I forward our developer. We will inform you when the issue is fixed.

    Thank you very much for the details.

    Please make sure that you followed the steps on the tutorials from XARA:

    http://support.xara.com/index.php?/Knowledgebase/Article/View/810/0/responsive-web-design

    http://www.xara.com/us/web-designer/tutorials-demos/48758.246534/

    http://www.xara.com/us/web-designer/tutorials-demos/48758.246534/54051.246537/

     

    Also, please have a look at this thread. One of our users shared his experience:

    https://www.jotform.com/answers/587351

     

  • Profile Image
    dhebe
    Answered on May 17, 2017 at 09:14 AM

    Modification:

    the iframe-embedding  on page /anmeldung_fmilienrecht.htm (form on the top of teh page) works on Chrome and IE but not on Firefox!

  • Profile Image
    dhebe
    Answered on May 17, 2017 at 09:25 AM

    I followed all the required XARA steps correctly, no doubt.

    Still the firefox problem isn't solved. Not with  the normal embedding code nor with the iframe method.

  • Profile Image
    dhebe
    Answered on May 17, 2017 at 08:24 PM

    Thanks for the message. All XARA steps are correctly done. Now I'm waiting for the issue  (it concerns 3 different forms!) hopefully soon fixed by your developers.