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.
Pre-load form for feedback button or lightbox.Asked by guisasso on June 28, 2013 at 10:41 AM
Both design are great. Unfortunatelly, jotform first shows fields and then hides them, which in a form with many fields is visible.
Using either way to display my form first shows all fields then hides them, which obviously does not look good. I was wondering how can I pre-load the form, so when the user clicks on either one, he does not see all the fields.
I am not sure if it possible to preload the form as this is usually use for images and miight causes some conflict with the scripting. If you do not want to show the entire field at the same time though, you could just use an overflow which will create a scrollbar then resize the size the window of your form.
If you could share us the link to where you have embedded the form, we would be able to assist you further. We are looking forward hearing your response.
Well if you take a look at my form, only about 6 fields are supposed to be displayed at first. The whole reason for using this form is that depending on the form of contact, I need to gather more information from the customer.
I have embedded the code to a page in a hidden div, which works fine. The problem there is that I want to load the form after page load (I'm still trying to find a way of doing this), because the form is too big. But in regards to that error of displaying fields, it won't matter since the div is hidden.
If you use my form and preview it with the light box, pop up or feedback, you will see the error.
Let us know your thoughts.
Ok so, forgetting about lightbox and feedback for a second, I was able to load the iframe with jquery fadein, which looks great.
Now I ran into another problem, when other fields are displayed, the iframe does not resize itself, so unless I have the ugly scroll bars, this is not functional.
If you can help me here, I would appreciate it.
This works great, as every time a hidden field is displayed, it resizes the div I place it in, but, I want to be able to load this after page load. I found a couple of scripts but am so far unable to make this work.
Can you please share with us the webpage URL to where the current codes are placed so we can check? I'm clueless on how you've added those codes.
The codes that I have provided should auto adjust the form height when all fields are visible.
I have modified the codes and added 5 seconds delay. Find it here: http://pastebin.com/MwALxPc1
You can also inject a custom CSS codes to the form to style the scrollbars of the form. Example:
Welvin, your code doesn't attempt to solve my problem.
The problem is loading the form, as I stated before, because of its length, all fields are visible before hidden, which is noticeable.
This shows jquerys fadein to disguise load. 2 seconds.
This displays the form in a iframe with fancybox. Only displayed after loaded on click.
Unfortunately you can't make the iframe height dynamic. Iframe has fixed height and that's how it work. You may try the default script embed code instead since it has the function to automatically adjust it's length.
This one looks great: http://fiddle.jshell.net/guisasso/BJNYr/776/show/
This fade effect one if excellent, http://fiddle.jshell.net/guisasso/3muGp/2/show/, how about replacing this with script embed code? I'm afraid this would cause conflict which results to revealing all the hiddens fields and required validation malfunction since this uses jQuery but you can kill conflicts with jQuery.noConflict(). Avoiding Conflicts with Other Libraries | jQuery Learning Center
Let us know if you have further questions. Thanks!
EltonCris, I was able to get the form to load pretty fast, using gzip.
I added the source code to my html file, that made it huge, 180kb. With gzip, the compression was so good that the file went down to 20kb.
I got everything ready to go, should start usin the form next week.
Thanks for the help.