Is it possible to load a JotForm dynamically with jQuery into a div without using iframes?

Hello,

I am trying to implement some JotForms into a webpage. Users should be able to chose an event before the correct form gets loaded. Because new events will often be added and deleted, I do not want to hard code the actual forms into my PHP files. The goal is that one can add and delete events with corresponding forms in our administration tool. In this tool it should be enough to state the source url of the JotForm.

Now my idea was to load a form into a div (

 ) after the user has clicked on the event he wants to sign up for. Using jQuery I tried to do so. This code is executed when the event is selected and the form should be loaded:

jQuery('document').ready(function(){

jQuery().getScript('http://form.jotformeu.com/jsform/50004951162343')

.done( function(script, textStatus) {

jQuery('#currentForm').html(script);

console.log(textStatus);

})

.fail(function( jqxhr, settings, exception ) {//handle failure...});

}); 

Now this is not really working. I get this error in the console:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

And afterwards some more exceptions, all of them due to this problem, and of course the form is not loaded. 

It seems that the JotForm java script code tries to call document.write() which is not allowed in that case. I looked for it in the code of the JotForm. In fact, there is only one such call:

if(this.appendTo===false){

document.write(htmlCode);

}

Is there a workaround for this problem? The best would be, if I got rid of this document.write() call somehow. However we cannot change the code generated by your form generator for each new form, since this events will be createt by non IT people in the future. So I cannot see how I could achieve that.

The only solution I found by searching in the forum and looking further in the internet was to put the form into an iframe. This work, but only with a scroll bar which doesn't look very nice in our homepage. Even if I set a seperate height for each iframe according to what space the form needs, it still goes out of it's bounds once a "This field is required" messages pops up. So the scroll bar in the iframe is unavoidable it seems to me.

After hours trying to solve it by myself, I ran out of ideas. I would apreciate any inputs on how I might solve this problem.

/Jakob

Hi JakobM,

Our support team would be more than happy to offer some assistance. We have a lot of options to choose from when embedding our forms on different platforms. Our forms use multiple different Javascript files that would affect your script in the parent site. Sorry to say but the best option to explore in this situation would be iFrame since it separates the code from the two sources.

Since the scroll bar would be the issue when iFrame is being used when embedding your form, I would recommend that you use the script below.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/XXXXXXXXXXXX" frameborder="0" style="width:100%; height:3256px; border:none;" scrolling="no"></iframe>

src= you should change this to the URL of your form.
scrolling="no" - This is ensures that the scroll bar will not appear despite the change in length of our form.

With all this in mind, you have to ensure that the space allotted for the form is adequate enough to display all the forms contents. Do give this a try and let us know how it turns out. Looking forward to your response.

Cheers!
Sean

Thank you very much for your help. 

Yes, of course I can dismiss the scroll bar like this in the iframe. The only problem there is the height. Now, your solution was to just write in a height of 3256px. Well, this certanly assures that the whole form stays visible, but I always have a huge empty part of the iframe. The background of the website is adapted to the height of the div in which the iframe is. So like this I just get a way too big site, which usually is adapted to the current needs. When I tested how it look when I just hard code the form into the page, then everything look great and the height of the website is always adapted to the current length of the form. However that works only without the iframe.

So what I need to do, is to tell the iframe to always have the size of the form within it. But the height must be set to a absoulte value when creating the iframe and can't be changed afterwards. 

Now I would accept it if I had to save a corresponding height to each form somewhere and then I make the size of the iframe dependen on this value. But then I have the problem that the height of the form may change while the height of the iframe always stays the same.

So that doesn not really work, either. But you say that I can not do that without an iframe? Because if so, I will have to find a way to adjust the height of the iframe which I haven not found, yet. At least nothing that supports crossing domains. If I find a way I will post my solution here I guess.

Hello,

I would like to take a look at the webpage you are working on so I can do some test to see if I can help out further. Since the spacing is now the issue with our solution maybe further adjustments can be made to both the form and iFrame to reduce the length of the page overall. I am not clear when you stated "The background of the website is adapted to the height of the div in which the iframe is." Can you provide the URL for both the form and the webpage its embedded so we can see exactly what the issue is? I am looking forward to your response. 


Cheers!
Sean

Sure, here is the link to the test website: http://php54.pfadiherisau.ch/anmeldungen.php

The form: http://form.jotformeu.com/form/50004951162343

The website is pretty old and I know a lot of stuff on it isn't really done in a good style, so maybe the problem is because of this. Also the guy who coded the website is not working on it anymore, but I think I know most of it pretty good by now.

When you go the the url above, you'll currently see one link called Anmeldeformular, by clicking it the form appears. I've added a function which adapts the size of the iframe to the onload event of the iframe, however it's always called to early and the height is therefore wrong after loading. To call the function again I've added the fix height button, you can click it and the size should be right afterwards. But still, when you click in the field address for instance, and leave it empty, the "field is required" message appears anf the height is wrong again, unless you hit the button fix height again.

Is there a way to add the function to something like a "onchange" event?

At the moment I have the JotForm script implementet in a seperate file also saved on the server, like this it's not corssing domains anymore and I have acces to the iframe properties, likes it's height.

@JakobM

Thanks for your reply.

First, we have several type of error warning style which includes static one that does not affect or adjust the form length once it's shown.

To change your error warning style, 

1. Load your form into the Designer

2. While on the Color Scheme section on the left panel, check Simulate Error State and click on its cog icon to display more options.

3. Click the first error style to display more and then select the 3rd one.

-------

Also, how about using the entire form source code? I'm not sure if this fits on your requirement but you can place all the form scripts within your page and then write a show and hide function to display the form? Something like the following,

jQuery("div#formContainer").slideDown(); //show the form

Where formContainer div element ID holds the HTML form with a default style "display:none".

Or perhaps you can stay with using the iframe. It's just not possible with using the script since the execution of the form script will be blocked by doc write.

Hope this helps. Please let us know should you have further questions.

Thank you!

Thank you for taking the time providing us with update on the status. 

On behalf of my colleague who had provided you with assistance, you are welcome.

Contact us anytime should there be more we can assist you with.

Thanks.