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

    iFrame embedded form on Xara gets cut off when previewed

    Asked by appchild on February 05, 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.

    Screenshot
    JotForm xara phone number preview
  • Profile Image
    JotForm Support

    Answered by david on February 05, 2016 at 02:00 PM

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

     <iframe id="JotFormIFrame" onload="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.

  • Profile Image

    Answered by appchild on February 08, 2016 at 09: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
    ...
  • Profile Image

    Answered by Ben on February 08, 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

  • Profile Image

    Answered by appchild on February 08, 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
    ...
  • Profile Image
    JotForm Support

    Answered by david on February 08, 2016 at 01:02 PM

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

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

  • Profile Image

    Answered by appchild on February 09, 2016 at 01: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
    ...
  • Profile Image

    Answered by Ben on February 09, 2016 at 02: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

     

  • Profile Image

    Answered by appchild on February 10, 2016 at 06: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

  • Profile Image

    Answered by Carina on February 10, 2016 at 10:17 AM

    You can try instead:

    1. Copy the Xara publishing code:

    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:

    Let us know if we can assist you further.

  • Profile Image

    Answered by appchild 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

     

  • Profile Image
    JotForm Support

    Answered by david 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.