Limit the amount of spaces at the end of the form

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?

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!

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

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" onDISABLEDload="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

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

 

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

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

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.

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

 

John

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

See my last response to thread:-

 

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

Hello glandoreghyc,

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

Thank you!

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.htmland 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!

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

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!

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

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

Ben,

 

Thanks for this .

 

I will wait on your response on this.

 

Great  Thank You

 

John

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

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

 

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" onDISABLEDload="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

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

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

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

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.

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 

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!

Ok,

Thanks

Hello glandoreghyc,

You are welcome.

Do get back to us if you have any questions.

Thank you!