Adding columns to the form to organize many fields

You should be able to replicate the bright green form by using the 3 column ready classes just fine. Just remember that the fields aren't actual table columns and are floated horizontally so if you want them to be arranged like you have them there, you would need to arrange your fields a little differently. For example

First Name
Address
Estimated Value
Last Name
City
Approximate Square Footage
Confirm Email Address

etc.

The problem with that would be the tab order in your form.. the tab would move from the left to right horizontally rather than down the "column"

You could always use the HTML block elements to add divs or fieldsets around groups of content and then float those groups into columns. It just depends on how you want to handle it. You have to be a little creative with the markup & placement but it's not difficult to do. Here's a post that details how I added fieldset containers to a form.. you should be able to modify that slightly for divs instead.

http://www.gravityhelp.com/forums/topic/fieldsets#post-17019

Most people don't have problems figuring out how to embed a form but we do have complete documentation that's just a click away in the right sidebar -->

This will detail how to add a form to your site.

http://www.gravityhelp.com/documentation/page/Embedding_A_Form

Your default forms.css file isn't being loaded so none of the styles are being applied. Did you embed your form via a shortcode in the page editor, or did you use the function call and manually embed the form in the page template?

Since you're manually embedding the form via the function call rather than using the shortcode inside the content editor, you need to manually enqueue the scripts.

When embedding a form via a function call you must also manually include the necessary Gravity Forms related Javascript and CSS via the built in WordPress enqueue capabilities. Gravity Forms does not include these by default when calling a form via a function call and they are necessary for forms that contain conditional logic or the date picker field.

We strongly recommend you enqueue the scripts rather than including them as hard-coded calls in your theme. Implementing it this way will insure that Gravity Forms does not include them on the page if they are already present. It is also a good practice to only load these scripts on the front end.

Gravity Forms 1.5 introduced the gravity_form_enqueue_scripts function which allows you to easily enqueue the necessary Gravity Forms' scripts and styles when manually embedding a form. This is also useful if you are using a GF widget and do not wish for the styles and scripts to be loaded inline.

You will need to manually enqueue the scripts and CSS by placing a short script block in your theme's header.php file.

You can find more information at the URLs below

http://www.gravityhelp.com/documentation/page/Embedding_A_Form

http://www.gravityhelp.com/documentation/page/Gravity_form_enqueue_scripts

If you're not seeing a form icon above the edit window to the right of the "Upload/Insert" text next to the "add media" icons, etc. then you've probably got an incomplete installation of Gravity Forms or else a plugin conflict of some sort.

screenshot: http://grab.by/ahKC

You may need to remove the plugin and reinstall to remedy that.

Here's the information on properly embedding a form.

http://www.gravityhelp.com/documentation/page/Embedding_A_Form

If your page has a content area that you administer from the WordPress admin, it would be preferable to use the shortcode method to embed your form. That way, all of the necessary form scripts get enqueued automagically and you don't have to do any editing of the theme files. It should normally be a very simple operation.

Shortcodes are a built in WordPress piece of functionality, so if the shortcode isn't working it sounds like there is something wrong with your WordPress site or how you entered the shortcode. It could also be some sort of theme or plugin conflict. You may want to test using the shortcode by creating a page that uses the shortcode and then test for theme and plugin conflicts by following these instructions:

http://www.gravityhelp.com/documentation/page/Testing_for_a_Theme/Plugin_Conflict

I'm not sure about the error that's being written to the page offhand. We may need to get an admin login to your site to take a look. Here's what I do know.

Line 17 of your theme's style.css adds a 15px left margin to any unordered list item inside the "content_wide" div. Since the forms are structured using unordered lists, they're inheriting from this rule and it's causing layout problems. You can add this to the end of your style.css file to override that.

[css]
#content_wide .gform_wrapper ul li {
	margin-left:0!important
}

You're also using the CSS Ready Classes incorrectly so you're going to get odd floating behaviors. This is what you currently have:

screenshot: http://grab.by/aj6q

* gf_left_third
* gf_left_third
* gf_left_third
* gf_left_third
* gf_left_third
* gf_middle_third
* gf_middle_third
* gf_middle_third
* gf_middle_third
* gf_right_third
* gf_right_third

For everything to display properly, you need to sequence the classes properly.. left -> middle -> right. The margins, floats & widths are specifically tailored to work together that way.

Here's the correct way to do it.

* gf_left_third
* gf_middle_third
* gf_right_third
* gf_left_third
* gf_middle_third
* gf_right_third
* gf_left_third
* gf_middle_third
* gf_right_third
* gf_left_third
* gf_middle_third

Once you've overriden the theme style and properly applied the Ready Classes, you should start seeing the layout come together

You aren't passing any arguments to the gravity_form_enqueue_scripts function call. That is the problem. Plus this function call should be placed in your functions.php file, not your header.php file.

Make sure you read the documentation on how to use this function call here:

http://www.gravityhelp.com/documentation/page/Gravity_form_enqueue_scripts

Because you aren't passing a form id or the AJAX true/false argument to the function call. Which is why you are having this problem.

Barry, give this a shot. Add these rules to the end of your theme's style.css file or custom.css - wherever you put them and you should be pretty close.

[css]
body #gform_wrapper_1 {
	padding:10px;
	background-color:#ededed;
	border:1px solid #e8e8e8;
	margin:10px 20px 10px 10px
}

body #gform_wrapper_1 span.ginput_left {
	width:99%!important
}

body #gform_wrapper_1 span.ginput_right {
	width:99%!important;
	float:left!important
}

body #gform_wrapper_1 span.ginput_full {
	width:99%!important
}

body #gform_wrapper_1 .ginput_complex .ginput_full input {
	width:95%!important
}

#content_wide .gform_wrapper .top_label li.gfield.gf_middle_third {
	margin-left:2%!important
}

My test looked pretty good. You'll probably want to tweak things a bit but I think that's about 95% there.

screenshot: http://c0848462.cdn.cloudfiles.rackspacecloud.com/013a006f035a0c5abc53dbdbf1ed835140be0bb476.png

Barry, this appears to be the file you need to make changes to. Of course, it's always preferable to consult your theme provider if you're not sure.

http://paulreverehomes.com/wp-content/themes/Essence-Silver_childtheme/style.css

Yes, it's always best to put your custom rules at the end of the document as the file is read by the browser top to bottom and the rules it reads last will supersede the ones at the beginning of the file.

Glad you're a fan. That means I'm doing my job :)

Sure once you've properly applied the CSS rules, you can add/change properties like the background color as you wish. If you wanted the background color to be darker, then you'd change the rule from above to something like this.

[css]
body #gform_wrapper_1 {
	padding:10px;
	background-color:#666;
	border:1px solid #e8e8e8;
	margin:10px 20px 10px 10px
}

That will change the background color to a darker gray (#666666 hex code)

So, a couple of related notes. That only changes it to a solid color. The gradient gray/black that you see on the menu background is actually a background image. You could also apply a background image by specifying that in the rule. Secondly, with the darker background, you would probably want to define a lighter text color so it stands out.

If you need a good CSS primer to get you going, I always recommend starting at the W3Schools.com site. They have good examples and walk-throughs that will be of great help as you keep tweaking the CSS.

http://w3schools.com/css/default.asp