iFrame embedded form on Xara gets cut off when previewed

  • appchild
    Asked on February 5, 2016 at 12:53 PM

    My form looks ok in JotForm preview but when I embed it on my site using Xara iframe it's truncated - the area from Phone number and below, including the Submit button are cut off.

    Jotform Thread 765706 Screenshot
  • David JotForm Support
    Replied on February 5, 2016 at 2:00 PM

    At the beginning of your iFrame code, there is a height attribute:

     <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60354524274352" frameborder="0" style="width:100%; height:1000px; border:none;" scrolling="no"> </iframe>

    Increase the value of the height until the fully form is shown.

    If it still does not display correctly, let us know the URL of the page your form is embedded to and we will be happy to have a look.

  • appchild
    Replied on February 8, 2016 at 9:46 AM

    Hi David,
    How do I edit the code? When I display the code by going Edit
    Form/Publish/Platforms/Xara, the code is displayed but there’s no way to
    edit it.
    Paul
    ...
  • Ben
    Replied on February 8, 2016 at 10:23 AM

    You should make the same change by re-entering the code as you did originally. Instead of just copy pasting the code as you did when you got it from your JotForm account, you should first add the height property under the style attribute as shown by my colleague above.

    You can check more on our Xara guide: Adding forms to Xara 6

  • appchild
    Replied on February 8, 2016 at 11:46 AM

    Hi Ben,
    I'm so sorry but I don't understand your reply.  I haven't entered any
    code originally, or copied and pasted anything.  The method I adopted to
    get my form on to my webpage was to start from my Xara webpage and select
    the JotForm option. This opens my JotForm account where I select the form.
    I then click on Edit Form and select Publish and then Platforms/Xara. This
    then presents me with the required code but there's no way I can see to
    edit it.  The only option is to select it, copy it (I just do a Control+C
    ...
  • David JotForm Support
    Replied on February 8, 2016 at 1:02 PM

    The code you are copying is the iFrame code.  When you paste the code, you will see the height attribute:

    iFrame embedded form on Xara gets cut off when previewed Image 1 Screenshot 20

    After you paste the code to Xara, change the value for the height before you save your changes.

  • appchild
    Replied on February 9, 2016 at 1:46 PM

    Hi Ben,
    Not had any response so thought it best to send this again in case it got
    missed.
    Hope you can help.
    Regards
    Paul
    ...
  • Ben
    Replied on February 9, 2016 at 2:58 PM

    Hi Paul.

    Actually, it seems that you did not get an email of the response rather than it not being made. I see that there is a nice reply by my colleague on the height parameter above.

    Please do check it out by going to the thread directly.

    This is the link to the thread: http://www.jotform.com/answers/765706

     

  • appchild
    Replied on February 10, 2016 at 6:43 AM

    David's reply says 'after you paste the code to Xara, change the value for the height before you save your changes'.  This is the bit I don't understand - there is no means to be able to change the height code because the JotForm screen showing the code (as in the screenshot in his reply) disappears as soon as I click on 'Insert'.  There's therefore nothing there to change.  I assume that by'paste the code to Xara' you mean 'Insert' which is, I thought, the correct method to embed the code into my Xara webpage.  The method I use is as per my message of February 08, 2016 at 11:46 AM.  If this method isn't correct then please advise what I am doing wrong / how to do it right.

    As things stand, I still have a truncated form.

    Hope you can help

    Thanks

    Paul

  • Carina
    Replied on February 10, 2016 at 10:17 AM

    You can try instead:

    1. Copy the Xara publishing code:

    iFrame embedded form on Xara gets cut off when previewed Image 1 Screenshot 30

    2. Paste the code on a text editor (like notepad) and edit the height value

    3. Copy and paste the edited code on your Xara website, as stated in the publishing window:

    iFrame embedded form on Xara gets cut off when previewed Image 2 Screenshot 41

    Let us know if we can assist you further.

  • appchild
    Replied on February 10, 2016 at 10:49 AM

    Thanks for your prompt reply, Carina, but I feel like I'm going one step forward and then . . . one step back!

    I can of course do everything you suggest up to copying and editing the code in Notepad, but then what do I do with the edited code?  Presumably I need to somehow enter it back into JotForm . . . but how?  The Publish screen (above) allows me to copy but not to paste. If I don't/can't enter it back into JotForm and simply click on 'Insert' then all I have done is to once again enter the original (unedited) code into Xara resulting in the truncated form.

    Hope you can help,

    Paul

     

  • David JotForm Support
    Replied on February 10, 2016 at 12:01 PM

    You would copy the edited code from the note pad and paste that to Xara instead of using the insert function.

    Follow these steps:

    Click on the code to select it, then copy it.  Paste it to notepad and make the edit.  Then go into the Selector Tool in Web Designer 6 and paste. An image of your form will appear on your page. Preview the page to test the working form.

    For yours, you would simply modify the code in notepad prior to pasting it to Xara.  You do not need to enter the code back in JotForm and do not need to use the insert function.