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

    WWW and FORM links showing different versions of the form

    Asked by Hilleke on October 28, 2015 at 09:28 AM

    Remove Grey border around form

    Hi Jotform,

    I have made an excellent form but when it shows up in my iframe there is a 100 pc grey border at left and right side and a grey border at app. 50 px above.

    How do I get rid of that ?

    Best wiches

    Bent Hilleke

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 28, 2015 at 11:15 AM

    Hi Bent,

     

    To remove the border on your form, please try to inject this custom CSS code in your form:

    .form-all {

        border: none !important;

        box-shadow: none !important;

    }

     

    To inject custom CSS code in your form, you can check this article: How to Inject Custom CSS Codes.

     

    Do let us know if you need further assistance.
    Regards.

  • Profile Image

    Answered by Hilleke on October 28, 2015 at 12:45 PM
    Hi Chriistian,
    I have tried to insert your code but unfortunately nothing happens.
    If you use the following link:
    http://www.jotform.com//?formID=53002554757353#
    You will get to my form and you will se, that I still has the grey border.
    Best regards,
    Bent Hilleke
    CEO
    Nykoebingvej 242
    DK-4800 Nykoebing F.
    T: +45 20 21 22 24
    M: bent@hilleke.dk
    ...
  • Profile Image
    JotForm Support

    Answered by Mike on October 28, 2015 at 04:10 PM

    We have re-added the CSS to your form and form should be fine now.

    Please use the next form link:

    https://form.jotformeu.com/form/53002554757353

    If you need any further assistance, please let us know.

  • Profile Image

    Answered by Hilleke on October 29, 2015 at 04:45 AM
    Hi Mike,
    Unfortunately I don’t think it is working as it should.
    In Jotform it looks very good, but when I place it in a iframe in my Everweb file it still needs to be in a iframe which are 500px.
    If you look at the attached two photos you will see, that it shows fine in the Everweb file when the iframe is at 500px. But when I set at 300px all turns pretty confused.
    Hope you can fix it.
    Have a nice day.
    Best regards,
    Bent Hilleke
    CEO
    Nykoebingvej 242
    DK-4800 Nykoebing F.
    T: +45 20 21 22 24
    M: bent@hilleke.dk
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on October 29, 2015 at 06:16 AM

    I see. So you are embedding the form. Is it the width or the height that needs to be 500px?

    You can try to re-embed the iFrame code without the script. Please see below:

     

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

     

    Change the width and/or height as desired.

     

    If it still doesn't work, can you share to us the link of the page where you are embedding the form?

     

    Also, your screenshots cannot be seen in this thread. To properly attach a screenshot here, open the thread (do not reply directly to the email as the attached screenshot in the email will not be attached to thread). Then, you can use the 'attach image' icon as below.

     

    Regards.

  • Profile Image

    Answered by Hilleke on October 29, 2015 at 06:45 AM
    Hi Mike,
    I have tried your iframe code but unfortunately with no better result.
    You can see the result at:
    http://www.folkets-hus.dk/smoerrebroed.html
    Best regards,
    Bent Hilleke
    CEO
    Nykoebingvej 242
    DK-4800 Nykoebing F.
    T: +45 20 21 22 24
    M: bent@hilleke.dk
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on October 29, 2015 at 08:26 AM

    Hi,

     

    I looked at your link and see that iFrame needs to have at least 400px width and 800px height. Please try the iFrame code below.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/53002554757353" frameborder="0" style="width:400px; height:800px; border:none;" scrolling="no"> </iframe>

    Unfortunately, increasing the width and height of the iFrame will cause it to overflow your container. Please see below.

     

    You need to increase the width and height first of the container to contain the form.

     

    Do let us know if you need further assistance.

  • Profile Image

    Answered by Hilleke on October 29, 2015 at 10:45 AM
    Hi,
    It is simply not working.
    Is there any other way than a iframe to put til jot form file at my website ?
    Med venlig hilsen
    Bent Hilleke
    Nykøbingvej 242
    4800 Nykøbing F.
    T: 20 21 22 24
    M: bent@hilleke.dk
    ...
  • Profile Image

    Answered by Ben on October 29, 2015 at 02:07 PM

    To fix that Bent, please do add the following CSS code to your form:

    @media screen and (max-width: 360px) {
      li[data-type="control_number"] { width: 100%; }
      li[data-type="control_number"] > label { max-width: 80%; }
      li[data-type="control_number"] > div.form-input { max-width: 20% !important; }
    }

    My suggestion is to add the code at the very bottom - after all other CSS code in there.

    You can see how to get to the field where you should add it by following the steps here: Inject Custom CSS Codes

    It is customized for the width that you wanted to have your form in.

    Based on what I saw, the height of your iframe should be 750px (when on 300px width) to be fully shown, but it will jump slightly outside of the window at that height, so increasing the entire segment or setting your form at slightly lower height should look properly.

    This is how it will look after adding the CSS code above:

    Do of course let us know how it goes.

  • Profile Image

    Answered by Hilleke on November 02, 2015 at 10:45 AM
    Hi Ben,
    Now everything seems to works fine - Thank You.
    I will now take a much closer look at Jotform and all the possibilities.
    Best regards,
    Bent Hilleke
    CEO
    Nykoebingvej 242
    DK-4800 Nykoebing F.
    T: +45 20 21 22 24
    M: bent@hilleke.dk
    ...
  • Profile Image

    Answered by Ben on November 02, 2015 at 12:24 PM

    Great to hear that Bent.

    Please do let us know if you happen to have any other issues or if you have any questions and we would be happy to assist with the same :)