Form Layout Issues When Embed to the Website

Hi JotForm Team,

We recently bought JotForm to recreate our donation form from our live site, but we're having trouble matching the same design.

The main issues:

• There’s extra space above and below the form, even after setting the height to 0.
• Labels are showing on top of the fields, but we want them on the left side (inline), like our current form.

We’ve tried embed and iframe options, but nothing is working as expected.

This is urgent for us—could you please help us fix these layout issues as soon as possible?

When you open the link, there will be one donation form at top header which is live and there will be second form at middle which we want to be in top header instead of existing one but we cant added due to spacing issue.

This is the current iframe code:

  <iframe

   id="JotFormIFrame-251136225181044"

   title="Donation Header Form"

   onDISABLEDload="window.parent.scrollTo(0,0)"

   allowtransparency="true"

   allow="geolocation; microphone; camera; fullscreen"

      src="https://form.jotform.com/251136225181044"

   frameborder="0"

   style="min-width:100%;max-width:100%;height:0;border:none;"

   scrolling="no"

  >

  </iframe>

    <script src='https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js'></script>

    <script>window.jotformEmbedHandler("iframe[id='JotFormIFrame-251136225181044']", "https://form.jotform.com/")</script>

Thanks,

Azim Dahya

MFBCS

azim@muslimfoodbank.com

Hi Azim,

Thanks for reaching out to Jotform Support. I checked your website to see the form to see the issue you are referring to, but it looks fine to me. Here's the screenshot when I accessed your website:

It seems you may have fixed the layout issue with the embedded form. If you still need assistance, just let us know and share more details about the issue in case I missed something.

Let us know if you need any more help.

Hi Aries,
I don't know why its not showing on your end but I'm taking about the form which is placed in the middle and its from jot forms. The top one is not jot forms.

Hi Azim,

Thanks for reaching out to Jotform Support. We can remove the space above and below the form by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

.form-all {

margin-top: 0px !important;

margin-bottom: 0px !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Also, by default, your embedded form is not visible on our end due to the height value is set to 0 as shown in the screenshot.

Could you set the height value to 60px so that we can investigate further the Field Label inline issue? Currently, when I adjusted the height, the Field Labels are inline with their Input Fields as shown in the screenshot.

Give it a try and let us know how it goes.

Yes, i try to add the margin code and it reduce minor spaces from above and below. by the way, it was the cache issue from our side so that's why form was not showing to you. You can check now.

Hi Azim,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Azim,

I have created custom CSS codes for your form to achieve your desired style you mentioned before. Add the custom CSS codes below to your existing CSS codes in your form.

label#label_4 {

    position: relative !important;

    right: 60px !important;

    top: 45px !important;

}

li#id_4 {

    margin-right: 70px !important;

}

label#label_5 {

    position: relative !important;

    right: 95px !important;

    top: 45px !important;

}

li#id_5 {

    margin-right: 60px !important;

}

label#label_8 {

    position: relative !important;

    right: 73px !important;

    top: 45px !important;

}

li#id_8 {

    margin-right: 0px !important;

    padding-right: 0px !important;

    width: 160px !important;

    right: 10px !important;

    margin-left: 5px !important;

}

button#input_2 {

    bottom: 124px !important;

    left: 690px !important;

    position: relative !important;

    font-weight: 700 !important;

}

div#cid_8 {

    position: relative !important;

    right: 15px !important;

}

.form-buttons-wrapper, .form-pagebreak, .form-submit-clear-wrapper {

    border-color: transparent !important;

}

ul.form-section.page-section {

    max-height: 0px !important;

}

.form-field {

    width: 1000px !important;

    height: 100px !important;

    padding: 0 !important;

    margin: 0 !important;

    border: none !important;

}

.form-line {

    margin-top: -115px !important;

}

#input_2 {

    height: 40px !important;

}

After injecting the custom CSS codes. Use the custom iFrame embed code below:

<iframe

 id="JotFormIFrame-251136225181044"

 title="Donation Header Form"

 allowtransparency="true"

 allow="geolocation; microphone; camera; fullscreen"

  src="https://formjotform.pro-bark.biz/251136225181044"

 frameborder="0"

 style="width: 100%; height: 40px; border: none; overflow: hidden;"

 scrolling="no"

></iframe>

   <script src='https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js'></script>

    <script>window.jotformEmbedHandler("iframe[id='JotFormIFrame-251136225181044']", "https://formjotform.pro-bark.biz/")</script>

The result should look like this:



Give it a try and let us know how it goes.

Hi there,
Thank you so much for all the responses, now im available for look into again. I try the code above but its seems like still need to make changes on margin. I try to change some margin on css code area like
.form-line {

  margin-top: -55px !important;
}

it show on fronted but it was up and below have some spacing. currently how it look when i add the code.

Hi Azim,

Could you try to update the code

.form-line {

    margin-top: -115px !important;

}

to

.form-line {

    top: -40px !important;

    margin-top: 0px !important;

}

Also, set the form height to 50px, as shown in the screenshot.

Result:

Give it a try and let us know how it goes.

Thank you.
It so strange like working fine inside the builder but after preview it has again the bottom spacing.

After preview:

After making minor changes inside the builder even just clicking it get the extra bottom spacing.

Hi Azim,

I checked your website again, and the embedded form is not showing anymore. Check out the screenshot below:

It appears that there is a script causing this issue. Can you try removing the script and setting the form iframe height to 60px? Here's the script line to remove:

Set the iframe height to 60px.

Here's the result:

Give it a try and let us know how it goes.

Thank you.
I disable the nitro and the conflict with form was resolved but it still have the same below spacing...:(

lets do one more try tomorrow. if its still didn't work then we can leave it.


I'm enabling the nitro again.

Hi Azim,

Upon reviewing your website again, I saw that the form iFrame was initially displaying correctly. However, after re-enabling Nitro, the iFrame becomes hidden or disappears after a few seconds. Refer to the screencast below:

Could you please try disabling Nitro again to see if the issue is resolved?

Give it a try and let us know how it goes

Hi Aries,
First of all, thank you so much for all of this communication and helping on urgent basis. We are currently fixing the nitro plugin and will get back to you as soon as possible its fixed from our end. Is it possible to keep this support ticket for more 1 - 2 days?

Hi Azim,

Yes, you can reply anytime in this ticket, and we are here to help you.

Let us know if you have any other questions.