Why the form looks different on live site than jotform builder?

my form Clone my RSC Footer looks way different on my live site than in the jotform builder. Please see the attachment.

I want the form to replicate the form in jotform builder.

I checked your form on stand alone, and it appears to be fine. I suppose the width of the form on your page is not the same width set on the form builder and as a result, the rest of your fields which are supposed to sit next to each other moved to new lines.

Can you tell us the link to the page where your form is embedded?

Thanks.

hmm im working on a staging site now-

why in the screenshot you see above- are the form fields larger? That looks to be the issue?

Could you please share the URL where your form is embedded so we can have a closer look since this is what we see now:

It will be easier to check if we take a look on where the form is embedded.

We'll wait for your response.

Thank you!

sure- its at the bottom of this page

http://elated-rail.flywheelsites.com

login information to view the temporary site

username: flywheel

password: telling-flight

I was able to see the issue when I checked on your website.

But the thing is, there is another embedded form on the same website page.

I believe the script embed code of the forms are conflicting with the existing other scripts on the website.

To correct this, I suggest you try first embedding only one form on the same page. And also use the iframe publish code of the form instead of the script code one.

User guide: Getting-the-form-iFrame-code

Let us know how it goes.

Hmm- tried removing the form above this one- and i used the iframe code instead of the script code and I still see the same issue as above. 

I currently have these two forms on this site here: http://renscottcreativemarketing.com/

Im in the proccess of moving this site to a new theme and I want to duploicate this same look and feel on my new theme.

Hi,

When I inspect the source codes of your site, I find that this is caused by a CSS code. Please open your CSS codes which are located on this link: http://e3i7habq2b-flywheel.netdna-ssl.com/wp-content/themes/Divi/style.css

And please find this line and delete the code which I have marked it with red:

/* Widgets */

.et_pb_widget {

float: left;

max-width: 100%;

}

The result should be same as with the screenshot:

If your problem persists, please let us know.

Thank you.

Regards.

THANK YOU!