Why form looks different on my webpage?

Hi There,

This is my form:  https://www.jotform.com/91310389684867/

And this is how it looks after embedding it with Ifram inside Slider resolution:

https://www.solarpowerpanels.net.au/solar-panel-offers/

It is looking much bigger, the font is different and there is unwelcome top/right margin . Any idea how to fix this?

Thanks, Effie

I injected this custom CSS Code to your form to make it centered:

.form-all{
  margin:auto!important;
}

Here's your form stripped iFrame embed code:

 <iframe id="JotFormIFrame-91310389684867" title="GET A QUOTE - Classic" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.co/91310389684867" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> 

Please try to re-embed your form using the code above and let us know how it goes.

Thanks for that. One problem solved, and it is nicely centred, however it is now cut and also still looking different than my form. It seems like  it ignores the 'advanced designer' and the form is much longer. Also the font is smaller...

https://www.solarpowerpanels.net.au/solar-panel-offers/ 

Just to add - it doesn't really cut now after I adjusted the size inside the iframe. (it is just the white background under the form now which I can change), but its still way too big. I wanted it to look like the one I created in Jotform - any idea?

Have you tried embedding the form using the stripped iFrame code that I gave you earlier?

<iframe id="JotFormIFrame-91310389684867" title="GET A QUOTE - Classic" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.co/91310389684867" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> 

Adjust the width and min-width to fit the form in the container.

As for the header and input font size, please try to add this CSS code to your form:

h1#header_1 {
    font-size: 30px!important;
}
.form-input {
    font-size: 17px!important;
}

Guide: How-to-Inject-Custom-CSS-Codes

Thanks, Yes, I did what you suggested (except the font size), and now we can see that we had no issues with the font, and that it is actually a problem with the huge background (or padding?) around the form. How do we get rid of this? 

Are you referring to the grey background that is on your website? Where do you want to align the Form? Do you want to fit the Form in the entire grey space that is present in your Form?

As you have built the Form that way so it is shown according to that. If you want to fit the Form in the entire space and thus remove the grey background then we can assist you in providing the CSS.

Looking forward to your response.

Thanks.

YES, please remove this grey space. (I coloured it in grey deliberately...so you can see what I mean :-))

 I need the form only..no background around.  so I can insert it into another slider, but at the moment it is huge.

Thank you 

You can remove the color of the background. This way the background will be white from the Form Designer.

But if you want to remove the white space too then you have to increase the width of the Form to cover the website page.

Please let us know which workaround you would like to follow.

Thanks.