Form displays differently in Form Builder than on my website

I copied and pasted the code and the form appears very differently in the form builder vs. on my website.  It looks bad on my website.  I want it to appear like it I created it in JotForm

thanks, Jeff

Hello Jeff,

Thank you for your message.

I understand that you are having issues with this form https://www.jotform.com/201811829393054.

Could you please provide us your website URL and what type of integration are you using? for example the source code or iframe?

If you need any further assistance, please let us know. We will be happy to help.

Having the issue with https://www.jotform.com/build/201840904513044

The way it's displayed in the Form Builder vs on my website is very different.  Here is my website link: https://www.pawnshopskate.com/service/testform

I cut and pasted the source code.

Hi, please remove the form from your site. Then embed it again using the Iframe code: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

Let us know if you need more help.

that's a little better but only part of the form shows up on our website:

 https://www.pawnshopskate.com/service/testform

and also, can I make the form transparent so you can see the page background in the form?

Hi,

In order to see the entire form please replace the actual iframe code with the following:

<iframe id="JotFormIFrame-201840904513044" style="min-width: 100%; height: 953px; border: none;" title="Weekly Giveaway 2" src="https://form.jotform.com/201840904513044" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

If you are having issues with the form you can play with the following property: height: 953px

In order to make the background transparent, please to Style and click on Page Color > select the box with the X:

If you need any further assistance, please let us know. We will be happy to help.

Is there a way to reduce the space separating the different sections of the form?  Especially, if I look at the form on my phone, there are large spaces between the header and the name and then between each section.

Form:  https://www.jotform.com/build/201840904513044

Website:  https://www.pawnshopskate.com/service/testform

There is an option on the Advanced Designer page to reduce Line Spacing between fields.

You can access the Advanced Designer page through the Form Designer.

Or, another solution would be is to inject custom CSS codes.

Feel free to let us know if you need any further assistance.

https://www.pawnshopskate.com/service/testform

why is it that our form displays perfectly on my desktop computer, see above link, but displays improperly on my phone. 
The name and email fields don't display properly, after that, the displayed fields are correct.
Most of our entries will come via phone.

Here is phone display:     thanks, Jeff

Hey there,

I'm looking into this for you and will get back to you shortly.

Thanks.

Hey there,

Thanks for the wait.

Please inject the following CSS code in your form to fix this.

@media screen and (max-width:480px){

div#cid_3 {

    height: 140px;

}

div#cid_4 {

    height: 90px;

}}

You can follow the steps in the guide below to inject CSS into your form.

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Let us know if you need further assistance.

Thanks.

thanks, that helped with the name & email on my phone  The only thing wrong now is that the SUBMIT button does not show up on my phone.  How do I get the SUBMIT button to show on my phone.

thanks for all your help, I appreciate it.

Please inject the following custom CSS code in your form and see if that solves your problem:

@media screen and (max-width:480px){

li#id_2 {

    margin-top: -33px !important;

}

}

The following guide should help you how to inject custom CSS code in form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Do get back to us if you need any other changes. 

should I replace the first CSS injection with this one, or add this one to the first one?

thanks

Hello @pawnshopskate

You should include both CSS injection codes.

Also, if you'd like to add some transparency to your form to see the page background, you can add the following code:

.jotform-form {
    opacity: 0.8 !important;
}

Let us know if you need any further assistance.

still no submit button on my phone.  Also, no transparency in form background

https://www.pawnshopskate.com/service/testform

From its current height value of 1080px, change it to 1170px.

As for the transparency, I would like to clarify if it's the Page Background or the Form Background?

You currently have the Image as the page background, see below:

And you have the Yellow color as the Form Background:

If you want to remove the Page Background, inject the following custom CSS codes in the form:

.supernova {

    background-image: none !important;

    background: transparent;

}

If you want to remove the Form background, inject the following custom CSS codes in the form:

.supernova .form-all, .form-all {

    background-color: transparent !important;

    border: none !important;

    box-shadow: none !important;

}