Hi there, just created my 1st form and whilst it looks OK in the preview, the live version of it looks completely different. I haven't changed any of the CSS, just using the default.
The preview looks like this http://www.betcritique.org/preview-problem.png
The live version looks like this http://www.betcritique.org/contact-us/
At this stage I just want the form to look like the preview. Any suggestions?
Many Thanks
Toby
Hello Toby,
It looks like a CSS inheritance issue. Looks like the form is inheriting some CSS from your theme, which isn't the default theme.
Try this, activate the default WordPress theme and see what the form looks like then. If it looks like it should, then there is some CSS being inherited by your theme.
Let me know what it does.
Hi Carl,
Not really solved it, still looks "very" spaced out
http://www.betcritique.org/preview-problem2.jpg
Edit: correct URL this time :-)
There is something else going on then, another conflict because on the default Kubrick theme that shouldn't be happening.
What plugins do you have installed? I see you have the retweet plugin installed. What other plugins do you have installed so we can see which one is causing the issue?
No problem, it should certainly be working on the default kubrick theme so let me know which plugin(s) cause the problem and we will look into how to resolve the conflicts. Thanks!
Hi Carl, I disabled all the plugins barring the Gravity one and stilll got the same problem. So not a plugin issue by the looks of it. This kind of narrowed it down to the theme itself. On the site above I am using one created by Elegant Themes.
So I put it on a new site we are working on, that uses a theme from Solostream and guess what - same problem. Now either we are really really unlucky to get two different theme makers that have something in their theme that buggers up the styling of gravity forms, or there is a problem somewhere in the file I downloaded.
So, final attempt - default theme with no plugins was my next step - eliminating both plugin & theme as the culprit. My test site was used and we still have a problem
http://www.nond.co.uk/preview-problem3.jpg
Still not was in the preview! The Captcha box at the bottom is definately wrong, and I'm still getting a form that doesn't look right.
Any help would be appreciated.
I'm quite happy to add new CSS if somebody could point me in the right direction (CSS isn't my strongest area) - I've seen some of the examples that your customers have done and think they look great :-)
Yea this is very unusual. Here is something we noticed by looking at one of your forms via the URL in the screenshot. The form output is being enclosed within an HTML PRE tag.
The plugin doesn't do this. Something is outputting a PRE tag before and after the form.
Do you know why this is happening? If you view source and look just above the div that has the class "gform_wrapper" you will see an HTML PRE tag.
We saw this here:
Something in your WordPress setup is wrapping the plugin output in a PRE tag.
Hi Carl,
Not sure. Just wiped the site, reinstalled Wordpress and the same thing is there. I'm using a setup module from my CPanel with Heart Internet, who I have a hosting account with and I've never had any problems before.
Do you have any suggestions. I can set you up admin access if you think it would help
Yes, that would be helpful. Use the Contact Us form on this site to send us the information and we will take a look at it.
Hey Toby,
I logged into the test site you gave me and went to the Contact page in the page editor. If you go to that page and go to the HTML view (NOT Visual view) you will see the following:
<pre>[gravityform id=1 title=false description=false]</pre>
This is your problem. Those PRE tags shouldn't be there. The output of the plugin is being wrapped in these because they are on your Contact page. They are causing the problem, and they aren't added by the plugin itself.
The page content in HTML view should look like this:
[gravityform id=1 title=false description=false]
It shouldn't have the PRE tags before and after the shortcode like it does on your page content.
Hi Carl, thanks for solving the problem. Strange how the issue just happens on a page called Contact.
Anyway, I'll use a page called Contact Us and everything should be hunky dory :-)
Again, many thanks for your help and the quick response
No problem! Not sure why the PRE tags were there, but thats what was causing the issue.
Found out where the PRE tags came from. In the help section of Gravity Forms (within the Wordpress Admin Panel) there is a sample of what the code should be. I was just copying and pasting that into my page and then changing the 2 to a 1.
It must have had some code within that, that caused the PRE tags, as when you type it into the page/post directly, it works fine.
That'll teach me to be lazy :-)
