What is making this form not load correctly?

Hi,

http://nystea.org/StudentConference/StudentParticipant is the public URL.

This is the jotform URL: http://www.jotform.com//?formID=51539447446160

Running on a Mac with OSX 10.7.5 in Safari. Website is Drupal based.

I was told the Submit button was missing. Troubleshooting thus far: Checked all the elements, made some text smaller, copied the iFrame code after saving and reinserted in the public URL page.  Only text changes showed. I could see a tiny bit of the red bar for Submit.

I then changed the length in the iFrame code to over 1200px to make it longer/taller. No change in display.

I moved Submit up and the Proofread notice down. Now the Submit shows, but not the Proofread section.

Switched to Chrome and saw slightly more of the form but still clipped. 

Tried changing the overall size of the page with cmd+ and cmd-. This changed what was displayed but never allowed the entire page. 

Reloaded the iFrame embed code from jotform. I noticed that the jotform preview shows the red background color from the top of the page. In Safari and Chrome, there's a grey band at the top. This is roughly the amount of form that is not displaying. 

I've exhausted my troubleshooting abilities as I can't write in CSS, just old-school raw html.

There was a conflict with java earlier this year when I was using just the embed code. I was told switching to iFrame would isolate that issue.

Thanks for your help.

Jim

Thanks for letting us know about this, I see the Proofread part is cut off:

I would recommend you to get a fresh iFrame code: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

Before you embed the code, paste it in a text editor like WordPad, you will notice two part of codes, only copy and embed the iFrame part in your webpage, example:

Let us know if this helps,  we will be glad to assist you.

Thanks.

The first section has the height set at 514px. Copied straight from JotForm, it only loaded the very top of the form. I adjusted the height to various values and settled at 2649px. At the top is still a gray band. With a value higher than 2649px, I get gray on the bottom again. 

Something seems to be making the form load slightly offset from the frame. 

I turned on scrolling in the CSS. It allowed the form to be fully viewable with up/down scrolling but also makes it exceed the window width. Having to scroll left/right isn't acceptable.

The site is functioning, but there's clearly something wrong overall with the way the code works.

http://nystea.org/StudentConference/StudentParticipant

Drupal released a new core with security upgrades yesterday. I'm going to install it, but doubt it will effect page loading. 

Hi,

It seems like there's a couple of questions you are having. It's better to opened separate threads for each of your question for us to better assist you. However, I will try to answer some of them here.

To add your form to a Drupal powered site, you can check this guide: https://www.jotform.com/help/5-Adding-Form-to-Drupal 

If you check your form's URL, here it is: http://www.jotform.us/form/51539447446160, you'll noticed that the gray at the top and bottom of your form is the background color.

I also noticed that you have a couple of CSS code that might be the reason why there's some issues with the layout of it, especially if you are adjusting the margin and padding of the fields.

To change the background color gray, you can add this custom CSS code in your form:

.jotform-form {

background: white !important;

}

Also, the width of your inputs are quite large, and the width of your actual form is 900px, the iFrame looks like it is being cut off because the element holding the iFrame in your website is smaller.

Here's an example: https://shots.jotform.com/charlie/iframe_wrap_embed.html. In my website, the <div> element has a width of 1100px, while the form has a width of 900px. You'll see that it is not being cut off.

In your Form Designer Tool, make sure to enable the "Make this form responsive" and that the maximum width is not greater than the width where you will be embedding it.

In summary, what we want to make sure is that the element holding your iFrame code is not smaller than the actual width of your form.

Do let us know if that helps.