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

  • Profile Image
    jmuskus
    Asked 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
    Kiran
    Answered 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
    jmuskus
    Answered 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
    Ben
    Answered 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
    jmuskus
    Answered 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
    jmuskus
    Answered 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
    Ben
    Answered 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
    jmuskus
    Answered 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
    Kiran
    Answered 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.