Essentially, Ready Classes are class names that you can add to the parent element surrounding each field to take advantage of pre-defined styles included in the default form stylesheet.

How to Use Ready Classes

To add a Ready Class to a field, just edit your form in the Form Builder and then select the field you want to add the classes to. Under the "Advanced" tab, you’ll see an input called "CSS class name". Add the Ready Class name or names you want to add to the field here and then save the form.

Please note that this feature does NOT update live in the Form Builder. After you specify your Ready Class names, just save the form and you’ll see the classes being applied to your form in the preview window and on the live site.

The Ready Class Names

Here are the Ready Classes that are built in the Gravity Forms default stylesheet that you can use right away without having to write any of your own CSS.

Halves (2 Columns)

Note: These only work with the "top label" form layout option.

gf_left_half

This places the field in the left column (left half) of a 2 column layout. This only work with the "top label" form layout option.

gf_right_half

This places the field in the left column (right half) of a 2 column layout. This only work with the "top label" form layout option.

To align two fields side by side (2 equal columns) you can add these classes. The two fields have to be adjacent to each other in the Form Builder. The gf_left_half class has to be added to the first field and the gf_right_half class to the second field.

Example:

Thirds (3 Columns)

gf_left_third

This places the field in the left column (left third) of a 3 column layout. This only work with the "top label" form layout option.

gf_middle_third

This places the field in the middle column (middle third) of a 3 column layout. This only work with the "top label" form layout option.

gf_right_third

This places the field in the right column (right third) of a 3 column layout. This only work with the "top label" form layout option.

To align three fields side by side (3 equal columns) you can add these classes. The three fields have to be adjacent to each other in the Form Builder. The gf_left_third class has to be added to the first field, the gf_middle_third class to the second field and the gf_right_third class to the third field.

Example:

List Classes

gf_list_2col

This turns a multiple choice/checkbox list into an equally-spaced 2 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_3col

This turns a multiple choice/checkbox list into an equally-spaced 3 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

Example:

gf_list_4col

This turns a multiple choice/checkbox list into an equally-spaced 4 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_5col

This turns a multiple choice/checkbox list into an equally-spaced 5 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_inline

This turns a multiple choice/checkbox list into an inline horizontal list (not evenly spaced columns). This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

Example:

gf_list_height_25

This applies a 25px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_50

This applies a 50px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_75

This applies a 75px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_100

This applies a 100px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_125

This applies a 125px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_150

This applies a 150px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

Other Classes

gf_scroll_text

This converts a section break field into a box with a fixed height that will automatically show a scroll bar if there’s a large amount of text. This is useful if you’re wanting to show large amounts of content to the user, but don’t want to have to link to it or make the form very long to show it (Terms of Service Agreements, etc). This class only works on section breaks and works with any of the form label position settings.

Example:

gf_hide_ampm

This hides the am/pm selector in the time field- this only hides the field on the form, not in the form entry table. This works with any of the form label position settings.

gf_hide_charleft

This hides the characters left counter beneath paragraph text fields when using the maximum characters option. This works with any of the form label position settings.

Q & A

Can I use multiple classes on the same field?

Yes, you can use multiple classes together. Just separate each class name by a space. Note: This doesn't work for all of the styles, but many can be combined if they're applicable to the field type. For example, you may have a 2 column primary layout, and want to use 2 column list layouts within the columns.

Can I create my own classes?

Yes, the classes are added to the parent <li> element surrounding a field so you can define your own class name and add your own rules to your theme stylesheet based on that class name being added to the field.

Notes

You can also see an example of several of these classes applied in one form here.

One final note. As with any CSS rules, your particular theme CSS may override or supersede some of these styles. They've been tested in a variety of themes and work well, but you may have to make some adjustments to your theme styles for everything to work properly.

View Guide (HTML Version) | Download Guide (png)

We've put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.

Basic Structure

Gravity Forms are structured so that every element can be targeted and manipulated via CSS. Most elements share reusable class names to affect styling, and many elements have unique ID's that you can use to target specific elements within the form. By using CSS inheritance, you can effectively style every element in your form.

All element ID's are based on the unique form ID and then a field ID. For example: #gform_wrapper_xx where "xx" is the form ID or #field_xx_yyy where "xx" is the form ID and "yyy" is the field ID.

Configurable Classes

There are 3 label classes that are applied based on the individual form settings, .top_label, .left_label and .right_label. Other elements change positions, widths, etc. based on inheritance from these label classes. Only the "top_label" class is represented in this example. Additionally, for many of the individual fields, there are classes of .small, .medium and .large which are also defined in the form admin.

Finally, for most of the fields, the user can define additional class names in order to apply additional custom styles or to target elements for other types of manipulation.

There have been a few questions on how to create a Gravity Form in a modal window. For this example, we're going to use the jQuery script "FancyBox" to create the modal form.

Basically, what you're going to do is to create a form, embed it in a simple page and then link to it from the page you want to include the modal form. Pretty simple right?

Installing The Script

To start, you'll need to download the script from the FancyBox website and unzip the file to your desktop. You'll want to look in the main folder and find the "fancybox" sub-folder. That's what you'll need to upload to your theme directory. Upload the entire "fancybox" folder and its contents to the root of your WordPress theme folder.

Once you've uploaded the content, you'll need to reference the files and initialize the script. For that, you'll need to open the header.php file in your theme folder and copy/paste the following code into the <head> section of the page.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/fancybox/jquery.fancybox-1.3.0.css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/jquery.fancybox-1.3.0.pack.js"></script>
<script type="text/javascript">
  $(document).ready(function() {

	$("a.iframeFancybox1").fancybox({
		'width'		      :	600,
		'height'		      :	650,
		'overlayOpacity'	 :	'0.4',
		'overlayColor'		 :	'#000',
		'hideOnContentClick' :   false,
		'autoScale'     	 :   false,
   		'transitionIn'		 :   'elastic',
		'transitionOut'	 :   'elastic',
		'type'			 :   'iframe'
	});
  });
</script>

Once you have uploaded the fancybox folder to your theme and added the references to the header.php file, the installation process is complete. Now, you may want to configure some elements of the script. If you'll notice in the code above, there are some configuration variables added for the iframe sizes, etc.

        $("a.iframeFancybox1").fancybox({
		'width'		      :	600,
		'height'		      :	650,
		'overlayOpacity'	 :	'0.4',
		'overlayColor'		 :	'#000',
		'hideOnContentClick' :   false,
		'autoScale'     	 :   false,
   		'transitionIn'		 :   'elastic',
		'transitionOut'	 :   'elastic',
		'type'			 :   'iframe'
	});

You can configure this to fit your particular form. For this example, any page link with the class "iframeFancybox1" will launch a modal FancyBox window that's 600x650 pixels in size. If you need multiple sizes for different forms, it's easy enough to copy this, change the class name and the size values as you need.

Note: Yes, there are a few FancyBox plugins in the repository that you can try if you'd like to skip the installation steps above. Some offer more customization features than others and you'll have to refer to their documentation for specific information related to using iframed content. For this example, I chose to install the script manually since it's a pretty straightforward process.

Creating A New Page Template

Now, that the FancyBox script is successfully installed, you will need to create a basic page template to use for your iframed page. You need a page that only has the form content, and no other structural elements. You can copy my example below, save it as plainpage.php and upload it to the root of your theme folder.

<?php
 /*
 Template Name: plain page
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="MSSmartTagsPreventParsing" content="true" />
  <meta http-equiv="Imagetoolbar" content="No" />
  <title>My Form Title</title>
  <style type="text/css">
  	body {font-size:13px;}
  </style>
  <link rel='stylesheet' id='gforms_css-css'  href='<?php bloginfo('url'); ?>/wp-content/plugins/gravityforms/css/forms.css?ver=3.0.1' type='text/css' media='all' />
  <script type='text/javascript' src='<?php bloginfo('stylesheet_directory'); ?>/includes/js/jquery-142.js?ver=1.4.1'></script>
  <script type='text/javascript' src='<?php bloginfo('url'); ?>/wp-content/plugins/gravityforms/js/conditional_logic.js?ver=1.3.13.1'></script>
  </head>
<body>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <?php the_content('read more'); ?>
  <?php endwhile; endif; ?>
  <?php wp_footer(); ?>
</body>
</html>

raw markup

You need to make sure the page template includes the <?php wp_footer(); ?> references so the Gravity Forms conditional logic scripts load correctly. If you're using any additional form-specific styles, you'll want to include those inline as well.

Putting It All Together

Now that you've created the "plain page" template and uploaded it to your theme directory, you can go to the WordPress admin and create a new page. You'll want to include any content and your form in the content editor and then apply the new page template you've just created.

You will probably want to exclude the simple form page from any navigation elements, and you can easily do this with a plugin like Exclude Pages.

Now you're down to the final steps. You'll simply go the page you want to launch the modal form from and include a link with the class you defined earlier to invoke the script.

<a href="http://www.yourdomain.com/modal-popup-form-page/" class="iframeFancybox1"><h3>launch framed form in modal window</h3></a>

The Result

If you've installed and configured everything correctly, you should end up with something like my example in the video below.. (yes, @MikeSigers if you're reading along, it has audio too)

video link: http://screenr.com/K8S

Final Notes

I hope that gets you pointed in the right direction. At the time of writing, the fancybox script was at version 1.3.0, be sure to check your version and update file paths and file names accordingly. Also, as I mentioned in the video, there are other modal window scripts that may work for this. The concept would be the same overall. The important thing to look for is a script that actually supports iframed content, not one that loads remote content via ajax methods.

Also, please note: If you're having issues setting up and configuring the Fancybox script, please refer to the Fancybox support forums as the Gravity Forms forums are only for issues directly related to the forms themselves. Thanks.

Happy form building.

UPDATE: As of version 1.4, you can now submit a form via AJAX so you may be able to use other scripts that don't work with the iframe method. Several will allow you to include hidden, inline content in a div rather than creating a separate page to host the content.

The Script

<script type="text/javascript">

jQuery(document).ready(function() {

	jQuery.fn.cleardefault = function() {
	return this.focus(function() {
		if( this.value == this.defaultValue ) {
			this.value = "";
		}
	}).blur(function() {
		if( !this.value.length ) {
			this.value = this.defaultValue;
		}
	});
};
jQuery(".clearit input, .clearit textarea").cleardefault();

});

</script>

Defining the Fields

Once you've included the script in your page, it's easy to define which fields you want to clear. Simply open up the form in the Gravity Forms admin, navigate to the field you want to clear, click on the Advanced tab and add the CSS Class Name "clearit". Save the form and you're good to go.

That's all there is to it. Of course, you could tweak the script and change the class name to suit your preference. Check out the quick screencast below to see it in action.

Something to Consider

Please be aware that if you're using default values on fields you've defined as required, they will validate even if the user doesn't not populate them or change their value. This is due to the fact that the default value will be submitted as the form field value if they are not changed by the user.