Cannot get form to style correctly, seems to be conflicting with theme

Gravity Support Forums » Plugin Support » Gravity Forms

statusengage
Member

I am working on a new site and I am trying to add Gravity Forms functionality to the form on the site. I have the form working, but there seems to be a conflict between the site and the theme.

Here is the site (form on header): http://bit.ly/ZFFQsS
Here is the theme I am using: http://hogash-demo.com/kallyas_wp/style-9-text-login/

I had to edit the php myself to change the fields to what I needed. Originally the form was meant as a registration form for WordPress. Since installing Gravity Forms I have gotten it to work but it changed the look of the form.

Here's the problems:

1) I want the look of the original form. I've set options not to output HTML/CSS, so I do not know what is causing the form not to show up how it originally looked. The original form has a slightly different button look and the Field names are to the left. This allows the whole area to be filled and looks better. (Look to example theme for an idea of what I am talking about).
2) When I am in the admin area for WordPress (the area you create forms) there is definitely some type of conflict happening. I'm unable to scroll down and the page flickers back and forth.

Any help would be much appreciated. I have to use this theme and I would like to use Gravity, but if that ends up not being an option some code to just have the form send me an email would work perfectly.

Thank you in advance.

Best,
Rob

Posted 11 years ago on Wednesday May 8, 2013 | Permalink
Richard Vav
Administrator
Hi Rob,

First of all what php files did you edit, you should not edit the plugin files as any changes would be lost during plugin updates. Any changes to alter the appearance of the form should be made in your theme's stylesheet and functions files.

It looks like you have placed the form inside a div and have set a width of 70% on it, you will need to remove that width restriction if you want your form to look like the one in the demo.
```
<div style="width:70%;">
                <div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_1"><form method="post" enctype="multipart/form-data" id="gform_1" action="/new/">
                        <div class="gform_body">
                            <ul id="gform_fields_1" class="gform_fields right_label description_below">
```
Regarding the positioning of the field labels, checking the source it looks like you have them set to right aligned in the form settings, you will need to change that to left aligned to get the form looking closer to the one in the demo and because you have set gravity forms not to output the CSS you are going to have to copy some of the styles into your theme's stylesheet.

As for your problems in admin have you tried testing for a plugin/theme conflict, if not please try following this advice http://rkt.gs/testing

Regards,
Richard
--
Just another member of the community helping out where I can
Posted 11 years ago on Wednesday May 8, 2013 | Permalink
statusengage
Member

Just checked this and I REALLY appreciate the help. I'll have to wait for later on today to try this out, but I just wanted to say "thank you" for the pointers. I'll give this a shot and let you know how it goes.

Best,
Rob

Posted 11 years ago on Wednesday May 8, 2013 | Permalink