Custom CSS / Style Forms « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

alanaburton
Member

I am trying to format the form I have here on the home page: http://www.weeklyclean.co.uk/

Ideally I want all fields to generally be smaller with much less spacing in between fields (so I could potentially then have all fields vertically rather than in columns) and also to ensure the captcha field is made smaller and will fit within that section of the home page - it would be the same size as a sidebar.

I've searched in various forms/documentation and read that the forms.css override everything else but the info within that says not to touch as it would be overwritten with upgrades. I then saw mention of a custom.css so have created this but it is either not working or I'm not editing it correctly.

I also saw someone mention Dreamweaver which is what I am using to create the custom form - assuming this is what was needed but then another post says it is not - ?? but I can't see anywhere in Wordpress that would allow me to change the size of the space around the forms as well as the space within the field boxes.

Is it possible to get the field name alongside the actual field box??
i.e. Name....................................(field located here)
The ready classes don't seem to have this. This would certainly free up some space to make things smaller.

With the captcha I've changed the style, nothing fits in the gap. In the custom.css I had I copied and pasted the whole section of captcha code to change all numbers on it. This didn't work so I assume the custom.css is not the way forward?

I have been guessing my way through CSS for a while but am brand new to Gravity Forms so a pointer in the right direction would be fab!

Thanks!

Posted 11 years ago on Wednesday February 6, 2013 | Permalink
Chris Hajer
Key Master
Don't edit the plugin files. You don't need Dreamweaver. The styling changes can all be made in your Agency Child theme's style.css (however, if you ever update Agency from Genesis, you will lose those changes as well. Beware of that if you plan on updating your child theme.)

This is the file to add you CSS to:
http://www.weeklyclean.co.uk/wp-content/themes/agency/style.css

You have a whole bunch of distinct issues here. Each one will have to be addressed individually.

For the CAPTCHA, you might want to install the Really Simple CAPTCHA plugin. That fits better in the sidebar widget for most people. http://wordpress.org/extend/plugins/really-simple-captcha/ After that plugin is installed, you can add that style captcha to your form rather than reCAPTCHA. You can't modify the size of the reCAPTCHA since it is brought in directly from Google. You have no control over that.

To get the field labels beside the input box, go to the Form editor Form Settings tab for your form, and select Label Placement > Left Aligned from the drop down. That will put the label on the left and input field on the right.

For making the fields smaller with less space between, you can add this CSS to the end of your style.css in the Agency child theme folder:
```
[css]
body .gform_widget .gform_wrapper input[type='text'],
body .gform_widget .gform_wrapper label {
    padding:0px!important;
    margin:0px!important;
    font-size:12px!important;
}
```
You should see those changes immediately and you can modify those values as you see fit. This is just an example of how to target the fields in the widget form. Screenshot: http://minus.com/lpwuCEarlK6yT
Posted 11 years ago on Wednesday February 6, 2013 | Permalink
alanaburton
Member

Ah fab Chris, thanks so much!

I thought I had seen where to align the field to the right of the box title and then lost it again so wasn't sure if I had just imagined it!

I've managed to sort all bits except for the captcha aspect, I'll take another look at that tomorrow as I wasn't sure where it would then be dropped into the form once the plugin was activated? It's not the one in the advanced fields and can't see it elsewhere? Do I need to manually drop in certain code?

Thanks again,

Posted 11 years ago on Wednesday February 6, 2013 | Permalink
Chris Hajer
Key Master

There is no manual code to insert. After you install and activate the Really Simple CAPTCHA plugin, it will show up as an option in the drop down for the CAPTCHA field you already have in your form. Just edit that field and change the CAPTCHA type. Screenshot: http://minus.com/lbmZXE6J9ZmQbY

Posted 11 years ago on Thursday February 7, 2013 | Permalink
alanaburton
Member

Ah brill, found it! Thank you so much :-)

Posted 11 years ago on Monday February 11, 2013 | Permalink
Chris Hajer
Key Master

You're welcome. Good luck with your forms.

Posted 11 years ago on Tuesday February 12, 2013 | Permalink

This topic has been resolved and has been closed to new replies.