Thank you message not visible in Internet Explorer 8 (IE8)

baldwinandlyons

Asked on June 19, 2015 at 10:21 AM

Hello,

I recently did some testing of our embedded forms in IE8. The forms themselves work fine, but once the form is submitted, the custom confirmation message is not visible. You can see the top few pixels of the letters, but the container is not tall enough to show all of it. See attached screenshot.

The confirmation message displays properly in IE9 and above.

How can we make the confirmation message appear visibly in IE8?

Thanks.

Page URL: https://www.protectiveinsurance.com/loss-prevention/services-programs/driver-recognition
Charlie

Replied on June 19, 2015 at 11:42 AM

Upon checking your website, I see that you are using the default embed code which uses the <script> tag, it might be conflicting with your website's code when read in IE 8.

Could you try using the iFrame embed code and see if that will work for your website?

We'll wait for your response.

Thank you.
baldwinandlyons

Replied on June 26, 2015 at 12:47 PM

Hi Charlie,

I don't think we can use the iFrame method on our website. The website is responsive, so we would have to make the iFrame very tall to accommodate the one-column view of the form. Having very tall iFrames for all our forms would make the desktop version of the site look awkward.

I tested using the iFrame method with this form today, and on the second page of the form, several of the fields were not visible in the iFrame using the default code provided by Jotform. We would prefer not to use the iFrame method.

Thanks,

Julia
Charlie

Replied on June 26, 2015 at 2:23 PM

Hi Julia,

I'm thinking two ways we can try to resolve this.

Method 1: Try using a jQuery noConflict using your default <script> embed code. See if that prevents any code conflict on the resizing of the thank you page.

Method 2: Use the iFrame embed code but have a specific styling for the mobile responsive, here's an example.

@media screen and (min-width: 100px) and (max-width: 720px) {

#iFrameIDHere {

height: 500px !important;

}

}

@media screen and (min-width: 721px) {

#iFrameIDHere {

height: 700px !important;

}

}

Depending on the size of the current screen, you can set the height of the iFrame, although you will still have some extra spaces. Make sure though that you add it inside the <head> tag of your website.

If the above method doesn't work, let us know and we will investigate further, there might be a need to escalate it to our developers if other solutions failed.

We'll wait for your response. I hope that helps.
baldwinandlyons

Replied on July 1, 2015 at 5:31 PM

Hi Charlie,

Is this the right way to use a JavaScript noConflict with the default embed code?

<script type="text/javascript" src="https://secure.jotformpro.com/jsform/50845636711962">$.noConflict();</script>

If so, it did not fix the issue.

We have many forms, so we would prefer not to add media queries to all of them. That would be quite time-consuming and difficult to manage. We would have to update the media queries every time we added fields to the forms, and it would make adding a form to our website a developer task rather than something business users could do.
Elton Support Team Lead

Replied on July 1, 2015 at 10:22 PM

Try it with this.

<script type="text/javascript">jQuery.noConflict();</script>

<script type="text/javascript" src="https://secure.jotformpro.com/jsform/50845636711962"></script>

If that doesn't make any difference, then try the following using $ alias.

<script type="text/javascript">$.noConflict();</script>

<script type="text/javascript" src="https://secure.jotformpro.com/jsform/50845636711962"></script>

By the way, I am not quite sure if this is some kind of script conflict since the form functionality is working just fine on your page. I think this is most likely a browser compatibility or styling issue on IE8. Stand alone form works perfectly on IE8, so I would suggest to try embedding the form using its source code. This works similarly with script embed so this might as well help. http://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

We'll await your updates.
baldwinandlyons

Replied on July 6, 2015 at 1:04 PM

I tried using both versions of the noConflict code and it did not help.

We would prefer not to embed using the full source code because every time we add/remove a field, we would have to re-embed the form. We have a lot of forms, so that would become a lot to deal with.

Also, just to test, I tried embedding this form with the iframe embed code (even though that is not our preference, as described above). It did not resolve the issue. Only the top few pixels of the confirmation message were visible in IE8, even though the iframe was specified to be 2117px tall.
Charlie

Replied on July 6, 2015 at 1:47 PM

Apologies for the inconvenience. It seems like it's related to how IE8 is reading the back end code.

Could you try this one:

In your "Thank You" message, open the HTML editor and wrapped it with a <div> element with a style attribute of min-height.

1. In the "Thank You" page wizard, click the "HTML" icon to open the editor.

2. Here, wrap message in a <div> element. Here's mine:

<div style="min-height: 300px !important">

....Content

</div>

See if that should work, if not, we'll try to investigate it deeper and at the same time forward it to our developers to have it checked. I also sent a test submission, you might have received an email about it.
baldwinandlyons

Replied on July 7, 2015 at 10:12 AM

That solved it! This is a manageable solution for us. Thank you.
Charlie

Replied on July 7, 2015 at 10:21 AM

Great to hear that it worked. If you needed any assistance again, please do not hesitate to contact us anytime.

Cheers!