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

    Limit the amount of spaces at the end of the form

    Asked by glandoreghyc on November 06, 2014 at 10:20 AM
    Sorry to be a pain, but do you know how i can limit the amount of spaces inserted by JotFrom at the end of the Form please?
    space on jotform free space blank space
  • Profile Image
    JotForm Support

    Answered by Welvin on November 06, 2014 at 10:40 AM

    Hi,

    I think you mean, the bottom spacing between the form and the footer? If so, you can adjust the form iFrame height until you'll see the desired result OR, re-embed your form using the same iFrame method: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code so you'll get the original codes with its current height.

    When I say iFrame height, I mean this:

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 06, 2014 at 12:31 PM

    Hello,

     

    Does not work for me, is it something to do with the Responsive Option?

    Below the code you referred to there is another reference to Height see below:-

    "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Is this code part of the Responsive feature?

     

    Thx

     

    John

  • Profile Image

    Answered by Ben on November 06, 2014 at 01:49 PM

    Hi John,

    You could say that the code is part of the old responsive feature. What it does is finds the end of your jotform and sets the height of the iframe accordingly, so that no part of it gets cut off from it.

    Now what I would suggest is next:

    <iframe frameborder="0" scrolling="no" style="width: 100%; height: 1057px; border: medium none;" src="//form.jotformeu.com/form/42944203808354" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = (args[1]-209) + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    This will cut the 209px padding that was added to the bottom of the jotform, but do test and let us know if that works the way you want it.

    Best Regards,
    Ben

  • Profile Image

    Answered by glandoreghyc on November 06, 2014 at 02:37 PM

    Hello,

     

    The solution seems to work, but i have a few questions.

    If Jot form are adding padding why can't there be a simple option to remove it?

     

    You mention "the old Responsive feature", how do i get hold of the new Responsive feature?

     

    Thanks

     

    John

     

  • Profile Image

    Answered by Ben on November 06, 2014 at 03:45 PM

    Hi John,

    I am glad to hear that it is working properly for you now.

    You mention "the old Responsive feature", how do i get hold of the new Responsive feature?

    I only mentioned it as 'old' since it was here longer. It is a tested and proven method that works (that javascript code that follows the iframe element). I will give you the answer about new responsive feature within the answer to your other question.

    If Jot form are adding padding why can't there be a simple option to remove it?

    Yes, you are right, but that is currently added by our Form Designer (Beta) as a new responsive feature. As it is still in beta there are bound to be some issues with it which our developers are working on as we speak, to find what works best for all people.

    To conclude, I would use both New Form Designer as well as the code that was already available. They all work great and if there is any need to make some final tweaks, just let us know and we will be happy to help.

    Best Regards,
    Ben

  • Profile Image

    Answered by glandoreghyc on November 06, 2014 at 05:22 PM

    OK, Thanks,

    One final question, i have the Responsive Form option selected in the Beta Form Designer, but i note it is also selected in the "old" standard From design page, which one takes priority? should i only have one selected?

     

    Thx

     

    John

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 06, 2014 at 05:57 PM

    If form designer responsive option works for you, then choose that option, as far as I know, there is no priority, but having more than one option enabled for responsiveness could cause a conflict, so my recommendation is to keep the one that works best for you.

  • Profile Image

    Answered by glandoreghyc on November 06, 2014 at 06:30 PM

    OK, Thanks I have used the Form Designer (Beta) selection and disabled the other.

     

    John

  • Profile Image

    Answered by glandoreghyc on November 09, 2014 at 05:54 AM

    Hello,

     

    Please refer to Thread  

    http://www.jotformeu.com/answers/452259-Considerable-spacing-around-the-heading-of-an-Embedded-Form?entrymessage=10732640770

    As the situation with my Form has deteriorated and i have no idea why.

     

    Thx

     

    John

  • Profile Image

    Answered by Shadae on November 09, 2014 at 08:46 AM

    Hi John,

    I am seeing where the issue regarding the change in your form is being addressed at this thread: http://www.jotformeu.com/answers/452259

    Is it that you are experiencing a different issue that what has been outlined in that thread?

    We await your response to better assist you.

    Thank you

  • Profile Image

    Answered by glandoreghyc on November 09, 2014 at 01:27 PM

    See my last response to thread:-

     

    http://www.jotformeu.com/answers/452259-Considerable-spacing-around-the-heading-of-an-Embedded-Form?entrymessage=10732640770

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 09, 2014 at 10:27 PM

    Hello glandoreghyc,

    I did check the thread you have shared. We will answer you on that thread.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Welvin on November 10, 2014 at 08:17 AM

    With regards to this. Well, the iframe has a fixed height attribute which I think the one who controls the spacing at the bottom. Also, because you have a field which is hidden by default per conditional logic settings. 

    Please try to duplicate this page: http://www.reenoserve.com/ghyc/Forms/index.html and replace the iframe embed codes with our Javascript codes:

    Just for troubleshooting purposes. To check if no new issues would appear and to fix the spacing at the bottom since the Javascript method has a dynamic height.

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 09:19 AM

    Welvin,

     

    The first Screen Shot is with iFrame embedded code

     

    Here is the second Screen shot with non iFrame embedded code

     

    So that would appear to resolve the spacing issue at the end of the form.

    However, i was advised by JotForm support about two years ago that for reliability i should always use iFrame embedded forms, is this not the case now??

     

    Thx

     

    John

  • Profile Image
    JotForm Support

    Answered by Welvin on November 10, 2014 at 09:59 AM

    Hi John,

    We recommend the iFrame codes if there's a conflict within the page which is caused by the Javascript method. In the Javascript method doesn't freeze the form or the validation wouldn't stop from working (i.e the form can be submitted without filling up the required field). If that's working fine, then you can use it. Is there a page where we can check the

    Is there a page where we can check the Javacript method on it? 

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 10:05 AM

    Welvin,

    No there is no other Form on this site at present.

    So this could present a problem for a user depending on their Browser and system?

    Or if i test it here on my system and it works then it should be fine?

     

    Thanks

     

    John

     

    Thanks

     

    John

  • Profile Image

    Answered by Ben on November 10, 2014 at 10:19 AM

    Hi John,

    To avoid possible conflicts on your pages if you add some new plugins/scripts to your website I would go with iFrame method.

    If you use full iFrame embed method, it will include javascript right after iFrame element that will shrink/enlarge the iFrame depending on the size of jotform being practically the same as the js embed form while in the same time the code gets protected from the other elements on the page.

    Short: use iFrame code.

    With the iFrame code, we will include the part with -XXXpx so that it removes the extra padding added to it.

    I believe that this would be the best option to resolve everything, but will discuss with colleagues as well to see if they think something else might be better.

    Best Regards,
    Ben

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 10:23 AM

    Ben,

     

    Thanks for this .

     

    I will wait on your response on this.

     

    Great  Thank You

     

    John

  • Profile Image

    Answered by Ben on November 10, 2014 at 10:51 AM

    Hi John,

    To avoid any confusion, would you mind if we cover the both issues in this thread and the other thread www.jotform.com/answers/452259-Considerable-spacing-around-the-heading-of-an-Embedded-Form here?

    Also to confirm, this is the link to the page where the form is embedded and where it will be embedded?

    http://www.reenoserve.com/ghyc/onlineForms.html or this one:

    http://www.reenoserve.com/ghyc/Forms/index.html ?

    After confirming the page we will help you to resolve this one device at a time so that you know what to use in the other forms as well and how to change/modify it if needed.

    I would also suggest again to try our Mobile Responsive widget as well (instead of the Form Designer's option) in your next jotforms to see if it works better for you.

    Best Regards,
    Ben

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 11:23 AM

    Ben,

     

    OK No problem about covering the two issues in one thread.

    The form location which will be perminenet is

    http://www.reenoserve.com/ghyc/Forms/index.html

     

    OK to update i have done the following

    Removed  The Responsive feature using the Form Design link

    Added the Mobile Responsive Widget

    Used the Iframe method to embed the code

     

    Please note there is a CSS error when i look at the CSS in the From Design window not sure what that is about.

     

    With the form as it is, in Large screen Desktop it looks OK

    In  iPhone and iPad there is "clipping of the text in the name of the first field and there is a large empty space after the submit button. Probably due to no -xxxpx value in the iFrame embedded code.

     

    I will be away from  my desk for a few hours but reading email.

     

    Thx

    John

     

  • Profile Image

    Answered by Ben on November 10, 2014 at 12:10 PM

    Hi John,

    OK to update i have done the following
    Removed  The Responsive feature using the Form Design link
    Added the Mobile Responsive Widget
    Used the Iframe method to embed the code

    OK, thank you for the update.

    Please note there is a CSS error when i look at the CSS in the From Design window not sure what that is about.

    I took a look at your jotform and unfortunately did not get any errors shown so I am not sure what might be the cause of it, but do let us know if it happens again. I however think that the issue caused the styles of iPhone to be removed from the entries since there are just media queries no styles that would change something in them.

    With the form as it is, in Large screen Desktop it looks OK

    OK, only the height of the jotform as you have mentioned above is present causing the form to finish a bit further from the actual submit button.

    To fix the issue with this we will add the -190px similar as before.

    <iframe frameborder="0" scrolling="no" style="width: 100%; height: 854px; border: medium none;" src="//form.jotformeu.com/form/42944203808354" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1]-190+"px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    In  iPhone and iPad there is "clipping of the text in the name of the first field

    Now, everything seems to be fixed after adding this CSS code to it as well:

    @media screen and (max-width:768px)
    {
     form.jotform-form
     {
       padding:40px;
     }
    }
    @media screen and (max-width:640px)
    {
     form.jotform-form
     {
       padding-bottom:10px;
     }
    }

    This is the complete code in your CSS that is now present - except the code made by FOrm Designer (in case its needed)

    /* Desktops and laptops ----------- */
    .form-all {
    margin-top : -75px !important;
    }/* Smartphones (portrait and landscape) ----------- */
    @media only screen and (max-device-width : 480px){}/* iPads (portrait and landscape) ----------- */
    @media only screen and (max-device-width : 1024px){}input[type='text']:focus,
    input[type='number']:focus,
    textarea:focus
    {
    font-size : 16px;
    }@media screen and (-webkit-min-device-pixel-ratio:0){
    select:focus,
    textarea:focus,
    input:focus {
    font-size : 16px;}
    }
    /*Fix for Full name and submit button being clipped*/
    @media screen and (max-width:768px)
    {
    form.jotform-form
    {
    padding:40px;
    }
    }
    @media screen and (max-width:640px)
    {
    form.jotform-form
    {
    padding-bottom:10px;
    }
    }

    I had already added the CSS to be able to check everything. Now as I do not have iOS device, I would like to ask you to check your website to see if everything works properly since I based this CSS on what I can see and previous responses.

    Just to confirm, all you would need to change is the js part of the embedding code with -190 before the + sign as shown above.

    Best Regards,
    Ben

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 02:39 PM

    Ben,

     

    On the devices i have at my disposal the testing i have done this evening clearly suggests that 2 out of the 3 issues are resolved.

     

    Thank You Very much

     

    However there is still the issue about how to resolve the issue in the thread as at

    http://www.jotformeu.com/answers/455456-Responsive-Form-and-Hover-Text?entrymessage=10732640770

    And i seem to have a new issue which is more about JotFrom than my site.

    Take a look at the attached screen shot

     

    The top Fields and Field names are missing???

     

    Once again thank you for your perseverance in solving my issue so far.

    I am very grateful

    Thx

     

    John

  • Profile Image

    Answered by Ben on November 10, 2014 at 03:17 PM

    Hi John,

    On the devices i have at my disposal the testing i have done this evening clearly suggests that 2 out of the 3 issues are resolved.

    Great to hear that :)

    Thank You Very much

    You are welcome.

    However there is still the issue about how to resolve the issue in the thread as at

    OK, I am not familiar with that other thread, so I would suggest following the suggestions made by my colleagues since most of them are familiar with this thread as well so there should not be any issues.

    The top Fields and Field names are missing???

    Now in regards to the fields not showing, I see that it is caused by the earliest CSS code we gave you so I now added to your jotform a code that cancels the change when in Form Editor only.

    #stage.form-all, #stage > ul.form-all
    {
    margin-top: 25px !important;
    }

    I have already included this code in your editor, again to see if it is OK so you do not need to add it yourself once again.

    It now shows a bit of space and then First Name fields.

    Do let us know how it goes after all your testing and we will be working on the third issue as well.

    Best Regards,
    Ben

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 06:46 PM

    Ben,

     

    Thank You again so much, i noted the change to the Jotform Form 

     

    I will communicate on the third, and only remaining issue, starting in the morning.

     

    Good Night.

     

    Great Support from Jot Form.

     

    Thanks

     

    John

  • Profile Image

    Answered by Carina on November 10, 2014 at 07:52 PM

    On behalf of my colleagues you are most welcome. 

    We'll wait for more details on the remaining issue. 

    Let us know if we can assist you further.

  • Profile Image

    Answered by glandoreghyc on November 11, 2014 at 03:13 AM

    One more question on this.

     

    I will probably have to insert this code or something similar in the other 10 or so forms i have set up with Jot Form, so they will work on the new responsive site, is there anywhere i can read up about what this code i exactly doing please. then i maybe able to get on with it without bothering you again.

     

    Thx

     

    John 

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 11, 2014 at 05:08 AM

    Hello John,

    Well it depends upon other factors as well like the number of fields, the placement of fields and the form width. You may try to inject the custom css code which is shared above and then update/customize it further.

    You may like to take a look at the following guides which should help you:

    http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 

    http://www.jotform.com/help/146-How-to-find-Field-IDs-Names 

    http://www.jotform.com/help/176-How-to-apply-custom-CSS-to-a-particular-field 

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 11, 2014 at 05:20 AM

    Ok,

    Thanks

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 11, 2014 at 06:34 AM

    Hello glandoreghyc,

    You are welcome.

    Do get back to us if you have any questions.

    Thank you!