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.


  • Profile Image

    CSS IFrame Required Field Height

    Asked by gruposte on July 04, 2013 at 06:48 PM

    the message:

    "Incomplete values!"

    my code:

    "< script type="text/javascript" src="//form.jotform.co/jsform/30445783746866"></ script>"

    the message appears when i leave in blank a required input.

    Page URL:
    http://gruposte.com/ci/contacto

    Screenshot
    message JotForm jsform
  • Profile Image

    Answered by pinoytech on July 04, 2013 at 07:08 PM

    Hi,

    Your form seems to be working fine on my end upon checking. Please take a look at this: http://www.screencast.com/t/wbgEXTKk

    Can you please try it again if the issue still persist? But, please make sure to fill on all required fields.

    Thank you!

  • Profile Image

    Answered by gruposte on July 04, 2013 at 08:16 PM

    Yes, you are correct. The form works perfectly if you fill in all the required fields, however, the error appears when you do not fill in a required field. I am attaching an image of the message that should be appearing instead of the error that I mentioned previously.

  • Profile Image
    JotForm Support

    Answered by abajan on July 04, 2013 at 09:20 PM

    @gruposte

    I see what you mean. These types of issues are usually caused by conflicts between pre-existing scripts on the page and those of the form. Replacing the form code with its iFrame equivalent should fix the problem. Please let us know if it does.

    Thanks

  • Profile Image

    Answered by gruposte on July 05, 2013 at 12:39 PM

    @abajan

    The problem has been solved as you mentioned. But now we have an issue the frame does not grow verticaly when the css for the required inputs are shown on the screen.

    here is the link so you can check it out: http://gruposte.com/ci/contacto

    thank you for all your help =)

     

  • Profile Image

    Answered by jefreylandicho on July 05, 2013 at 01:26 PM

    Please try setting your form or Iframe embed code height to 709px.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.co/form/30445783746866" frameborder="0" style="width: 100%; height: 709px; border: none;" scrolling="no"></iframe>

  • Profile Image

    Answered by gruposte on July 05, 2013 at 01:56 PM

    @jefreylandicho 

    Thank you but the problem persists, the javascript changes the height value automatically in execution time of 519px all the time.

    If i put a div e.i.

    < div id="form">
    <i frame>code jotform</ i frame>
    <script >code jotform</script > 

    </ div>

    and in css:

    #form {height: 709px;}

    the iframe looks like the image:

  • Profile Image

    Answered by jefreylandicho on July 05, 2013 at 02:10 PM

    You do not need to enclose the iframe embed code inside a DIV tag. Try removing the script and use the embed code below.

    <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.co/form/30445783746866" frameborder="0" style="width: 100%; height: 709px; border: none;" scrolling="no"></iframe>

    or

    <iframe src="//form.jotform.co/form/30445783746866" frameborder="0" style="width: 100%; height: 709px; border: none;" scrolling="no"></iframe>

  • Profile Image

    Answered by gruposte on July 05, 2013 at 09:46 PM

    @jefreylandicho

    Thank you so much, I am aware that I am not supposed to add the div, I simply added it to show you up to what point the iframe would appear. Since the beginning I had the height set to 709px in my code, but the script would modify it automatically.

    Nevertheless, you gave me the solution in your response, the solution was to eliminate the script that jotform gave me; I removed it and now everything is perfectly visible with the 709px height.

    The problem is that this is a temporary solution, because I do not want the height to be a fixed height. I want it to measure 519px when it opens, but for it to extend to 709px when the required fields are not filled in. This is so that there will not be a white space between the form and the footer.  

    I have already tried with min-height and max-height, but this does not work. I do not know what other way I can do this.

    It would be for the iframe to grow dynamically, I believe this is what the script was for but it does not work :(

  • Profile Image
    JotForm Support

    Answered by abajan on July 06, 2013 at 06:30 AM

    @gruposte

    Although dynamically changing the height of an iFrame according to its contents is possible, it would only work if the parent and child frame are on the same domain. Perhaps the best solution for the time being would be to just change scrolling="no" to scrolling="yes". That way, when the error messages expand the height, users would be able to scroll down to see the bottom of the form. (The iFrame code on your page is not what would have been provided by the Embed Form Wizard. First, get the code from the wizard and then change the scrolling value.)

    Thanks