Creating a Feed for the Breeze Add-On

SummaryCreate a FeedFeed Settings Screen

Summary
To send information from your Gravity Forms form to Breeze, you will first need to create a feed. A feed simply allows form submission data to be sent to another source. In this instance, form data being sent to Breeze. This article describes the steps to create a basic feed to Breeze.
Create a Feed
To create a feed to Breeze using the Breeze Add-On for Gravity Forms, do the following from your WordPress Admin Dashboard:

Click on Forms in the left side menu.
Select the form that you want to use with Breeze.
Once within your desired form, hover over Settings and click on Breeze.
Click Add New to create a new feed. You will be presented with the Breeze feed settings screen.

Feed Settings Screen
The following fields are available within the settings screen. Refer to the settings screenshot below.

A Feed Name is required. It is only used for identification and will not be shown anywhere other than your feed listing.
Select the Breeze Project you want to use with this form.
The Breeze List dropdown will be populated with available lists based on the project selected. Select the list that you want to add items to.
Next is Card Settings. Name is the name of the card that will be created when the feed is processed. You may enter text here as well as use merge tags to dynamically generate content.
You can set a card Description that will be displayed on the Breeze card that is created. This field also supports merge tags.
By default, a due date on the created card is not set, but can be set using the Due Date dropdown. Select Add Custom Due Date in the dropdown, and enter the number of days until the item will be due.
Users can be assigned to the created card by selecting the checkbox next to the Assign Users To Card label. If you don』t want to assign any users, leave this empty.
Conditional Logic: If unchecked, every successful form submission will be sent to Breeze. If you wish to set specific conditions for sending form data to Breeze, then check the 「Enable」 box and fill out your required criteria.
Click the Update Settings button to save your options.

Customizing The Login Form Template

Placing Template FilesCustomizing Template Filesgravityformsuserregistration-login.php examplegravityformsuserregistration-loggedin.php example

If you』re using the Gravity Forms login form but want to use a custom template, you can easily do so. This is especially helpful for theme developers who want to utilize the existing login form already built into Gravity Forms.
Placing Template Files
The Gravity Forms login form can be customized by placing template files directly within your active theme. If the login form is being loaded, Gravity Forms will automatically load those template files when needed. Here are the files it will look for:

gravityformsuserregistration-login.php
This template file is loaded when the login form is displayed, and the user is not logged in.
gravityformsuserregistration-loggedin.php
If the user is already logged in, this template will be loaded.

Both of these files will need to be placed in the top-level of your active theme. Outside of placing the files there, no additional configuration is needed. If the file exists, it will be used.
Customizing Template Files
When using these custom template files, the sky is the limit! Inside the template, you can load any code or output any markup that you need.
Keep in mind that these files will override the default markup automatically even if they』re blank, so be sure to include things like username and password fields if you still need to use them.
To help you start below you can find example content for both files that reproduce the default markup.
gravityformsuserregistration-login.php example
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081// Just a title to let you know the custom template is being loaded. Remove before going live.echo '

This is my custom Login Form - Not logged template

'; extract( $args ); /* Get the login form. */$form = GF_User_Registration::login_form_object(); /* Set the tab index. */GFCommon::$tab_index = gf_apply_filters( array( 'gform_tabindex', $form['id'] ), $tabindex, $form ); /* Enqueue needed scripts. */GFFormDisplay::enqueue_form_scripts( $form, false ); /* Prepare the form wrapper class. */$wrapper_css_class = GFCommon::get_browser_class() . ' gform_wrapper'; /* Ensure login redirect URL isn't empty. */if ( rgblank( $login_redirect ) ) {    $login_redirect = ( isset( $_SERVER['HTTPS'] ) ? 'https' : 'http' ) . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];} /* Open Gravity Form wrapper and form tag. */$html  = "

'; /* Display links. */if ( ! empty( $logged_out_links ) ) {         if ( GF_User_Registration::get_plugin_setting( 'custom_registration_page_enable' ) == '1' ) {        $registration_page = GF_User_Registration::get_plugin_setting( 'custom_registration_page' );        $register_url      = 'gf_custom' === $registration_page ? GF_User_Registration::get_plugin_setting( 'custom_registration_page_custom' ) : get_permalink( $registration_page );    } else {        $register_url = wp_registration_url();    }     $html .= '

';     } echo $html;
gravityformsuserregistration-loggedin.php example
1234567891011121314151617181920212223242526272829303132333435// Just a title to let you know the custom template is being loaded. Remove before going live.echo '

This is my custom Login Form - Logged in template

'; /* Prepare the logged in message. */if ( rgblank( $logged_in_message ) ) {    $logged_in_message = sprintf(        esc_html__( 'You are currently logged in as %s%s%s. %sLog out?%s', 'gravityformsuserregistration' ),        '', $current_user->display_name, '',        '', ''    );} else {    $logged_in_message = str_replace( '{logout_url}', '' . esc_html__( 'Logout', 'gravityformsuserregistration' ) . '', $logged_in_message );    $logged_in_message = GFCommon::replace_variables( $logged_in_message, array(), array(), false, false, false, 'text' );} /* Display the avatar and logged in message. */$html  = '

';$html .= filter_var( $logged_in_avatar, FILTER_VALIDATE_BOOLEAN ) ? get_avatar( $current_user->ID ) . '
' : null;$html .= $logged_in_message;$html .= '

'; /* Display links. */if ( ! empty( $logged_in_links ) ) {         foreach ( $logged_in_links as $link ) {                 $link['url']  = str_replace( '{logout_url}', esc_attr( wp_logout_url( $logout_redirect ) ), $link['url'] );        $link['url']  = GFCommon::replace_variables( $link['url'], array(), array(), false, false, false, 'text' );        $html        .= '' . esc_html( $link['text'] ) . '
';             }     } echo $html;

Creating Chained Selects with the Chained Selects Add-On

Pre-RequisitesSummaryCreating ChoicesSetupHeadersSelectsGenerating Choice FilesExporting From Google Drive/Google SheetsUploading Chained Select ChoicesLimitations

Pre-Requisites

Download and install the add-on
A Chained Selects field on your form

Summary
When creating Chained Selects in Gravity Forms, you will need to create a CSV file that will hold all of your available options. In this article, we will show you how to easily create a chained select field using the Chained Selects Add-On.
Creating Choices
First you will need to create the choices that will be available within the field. This is done by creating a CSV file.
In this example, we will be using Google Drive to create a CSV file, but other software such as Microsoft Excel can also be used.
Setup
Chained Selects requires a few different things within your CSV file to work properly:

Selects laid out in columns.
Column headers as select labels.

It should look something like this:

Headers
The first row contains the column header. This is essential, as it lays the foundation for each select.
Selects
Following the first row, each combination of options is laid out with subsequent options continuing to the right.
In the following example, the user would be selecting a car』s make, model, and year. Because of this, each option and subsequent child options need to be defined.

As seen above, if a user selected a Toyota, additional options of Camry, Matrix, and Prius would be available. Once the model is selected, the year would then be available.
Generating Choice Files
After you』ve set up your choices, you』ll need to generate a CSV to import into the Chained Selects field. We will use Google Drive as an example here, but you』re free to use anything you want, as long as the file is exported as a CSV.
Exporting From Google Drive/Google Sheets

To export your settings as a CSV, click on File at the top of the page, select Download as, then select Comma-separated values. The file will then be downloaded and ready to import into your Chained Select field.
Uploading Chained Select Choices
To upload your created CSV file, access your Chained Selects field and upload the file to the Import Choices field setting. Be sure to update your form when completed to retain your uploaded field choices.
Limitations
By default the CSV file being uploaded is limited to 5000 unique values allowed for each column and 1mb of file size. If you require going beyond these limits, you can alter them using gform_chainedselects_column_unique_values_limit and gform_chainedselects_max_file_size respectively.

Modifying Field Layout with CSS Ready Classes

IntroductionHow to Use Ready ClassesThe Ready Class NamesHalves (2 Columns)Thirds (3 Columns)Quarters (4 Columns)Inline (Fluid One Line)List ClassesList ColumnsInline ClassesList Height ClassesHorizontal Form LayoutHTML ClassesConfirmation ClassesOther ClassesQ & AAdditional Notes

Introduction

In Gravity Forms 1.5 we added 「Ready Classes」. Using these new classes, you can easily create more advanced alternative layouts for the fields in your forms. 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.

Note: These Ready Classes don』t apply to mobile devices. Responsive styling is used instead for these devices.

How to Use Ready Classes

To add a Ready Class to a field, go to the Form Editor and select the field you want to change. Under the 「Appearance」 tab in the Settings Sidebar, you will see an input called 「Custom CSS Class」.

Add the Ready Class name or names you want to add to the field here and then save the form.

Note that Ready Classes feature do NOT show in the Form Editor display. Save the form and you can review the classes being applied in the Preview screen.

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)

These classes are deprecated by the column features built directly into the Form Editor in Gravity Forms 2.5.

Note: These only work with the 「top label」 form layout option and are intended to be used in left half/right half pairings to work properly.

gf_left_halfThis places the field in the left column (left half) of a 2 column layout. This only works with the 「top label」 form layout option.

gf_right_halfThis places the field in the left column (right half) of a 2 column layout. This only works 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.

Thirds (3 Columns)

These classes are deprecated by the column features built directly into the Form Editor in Gravity Forms 2.5.

Note: These only work with the 「top label」 form layout option and are intended to be used in left third/middle third/right third pairings to work properly.

gf_left_thirdThis places the field in the left column (left third) of a 3 column layout. This only works with the 「top label」 form layout option. gf_middle_thirdThis places the field in the middle column (middle third) of a 3 column layout. This only works with the 「top label」 form layout option. gf_right_thirdThis places the field in the right column (right third) of a 3 column layout. This only works 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.

Quarters (4 Columns)

These classes are deprecated by the column features built directly into the Form Editor in Gravity Forms 2.5.

Note: These only work with the 「top label」 form layout option and are intended to be used in left third/middle third/right third pairings to work properly.

gf_first_quarterThis places the field in the first quarter of 4 column layout. This only works with the 「top label」 form layout option. gf_second_quarterThis places the field in the second quarter of 4 column layout. This only works with the 「top label」 form layout option. gf_third_quarterThis places the field in the third quarter of 4 column layout. This only works with the 「top label」 form layout option. gf_fourth_quarterThis places the field in the fourth quarter of 4 column layout. This only works with the 「top label」 form layout option.

To align four fields side by side (4 equal columns) you can add these classes. The four fields have to be adjacent to each other in the Form Builder. The gf_first_quarter class has to be added to the first field, the gf_second_quarter class to the second field, the gf_third_quarter class to the third field, and the gf_fourth_quarter to the fourth field.

Inline (Fluid One Line)

These classes are deprecated by the column features built directly into the Form Editor in Gravity Forms 2.5.

gf_inline
This places the field inline horizontally with other fields but does not create equally-spaced column layouts. This is useful for different sized fields or when you simply want a horizontal layout without actual column spacing.

List Classes

List Columns

These ready classes turn a multiple choice/checkbox list into an equally-spaced column format with the defined number of columns and orientation. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

The first group will fill a list from left to right for the correct number of columns, then descending in rows until the list is exahusted.

gf_list_2colgf_list_3colgf_list_4colgf_list_5col

The _vertical tagged classes will fill from top to bottom, left column first, splitting the list where needed to get the specified number of columns, with each column having as close to a similar number of entries as possible.

gf_list_2col_verticalgf_list_3col_verticalgf_list_4col_verticalgf_list_5col_vertical

Inline Classes

gf_list_inlineThis 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. See this article for an example using radio buttons.

List Height Classes

This applies a height value to 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_25gf_list_height_50gf_list_height_75gf_list_height_100gf_list_height_125gf_list_height_150

Horizontal Form Layout

gf_simple_horizontalNote: This only works with the 「top label」 form layout option. When added to 「CSS Class Name」 in your form settings will create a very simple horizontal form layout (think simple email address field and inline form button). The field label is hidden so using the placeholder option for the field is recommended. Please note that this is intended for very simple, single input form types. Also, it works best if you set the input size to 「large」 in the field settings.

HTML Classes

gf_alert_greenThis turns an HTML field and its contents into a green banner message. gf_alert_redThis turns an HTML field and its contents into a red banner message.gf_alert_yellowThis turns an HTML field and its contents into a yellow banner message. gf_alert_grayThis turns an HTML field and its contents into a gray banner message.gf_alert_blueThis turns an HTML field and its contents into a blue banner message.

Confirmation Classes

These classes can be added to the 「CSS Class Name」 input on an individual form』s settings page and will turn the confirmation message into a banner of the associated color. Note: this will only work with confirmation messages of the 「text」 type and not page or redirect confirmations.

gf_confirmation_simple_yellowThis turns the confirmation message into a banner with a yellow background. gf_confirmation_simple_grayThis turns the confirmation message into a banner with a gray background. gf_confirmation_yellow_gradientThis turns the confirmation message into a banner with a yellow gradient background. gf_confirmation_green_gradientThis turns the confirmation message into a banner with a green gradient background.

Other Classes

gf_scroll_textThis 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.

gf_hide_ampmThis 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_charleftThis 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. gf_invisibleThis hides a field, useful for field types where the Visibility setting is not available, like product fields.

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

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.

Additional 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.

Creating a Feed for the Mailchimp Add-On

SummaryScenarioStep 1: Create a FormStep 2: Create a Feed

Summary

A feed is the way you define how data is passed from your form submission to an external service. This article will step you through the process of setting up a simple feed. This article assumes that you have already setup the Mailchimp Add-on.

For details on all of the Mailchimp feed settings, refer to the Mailchimp feed settings reference guide.

Scenario

Our example here will focus capturing sign-ups for our team sports newsletter, and registering them automatically to an existing Mailchimp Audience.

Step 1: Create a Form

Firstly, let』s create the form we will be using as the basis for our Mailchimp Feed.

From your WordPress Dashboard, hover over the Gravity Forms icon, and select New Form in the dropdown that appears. Let』s call this form 「Mailchimp Form (Team Sports)」.Add the following fields to the form: Email, Address, Name, and Phone. Later, we will map these fields in our feed so they can be imported into Mailchimp. Click Update to save your form.

If you are following along, your form should look basically something like this.

Our sample team sports newsletter form.

Step 2: Create a Feed

To create a feed, hover over Settings at the top of the form and click Mailchimp in the drop-down menu. On the Mailchimp Feeds page that appears, click Add New to create a feed. The steps below show how to configure your feed.

Since we are creating a feed about team sports let』s Name our feed Team Sports Feed.In the Mailchimp Audience we』ll choose Team Sports. The Audience must be created in your Mailchimp account first for it to show up here. See this Mailchimp guide for more info on creating Audiences. Next, we』ll map each MailChimp field to the corresponding form field you want to use to populate that data. For example, we will match Email Address field to the Email field we created on our form earlier.

You can then select a Group for the user to be added to. We』ll select Soccer and Football and Assign to group: Always. The Group must be created in your Mailchimp account first for it to show up here. See Adding Mailchimp Subscriptions to Groups for more information.We』ll leave the Marketing Permissions blank. You can learn more about them in our Mailchimp feed setting reference.We won』t enable Double Opt-In or Mark subscriber as VIP on this form but you can learn more about both in the Mailchimp feed setting reference.For Tags we will be adding Sports, Team Sports, and newsletter.For the Note, we will add 「This user was added through our Team Sports feed.」 Notes can only be seen by the Mailchimp account owner. We don』t need Conditional Logic on this form. Conditional Logic allows you to add more stringent conditions as to when the feed runs. See our guides for more info. Click the Save Settings button to save your options.

That』s it! Whenever a user submits this form a new contact will be created in the Audience you specified on the feed. Of course, test it first!

Delete Entry Data after Submission

By default, Gravity Forms was designed to record all data submitted to it, so there isn』t an override to stop Gravity Forms from storing entry data upon submission. The reason for this is the entry must be saved so the data is available when notifications are sent and feed based add-ons, like PayPal and User Registration, are processed.
That said, Gravity Forms 2.4 did introduce Personal Data Settings which include the ablity to enable automatic deletion of entries after a specified number of days.
Bear in mind when entries are deleted, files associated with the entry are also deleted. If you want to keep the files, use the gform_field_types_delete_files filter.
There are also a number of third-party add-ons which can be used to delete entries either as the form submission ends or at a scheduled date/time:

Gravity Flow
Entry Automation by ForGravity
Gravity Perks – Disable Entry Creation by Gravity Wiz
Gravity Forms Encrypted Fields by PluginOwl
Gravity Forms Utility by Gravity+
Wider Gravity Forms Stop Entries by Jonny Allbut

If you would prefer not to use one of the above solutions you can use custom code in the theme functions.php file or a custom functionality plugin that will wait until the data is recorded, and then go in and remove the entry that was just created. To do so, you would use the following code which works with Gravity Forms 1.8 and newer:
// Target submissions from form ID 1.
// Change gform_after_submission_1 to reflect your target form ID, or use gform_after_submission to target all forms.
add_action( 'gform_after_submission_1', 'remove_form_entry' );
function remove_form_entry( $entry ) {
GFAPI::delete_entry( $entry['id'] );
}

The following code is applicable to Gravity Forms 1.7 and earlier only.
add_action('gform_after_submission_1', 'remove_form_entry', 10, 2);
function remove_form_entry($entry, $form){
global $wpdb;

$lead_id = $entry['id'];
$lead_table = RGFormsModel::get_lead_table_name();
$lead_notes_table = RGFormsModel::get_lead_notes_table_name();
$lead_detail_table = RGFormsModel::get_lead_details_table_name();
$lead_detail_long_table = RGFormsModel::get_lead_details_long_table_name();

//Delete from detail long
$sql = $wpdb->prepare(" DELETE FROM $lead_detail_long_table
WHERE lead_detail_id IN(
SELECT id FROM $lead_detail_table WHERE lead_id=%d
)", $lead_id);
$wpdb->query($sql);

//Delete from lead details
$sql = $wpdb->prepare("DELETE FROM $lead_detail_table WHERE lead_id=%d", $lead_id);
$wpdb->query($sql);

//Delete from lead notes
$sql = $wpdb->prepare("DELETE FROM $lead_notes_table WHERE lead_id=%d", $lead_id);
$wpdb->query($sql);

//Delete from lead
$sql = $wpdb->prepare("DELETE FROM $lead_table WHERE id=%d", $lead_id);
$wpdb->query($sql);

}

The expected behavior would be that the entry would not exist in the Gravity Forms database tables after submission. If you are having issues with this script, please read up on our gform_after_submission hook.

Creating Multi-Page Forms

IntroductionSetupOptions

Introduction

A form with quite a few fields can look a daunting for someone filling out the form. Many times, the form can be simplified by spanning it across several pages. Due to less content being displayed at a time, large forms will not only become more pleasant but also load faster on your site because less information is being loaded at a time. In this article, we will show you how to create a multi-page form using Gravity Forms.

This animation illustrates how to create a multi-page form.

Setup

This article assumes that you have a basic understanding in creating forms, and have already created a form with multiple fields. If you need more information, see our form creation article. Now that you have your form fields in place, you just need to separate the fields by page. To do this, go to the right of the form editor and look inside the Standard Fields section. Inside this section, click and drag the Page field type and drop it between two fields where you would like a page break to appear.

You should see that 3 items have been added to the form editor. These items allow you to determine where pages begin and end. 2 of these items, Begin Paging and End Paging simply define that this form is a multi-page form. These items cannot be moved and will always be located at the beginning and end of the form editor when editing a multi-page form.You should also see a Page Break field type displayed within the form editor. This item separates the individual pages in a multi-page form. The items above it will be on the first page, and items after it will be on the second page.

If you want to add additional pages to a multi-page form, all you have to do is click on the Page field type again to add an additional page break and position it where you would like the previous page to end and the next page to begin. You can add as many page breaks as you want.

Options

To modify the behavior of multi-page forms, options exist within the individual items that are added using the Page field. For more information on how you can modify settings specific to multi-page forms, take a look at the Page Break field type article.

Dashboard Widget

The dashboard widget is installed automatically when you activate Gravity Forms and can be accessed from the WordPress dashboard.
This widget provides you with some basic information about the forms you have created. You can quickly see which forms have unread entries, how many unread entries, and the total number of entries on a form by form basis.
Clicking the form name or the number of entries will take you to the entry screen for that form. The dashboard widget shows unread entries and total entries.
You may hide the dashboard widget by editing your Screen Options for the Dashboard.

Creating Customized Form Notification Emails

IntroductionFormatting Your MessageUsing Merge TagsConditional ShortcodesBasic ExampleExternal Resources

Introduction
A combination of HTML, CSS styling and Gravity Forms merge tags can be used to create a template that will be populated with dynamic content allowing you to style and brand your notifications. In this article, we』ll give you a basic understanding of how to create a notification email template for customizing the message body of your notifications. To begin, you will visit a specific notification for your form.

IMPORTANT: When customizing, remember to disable the Auto-formatting setting in your notification.

Formatting Your Message
The message body of your email can be created and formatted by using either a Visual editor or Text editor. The Visual editor provides a basic formatting toolbar for quick HTML templating. If you would like more control over your HTML, you can switch to the Text editor and provide any HTML markup for inclusion in your email. Please note that not all HTML tags and CSS styles are supported across all email clients. To ensure WordPress does not interfere with your formatting customizations, please disable the auto-formatting setting.
If you opt to add your own custom HTML tags using the Text tab, make sure to stick to the Text tab, the WordPress classic editor used for notifications is known to remove certain HTML tags when switching between Text and Visual tabs.
To prevent switching the tabs by mistake, you can use the following snippet to disable the Visual tab completely.
add_action( 'admin_init', 'disable_tinymce_for_notifications');
function disable_tinymce_for_notifications() {
if ( ( RGForms::is_gravity_page() && rgget( 'page' ) === 'gf_edit_forms' && rgget( 'view' ) === 'settings' ) && rgget( 'subview' ) === 'notification' ) {
add_filter( 'user_can_richedit', '__return_false' );
}
}

You can add the above snippet to your site as usual.
Using Merge Tags
To the right of the editor, you will find a merge tag drop down. This will insert merge tags into the body of your message. These merge tags will be used to dynamically populate content in your notification message based on the entry being processed.
Conditional Shortcodes
It is also possible to conditionally show blocks of content based upon values from the entry being processed. The conditional shortcode can be used to conditionally include content in your notification.
Basic Example
The following is a basic example of content that could be within the email body.

Email Header

Hello {Name (First):1.3}{Name (Last):1.6},

{form_title}

This could be some footer content.

In the above example, we』re doing the following:

Placing a header within h1 tags to format the content as a header.
Embedding an image using an img tag.
Greeting the user by dynamically populating their first name and last name using merge tags.
Wrapping some content with a small margin.
Outputting the form title using the {form_title} and styling it with green text.
Outputting static content that is styled with red text.

External Resources
If you need more information on how to use HTML and CSS to style content, the following resources are suggested:

HTML Tutorial by W3Schools
CSS Tutorial by W3Schools

CSS Targeting Examples

IntroductionVersion SpecificityForm WrapperForm HeaderForm HeadingForm TitleForm DescriptionForm BodyForm BodyForm ContainerForm ItemsInput Field ContainerInput Field Description ContainerStandard Field LabelRequired Field Indicator (Asterisk)Standard FieldsText FieldDrop-Down (Select) FieldParagraph (Textarea) FieldMultiple-Choice (Radio) ListMultiple-Choice (Radio) List ItemsMultiple-Choice (Radio) InputsCheckbox ListCheckbox List ItemsCheckbox InputsAdvanced FieldsAdvanced Field (multi-field) ContainerAdvanced Field – Left ContainerSub-Label: Advanced Field – Left ContainerAdvanced Field – Right ContainerSub-Label: Advanced Field – Right ContainerAdvanced Fields – Full ContainerSub-Label: Advanced Field – Full ContainerTime – Hours ContainerTime – Hours Input FieldSub-Label: Time – HoursTime – Minutes ContainerTime – Minutes Input FieldSub-Label: Time – MinutesTime – AM/PM ContainerTime – AM/PM SelectorDate – Input Field (Datepicker Option)Date – Icon Image (Datepicker Option)Date – Month ContainerDate – Month Input FieldSub-Label: Date – MonthDate – Day ContainerDate – Day Field InputSub-Label: Date – DayDate – Year ContainerDate – Year Input FieldSub-Label: Date – YearHTML 5 FieldsEmail Input Field (HTML 5 Option)Telephone Input Field (HTML 5 Option)Website Input Field (HTML 5 Option)Section BreaksSection Break ContainerSection Break TitleSection Break DescriptionCaptcha FieldsReCaptcha ContainerCaptcha Container (Really Simple Captcha Option)Captcha Image (Really Simple Captcha Option)Captcha Input Field (Really Simple Captcha Option)Form FooterForm FooterSubmit ButtonSubmit Button (image)Form ConfirmationInline Confirmation MessageValidation ErrorsValidation Error MessageValidation – Error ContainerValidation – Error Description MessageMulti-Page Form FieldsMulti-Page Form Progress Bar ContainerMulti-Page Form Progress Bar TitleMulti-Page Form Progress BarMulti-Page Form Progress Bar – Percentage CompletedMulti-Page Form Steps ContainerMulti-Page Form StepMulti-Page Form Active StepMulti-Page Form PageMulti-Page Form FooterMulti-Page Form – Next ButtonMulti-Page Form – Previous ButtonMulti-Page Form – Submit ButtonList FieldsList Field ContainerList FieldList Field Table HeadersList Field Table RowsList Field Table Cells

Introduction
This article shows usage examples for targeting Gravity Forms elements.
Generally  we illustrate one example that would be generic for all forms, and then one (or two) that would be specific to a unique form ID. If you』re styling a specific form, you would simply view your source, find the form ID and replace the ID in my examples with your own.
You』ll note that these examples are more specific (ie: longer) than what you might need to accomplish the styling, but better CSS specificity makes overriding inherited theme styles much easier.
Version Specificity
These examples have been updated to reflect the changes to markup made in Gravity Forms 2.5. Where an example would be different in different version, it is marked in the text:

「legacy markup」 — targeting for Gravity Forms versions prior to 2.5, or forms with the enable legacy markup setting turned on.
「standard markup」 — targeting needed for forms created under Gravity Forms 2.5 and later, or older forms with the enable legacy markup setting turned off.

Form Wrapper
Contains the entire Gravity Form

example: the main form wrapper (div) – applies to all forms
body .gform_wrapper { border: 1px solid red }

example: the main form wrapper (div) – applies just to form ID
body #gform_wrapper_1 { border: 1px solid red }

The following classes are applied to the form wrapper based on whether or not legacy mode is enabled for a form.

example: the main form wrapper (div) – applies to all standard markup forms
body .gform_wrapper.gravity-theme { border: 1px solid red }

example: the main form wrapper (div) – applies to all forms using legacy markup.
body .gform_wrapper.gform_legacy_markup_wrapper { border: 1px solid red }

Form Header
Form Heading
Contains the form title and description

example: the form heading section (div) – applies to all forms
body .gform_wrapper .gform_heading { border: 1px solid red }

example: the form heading section (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_heading { border: 1px solid red }

Form Title

example: the form title (h3) – applies to all forms
body .gform_wrapper .gform_heading .gform_title { color: red }

example: the form title (h3) – applies just to form ID #1
body #gform_wrapper_1 .gform_heading .gform_title { color: red }

Form Description

example: the form description (span) – applies to all forms
body .gform_wrapper .gform_heading .gform_description { border: 1px solid red }

example: the form description (span) – applies just to form ID #1
body #gform_wrapper_1 .gform_heading .gform_description { border: 1px solid red }

Form Body
Form Body
Contains the main form content

example: the form body section (div) – applies to all forms
body .gform_wrapper .gform_body {border: 1px solid red}

example: the form body section (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body {border: 1px solid red}

Form Container
Used to structure all of the form elements

example: the form container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields {border: 1px solid red}

example: the form container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields {border: 1px solid red}

Form Items
Individual items containing each form element

example: the form item (div | fieldset) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield {border: 1px solid red}

example: the form item (div | fieldset) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield {border: 1px solid red}

Input Field Container
Wraps the actual form element inside the containing item

example: input field container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container {border: 1px solid red}

example: input field container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container {border: 1px solid red}

example: input field container (div) – applies just to specific form field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container {border: 1px solid red}

Input Field Description Container
Contains the field description inside the containing list item

example: input field description container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_description {border: 1px solid red}

example: input field description container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_description {border: 1px solid red}

example: input field description container (div) – applies just to specific field description (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_description {border: 1px solid red}

Standard Field Label

example: standard field label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {color: red}

example: standard field label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label {color: red}

example: standard field label (label) – applies just to specific field label (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_label {color: red}

Required Field Indicator (Asterisk)

example: required field indicator (span) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: red}

example: required field indicator (span) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: red}

example: required field indicator (span) – applies just to specific indicator (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_label .gfield_required {color: red}

Standard Fields
Text Field

example: standard text field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] {border: 1px solid red}

example: standard text field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text] {border: 1px solid red}

example: standard text field (input) – applies just to specific text field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=text] {border: 1px solid red}

Drop-Down (Select) Field

example: standard drop-down field (select) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield select {border: 1px solid red}

example: standard drop-down field (select) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield select {border: 1px solid red}

example: standard drop-down field (select) – applies just to specific drop-down field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield select {border: 1px solid red}

Paragraph (Textarea) Field

example: standard paragraph field (textarea) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield textarea {border: 1px solid red}

example: standard paragraph field (textarea) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea {border: 1px solid red}

example: standard paragraph field (textarea) – applies just to specific paragraph field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield textarea {border: 1px solid red}

Multiple-Choice (Radio) List
Used to structure all of the individual list choices

example: standard multiple-choice list (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio {border: 1px solid red}

example: standard multiple-choice list (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_radio {border: 1px solid red}

example: standard multiple-choice list (div) – applies just to specific multiple-choice list (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio {border: 1px solid red}

Multiple-Choice (Radio) List Items
Individual list choices

example: standard multiple-choice list item (div) – applies to all standard markup forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio .gchoice {border: 1px solid red}

legacy example: standard multiple-choice list item (li) – applies to all forms using legacy markup.
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio li {border: 1px solid red}

example: standard multiple-choice list item (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_radio .gchoice {border: 1px solid red}

example: standard multiple-choice list item (div) – applies just to specific multiple-choice list item (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio .gchoice {border: 1px solid red}

Multiple-Choice (Radio) Inputs

example: standard multiple-choice input (radio) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio input[type=radio] {border: 1px solid red}

example: standard checkbox input (radio) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_radio input[type=radio] {border: 1px solid red}

example: standard checkbox input (radio) – applies just to specific multiple-choice inputs (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio input[type=radio] {border: 1px solid red}

Checkbox List
Used to structure all of the individual list choices

example: standard checkbox list (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox {border: 1px solid red}

example: standard checkbox list (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox {border: 1px solid red}

example: standard checkbox list (div) – applies just to specific checkbox list (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_checkbox {border: 1px solid red}

Checkbox List Items
Individual list choices

example: standard checkbox list item (div) – applies to all standard markup forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox .gchoice {border: 1px solid red}

legacy example: standard checkbox list item (li) – applies to all forms using legacy markup.
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li {border: 1px solid red}

example: standard checkbox list item (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox .ghcoice {border: 1px solid red}

example: standard checkbox list item (div) – applies just to specific checkbox list item (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_checkbox .ghchoice {border: 1px solid red}

Checkbox Inputs

example: standard checkbox input (checkbox) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox input[type=checkbox] {border: 1px solid red}

example: standard checkbox input (checkbox) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox input[type=checkbox] {border: 1px solid red}

example: standard checkbox input (checkbox) – applies just to specific checkbox list inputs (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_checkbox input[type=checkbox] {border: 1px solid red}

Advanced Fields
Advanced Field (multi-field) Container
Wraps the different fields in multi-field sections like the name fields, address fields, etc.*

example: advanced field container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex {border: 1px solid red}

example: advanced field container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex {border: 1px solid red}

example: advanced field container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex {border: 1px solid red}

Advanced Field – Left Container
Contains the left-positioned inputs and sub-labels in the advanced fields

example: advanced field – left container (span) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left {border: 1px solid red}

example: advanced field – left container (span) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_left {border: 1px solid red}

example: advanced field – left container (span) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_left {border: 1px solid red}

Sub-Label: Advanced Field – Left Container
The sub-label beneath the left-positioned elements in the advanced fields

example: advanced field – left container sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left label {color: red}

example: advanced field – left container sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_left label {color: red}

example: advanced field – left container sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_left label {color: red}

Advanced Field – Right Container
Contains the right-positioned inputs and sub-labels in the advanced fields

example: advanced field – right container (span) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right {border: 1px solid red}

example: advanced field – right container (span) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_right {border: 1px solid red}

example: advanced field – right container (span) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_right {border: 1px solid red}

Sub-Label: Advanced Field – Right Container
The sub-label beneath the right-positioned elements in the advanced fields

example: advanced field – right container sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right label {color: red}

example: advanced field – right container sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_right label {color: red}

example: advanced field – right container sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_right label {color: red}

Advanced Fields – Full Container
Contains the full width inputs and sub-labels in the advanced fields

example: advanced field – full container (span) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full {border: 1px solid red}

example: advanced field – full container (span) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_full {border: 1px solid red}

example: advanced field – full container (span) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_full {border: 1px solid red}

Sub-Label: Advanced Field – Full Container
The sub-label beneath the full width elements in the advanced fields

example: advanced field – full container sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full label {color: red}

example: advanced field – full container sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_full label {color: red}

example: advanced field – full container sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_full label {color: red}

Time – Hours Container
Contains the hours input field and sub-label

example: time – hours container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour {border: 1px solid red}

example: time – hours container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_hour {border: 1px solid red}

example: time – hours container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_hour {border: 1px solid red}

Time – Hours Input Field

example: time – hours input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour input {border: 1px solid red}

example: time – hours input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_hour input {border: 1px solid red}

example: time – hours input field (input) – applies just to specific form field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_hour input {border: 1px solid red}

Sub-Label: Time – Hours

example: time – hours sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label {color: red}

example: time – hours sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_hour label {color: red}

example: time – hours sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_hour label {color: red}

Time – Minutes Container
Contains the minutes input field and sub-label

example: time – minutes container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute {border: 1px solid red}

example: time – minutes container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_minute {border: 1px solid red}

example: time – minutes container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_minute {border: 1px solid red}

Time – Minutes Input Field

example: time – minutes input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute input {border: 1px solid red}

example: time – minutes input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_minute input {border: 1px solid red}

example: tim – minutes input field (input) – applies just to specific form field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_minute input {border: 1px solid red}

Sub-Label: Time – Minutes

example: time – minutes sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label {color: red}

example: time – minutes sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_minute label {color: red}

example: time – minutes sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_minute label {color: red}

Time – AM/PM Container
Contains the minutes input field and sub-label

example: time – AM/PM container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm {border: 1px solid red}

example: time – AM/PM container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_ampm {border: 1px solid red}

example: time – AM/PM container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_ampm {border: 1px solid red}

Time – AM/PM Selector

example: time – AM/PM selector (select) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm select {border: 1px solid red}

example: time – AM/PM selector (select) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_ampm select {border: 1px solid red}

example: time – AM/PM selector (select) – applies just to specific drop-down field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_ampm select {border: 1px solid red}

Date – Input Field (Datepicker Option)

example: date – input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .datepicker {border: 1px solid red}

example: date – input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .datepicker {border: 1px solid red}

example: date – input field (input) – applies just to specific date field input (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .datepicker {border: 1px solid red}

Date – Icon Image (Datepicker Option)

example: date – icon image (img) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield img {border: 1px solid red}

example: date – icon image (img) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield img {border: 1px solid red}

example: date – icon image (img) – applies just to specific date field input (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield img {border: 1px solid red}

Date – Month Container
Contains the month input field and sub-label

example: date – month container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month {border: 1px solid red}

example: date – month container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month {border: 1px solid red}

example: date – month container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_month {border: 1px solid red}

Date – Month Input Field

example: date – month input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month input {border: 1px solid red}

example: date – month input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month input {border: 1px solid red}

example: date – month input field (input) – applies just to specific form field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_month input {border: 1px solid red}

Sub-Label: Date – Month

example: date – month sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label {color: red}

example: date – month sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month label {color: red}

example: date – month sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_month label {color: red}

Date – Day Container
Contains the day input field and sub-label

example: date – day container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day {border: 1px solid red}

example: date – day container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day {border: 1px solid red}

example: date – day container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_day {border: 1px solid red}

Date – Day Field Input

example: date – day input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day input {border: 1px solid red}

example: date – day input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day input {border: 1px solid red}

example: date – day input field (input) – applies just to specific form field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_day input {border: 1px solid red}

Sub-Label: Date – Day

example: date – day sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label {color: red}

example: date – sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day label {color: red}

example: date – sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_day label {color: red}

Date – Year Container
Contains the month input field and sub-label

example: date – year container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year {border: 1px solid red}

example: date – year container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year {border: 1px solid red}

example: date – year container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_year {border: 1px solid red}

Date – Year Input Field

example: date – year input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year input {border: 1px solid red}

example: date – year input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year input {border: 1px solid red}

example: date – year input field (input) – applies just to specific form field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_year input {border: 1px solid red}

Sub-Label: Date – Year

example: date – year sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label {color: red}

example: date – year sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year label {color: red}

example: date – year sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_year label {color: red}

HTML 5 Fields
Email Input Field (HTML 5 Option)

example: HTML 5 email field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email] {border: 1px solid red}

example: HTML 5 email field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email] {border: 1px solid red}

example: HTML 5 email field (input) – applies just to specific email field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=email] {border: 1px solid red}

Telephone Input Field (HTML 5 Option)

example: HTML 5 telephone field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel] {border: 1px solid red}

example: HTML 5 telephone field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel] {border: 1px solid red}

example: HTML 5 telephone field (input) – applies just to specific telephone field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=tel] {border: 1px solid red}

Website Input Field (HTML 5 Option)

example: HTML 5 website field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url] {border: 1px solid red}

example: HTML 5 website field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url] {border: 1px solid red}

example: HTML 5 website field (input) – applies just to specific website field (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=url] {border: 1px solid red}

Section Breaks
Section Break Container
Wraps the section break elements inside the containing list item

example: section break container (li) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gsection {border: 1px solid red}

example: section break container (li) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gsection {border: 1px solid red}

example: section break container (li) – applies just to specific section break container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gsection {border: 1px solid red}

Section Break Title

example: section break title (h2) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_title {color: red}

example: section break container (li) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gsection .gsection_title {color: red}

example: section break container (li) – applies just to specific section break title (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gsection .gsection_title {color: red}

Section Break Description

example: section break description (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_description {border: 1px solid red}

example: section break description (li) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gsection .gsection_description {border: 1px solid red}

example: section break description (li) – applies just to specific section break description (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gsection .gsection_description {border: 1px solid red}

Captcha Fields
ReCaptcha Container
Third party markup inserted dynamically – contains the ReCaptcha form fields

example: ReCaptcha container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_recaptcha {border: 1px solid red}

example: ReCaptcha container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_recaptcha {border: 1px solid red}

Captcha Container (Really Simple Captcha Option)
Wraps the captcha images and form elements

example: captcha container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container {border: 1px solid red}

example: captcha container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container {border: 1px solid red}

Captcha Image (Really Simple Captcha Option)

example: captcha image (img) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha {border: 1px solid red}

example: captcha image (img) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha {border: 1px solid red}

Captcha Input Field (Really Simple Captcha Option)

example: captcha input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha_input_container input {border: 1px solid red}

example: captcha input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha_input_container input {border: 1px solid red}

Form Footer
Form Footer
Contains the submit button and admin edit link

example: the form footer section (div) – applies to all forms
body .gform_wrapper .gform_footer {border: 1px solid red}

example: the form footer section (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_footer {border: 1px solid red}

Submit Button

example: the form submit button (input) – applies to all forms
body .gform_wrapper .gform_footer input[type=submit] {border: 1px solid red}

example: the form submit button (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_footer input[type=submit] {border: 1px solid red}

Submit Button (image)

example: the form submit button (image) – applies to all forms
body .gform_wrapper .gform_footer input[type=image] {border: 1px solid red}

example: the form submit button (image) – applies just to form ID #1
body #gform_wrapper_1 .gform_footer input[type=image] {border: 1px solid red}

Form Confirmation
Inline Confirmation Message
Displays on same page upon successful completion of the form

example: inline confirmation message (div) – applies to all forms
body .gform_confirmation_message {border: 1px solid red}

Validation Errors
Validation Error Message

example: validation error message (div) – applies to all standard markup forms
body .gform_wrapper .gform_validation_error {border: 1px solid red}

legacy example: validation error message (div) – applies to all forms using legacy markup.
body .gform_wrapper .validation_error {border: 1px solid red}

example: validation error message (div) – applies just to form ID #1
body #gform_wrapper_1 .validation_error {border: 1px solid red}

Validation – Error Container
Container for fields with invalid values

example: validation – error container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield_error {border: 1px solid red}

example: validation – error container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield_error {border: 1px solid red}

Validation – Error Description Message
Description/error message below inputs with invalid values

example: validation – error description message (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {border: 1px solid red}

example: validation – error description message (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield_error .validation_message {border: 1px solid red}

Multi-Page Form Fields
Multi-Page Form Progress Bar Container

example: multi-page form progress bar container (div) – applies to all forms
body .gform_wrapper .gf_progressbar_wrapper {border: 1px solid red}

example: multi-page form progress bar container (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_progressbar_wrapper {border: 1px solid red}

Multi-Page Form Progress Bar Title

example: multi-page form progress bar title (h3) – applies to all forms
body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar_title {color: red}

example: multi-page form progress bar title (h3) – applies just to form ID #1
body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar_title {color: red}

Multi-Page Form Progress Bar

example: multi-page form progress bar (div) – applies to all forms
body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar {border: 1px solid red}

example: multi-page form progress bar (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar {border: 1px solid red}

Multi-Page Form Progress Bar – Percentage Completed

example: multi-page form progress bar – percentage completed (div) – applies to all forms
body .gform_wrapper .gf_progressbar .gf_progressbar_percentage {border: 1px solid red}

example: multi-page form progress bar – percentage completed (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_progressbar .gf_progressbar_percentage {border: 1px solid red}

Multi-Page Form Steps Container
Contains the user-defined steps text

example: multi-page form steps container (div) – applies to all forms
body .gform_wrapper .gf_page_steps {border: 1px solid red}

example: multi-page form steps container (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_page_steps {border: 1px solid red}

Multi-Page Form Step

example: multi-page form step (div) – applies to all forms
body .gform_wrapper .gf_page_steps .gf_step {color: red}

example: multi-page form step (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_page_steps .gf_step {color: red}

Multi-Page Form Active Step

example: multi-page form active step (div) – applies to all forms
body .gform_wrapper .gf_page_steps .gf_step_active {color: red}

example: multi-page form active step (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_page_steps .gf_step_active {color: red}

Multi-Page Form Page
Wraps each 「paged」 set of fields

example: multi-page form page (div) – applies to all forms
body .gform_wrapper .gform_body .gform_page {border: 1px solid red}

example: multi-page form page (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_page {border: 1px solid red}

Multi-Page Form Footer
Contains previous and next paging buttons

example: multi-page form footer (div) – applies to all forms
body .gform_wrapper .gform_body .gform_page_footer {border: 1px solid red}

example: multi-page form footer (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_page_footer {border: 1px solid red}

Multi-Page Form – Next Button

example: multi-page form – next button (input) – applies to all forms
body .gform_wrapper .gform_body .gform_page_footer .gform_next_button {border: 1px solid red}

example: multi-page form – next button (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_page_footer .gform_next_button {border: 1px solid red}

Multi-Page Form – Previous Button

example: multi-page form – previous button (input) – applies to all forms
body .gform_wrapper .gform_body .gform_page_footer .gform_previous_button {border: 1px solid red}

example: multi-page form – previous button (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_page_footer .gform_previous_button {border: 1px solid red}

Multi-Page Form – Submit Button

example: multi-page form – submit button (input) – applies to all forms
body .gform_wrapper .gform_body .gform_page_footer .gform_button {border: 1px solid red}

example: multi-page form – submit button (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_page_footer .gform_button {border: 1px solid red}

List Fields
List Field Container
(div) wraps the list field

example: list field container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list {border: 1px solid red}

example: list field container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list {border: 1px solid red}

example: list field container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_list {border: 1px solid red}

List Field
List field structure that contains the list field inputs

example: list field (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list .gfield_list {border: 1px solid red}

example: list field (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list .gfield_list {border: 1px solid red}

example: list field (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_list .gfield_list {border: 1px solid red}

List Field Table Headers
Targets the individual column headers (labels)

example: column header (div) – applies to all standard markup forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list .gfield_list_header {color: red}

legacy example: column header (th) – applies to all forms using legacy markup.
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list thead th {color: red}

example: column header (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list .gfield_list_header {color:red}

example: column header (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list .gfield_list_header {color: red}

List Field Table Rows
Targets the individual HTML table rows – useful for specifying sizes or creating alternating-color row styles

example: odd-numbered row – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_row_odd {border: 1px solid red}

example: odd-numbered row – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_row_odd {border: 1px solid red}

example: odd-numbered row – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list .gfield_list .gfield_list_row_odd {border: 1px solid red}

example: even-numbered row – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_row_even {border: 1px solid red}

example: even-numbered row – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_row_even {border: 1px solid red}

example: even-numbered row – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list .gfield_list .gfield_list_row_even {border: 1px solid red}

List Field Table Cells
Targets the list field cells

example: list cell – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_cell {border: 1px solid red}

example: list cell – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_cell {border: 1px solid red}

example: list cell – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list .gfield_list .gfield_list_cell {border: 1px solid red}