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

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)

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.

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

Thanks!

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" onDISABLEDload="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

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?

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!

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

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!

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.