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

    The border of JotForm is not displaying correctly on a WordPress embedded page

    Asked by jmuskus on September 25, 2014 at 12:09 PM
    Also the bottom border is visible but is black. If you then zoom the page out a little the bottom border disappears again! (images 2 and 3)
  • Profile Image
    JotForm Support

    Answered by Kiran on September 25, 2014 at 12:16 PM

    While viewing the JotForm with its original link (http://www.jotformeu.com/form/42535606641352) the border is displayed correctly. It would be helpful for us to investigate on the border display issue if the JotForm embedded webpage access is provided.

    We will wait for your response. Thank you.

  • Profile Image

    Answered by jmuskus on September 25, 2014 at 12:39 PM

    Hi, I will take the site off coming soon mode, it is www.genevamountaintransfers.com

    Thanks!

  • Profile Image

    Answered by Ben on September 25, 2014 at 02:03 PM

    Hi,

    I see what you mean, although I am not sure that too many people use the zoom feature quite so often.

    To rectify this issue what I would suggest is to add this into your iframe code

    height:640px; min-height:640px;

    This should make it a bit larger than it needs space, but if they zoom in or zoom out it should allow you to have that form looking properly :)

    To add it you should use this code:

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

    Do let me know if this works for you.

    Best Regards,
    Ben

  • Profile Image

    Answered by jmuskus on September 25, 2014 at 02:11 PM

    Hi,

    It's not that I am worried about people zooming, more that it is not visible in Firefox at all, although sometimes it will appear in black and then I might refresh the page and it'll disappear completely again! I am not competent enough to edit the html code myself unfortunately. Is there definitely no changes I can make in my CSS that will rectify the issue?

  • Profile Image

    Answered by jmuskus on September 25, 2014 at 02:19 PM

    Am actually waiting to hear back from your colleagues on this thread http://www.jotform.com/answers/428868-Creating-a-quick-quote-jotform but am getting my current form ready as a back up in case they are not able to create what I am after. I seem to have everything perfect apart from this one little problem, so frustrating! Thank you very much for your efforts!

  • Profile Image

    Answered by Ben on September 25, 2014 at 03:37 PM

    Hi,

    Can you please try this CSS code?

    .form-all
    {
      margin-top: -4px;
    }

    This would be your complete CSS with the suggested update added to it:

    @font-face { font-family: 'Carrois Gothic'; font-style: normal; font-weight: 400; src: local('Carrois Gothic'), local('CarroisGothic-Regular'), url(http://fonts.gstatic.com/s/carroisgothic/v4/GCgb7bssGpwp7V5ynxmWy2IHn70NeZKJ0uStDo7Dza8.woff) format('woff'); }
    .form-all {
    font-family: 'Carrois Gothic';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    }
    .form-required {
    color: black !important;
    }.form-header-group{
    width: 100%;
    background-color:#156887;
    }
    .form-all {
    background-color: none;
    border-left: solid;
    border-right: solid;
    border-bottom: solid !important;
    border-color: #156887;
    border-bottom-color: #156887;
      margin-top: -4px;
    }
    .form-line {
    padding-left: 15px; padding-right: 0px;
    }
    .form-buttons-wrapper { margin-bottom: 10px;
    }
    .form-header-group { margin-left: 0px; padding-left: 0px; font-size: 20px;
    }
    .form-header { margin: 0px; padding-left: 18px;
    }
    .form-header-group
    {
    border-bottom: none;
    }
    .form-header{color: #f3f3f3 !important;}

    Do let me know if this works for you.

    Best Regards,
    Ben

  • Profile Image

    Answered by jmuskus on September 25, 2014 at 03:59 PM

    That didn't quite work, but then I tried changing this:

    .form-all {
    background-color: none;
    border-left: solid;
    border-right: solid;
    border-bottom: solid !important;
    border-color: #156887;
    border-bottom-color: #156887;
      margin-top: -4px;
    }

    To this:

    .form-all {

    background-color: none;

    border: solid;

    border-color: #156887;

    border-bottom-color: #156887;

    margin-top: -20px;

    }

    And seems to have worked!

  • Profile Image
    JotForm Support

    Answered by Kiran on September 25, 2014 at 05:01 PM

    Glad to know that the issue is resolved now for you.

    Please do not hesitate to get in touch with us if you have any other questions. 

    Thank you for using JotForm.