Author 诗语

Credit Card Processing Error Messages

Authorize.NetPayPal Payments Pro

If there is an error processing a credit card, the third-party payment processor will return an error code indicating the issue. The following messages may be displayed.
Authorize.Net

This credit card has been declined by your bank. Please use another form of payment.
The credit card has expired.
The merchant does not accept this type of credit card.
The address provided does not match the billing address of the cardholder. Please verify the information and try again.
The transaction amount is greater than the maximum amount allowed.
There was an error processing your credit card. Please verify the information and try again.
NOTE: Only certain error codes are used by the plugin. If the error code returned is not used by the plugin, this error message is the default error message displayed. Further research will need to be done to figure out the exact issue. For those familiar with HTML, the error message from the processor is displayed as an HTML comment in the page source. Because the message is often cryptic, it is not displayed to the customer. If the Gravity Forms Logging Add-On is used and set to log all messages, this message will be available in the log as well.

PayPal Payments Pro

This credit card has been declined by your bank. Please use another form of payment.
The credit card has expired.
The merchant does not accept this type of credit card.
There was an error processing your credit card. Please verify the information and try again.
There was an error processing your request. Your credit card was not charged. Please try again.
NOTE: Only certain error codes are used by the plugin. If the error code returned is not used by the plugin, this error message is the default error message displayed. Further research will need to be done to figure out the exact issue. For those familiar with HTML, the error message from the processor is displayed as an HTML comment in the page source. Because the message is often cryptic, it is not displayed to the customer. For those familiar with HTML, the error message from the processor is displayed as an HTML comment in the page source. Because the message is often cryptic, it is not displayed to the customer.

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.

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}

Gravity Forms Custom Development

CodeableJob Board

If you need to customize Gravity Forms to fit your needs or add a functionality that is not solved by an add-on or a help document, you might need to hire a developer to work on your particular challenge. There are many, many freelance developers and agencies available that offer WordPress development and customization assistance, but we would like to mention two particular areas.
Codeable
Need to customize Gravity Forms to suit some particular need? Gravity Forms has partnered with Codeable, the #1 outsourcing service for WordPress, to provide Gravity Forms customization services. They can provide quality development from hand-picked Gravity Forms specialists for any project size and budget, and can quickly provide a no obligation estimate of what it may cost. You can reach them via: Get Started Now!
Job Board
If you are looking for someone to work on your project, or if you are offering your services to help, check out our new Community Forum Job Board as a possible starting place.
We do not vet or provide recommendations for any individual developer there, it is an open forum, but our community is certainly full of talented folks that may be able to help get you where your project needs to be!

Custom Field Merge Tags

SummaryUsageExample

Summary

Display a custom field value from the post/page the form was submitted from. These fields could be added through WordPress Custom Fields, through register_meta, or through a plugin like ACF, Pods or MetaBox.

Usage

{custom_field:[fieldname]}

Example

{custom_field:author_address} {custom_field:zipcode}

Create a Custom Field

IntroductionExamples

Introduction
When using the Settings API you can define a custom field type by creating a function called settings_{your_custom_field_type}. The text after the first underscore will be what you decided to name your type. The function will run for every field of that type.

Important: The Settings API is not used to create custom form fields. To create custom form fields you would need to extend the GF_Field class, part of the Field Framework.

Examples
The following example renders the field for the field type my_custom_field_type. This function creates two text box fields.:
public function plugin_settings_fields() {
return
array(
array(
'title' => 'This is the title for Section 1',
'description' => 'This is a description of the purpose of Section 1',
'fields' => array(
array(
'label' => 'My Custom Field',
'type' => 'my_custom_field_type',
'name' => 'my_custom_field'
),
)
),
);
}

public function settings_my_custom_field_type(){
?>

settings_text(
array(
'label' => 'Item 1',
'name' => 'my_custom[1]',
'default_value' => 'Item 1'
)
);
$this->settings_text(
array(
'label' => 'Item 2',
'name' => 'my_custom[2]',
'default_value' => 'Item 2'
)
);
}

The following example has a custom field type named 「text_with_checkbox」. This custom type creates a text box field and a checkbox field.
public function plugin_settings_fields() {
return
array(
array(
'title' => 'Custom Types',
'fields' => array(
array(
'type' => 'text_with_checkbox',
'name' => 'text_checkbox',
'label' => 'Text box with a checkbox',
),
),
),
)
}

public function settings_text_with_checkbox(){
?>

settings_text(
array(
'label' => 'Text Box With Checkbox',
'name' => 'txt_cbx[1]',
'default_value' => 'Item 1'
)
);

$this->settings_checkbox(
array(
'label' => 'Checkbox',
'choices' => array(
array(
'label' => 'Checkbox',
'name' => 'txt_cbx[2]',
),
),
)
);
}

Custom Logging Statements

IntroductionLogging evaluation of conditional logicLogging field validation errorsLogging saved valuesWriting to the core logWriting to the add-on log

Note: As of Gravity Forms 2.4, the following non-dismissible notice will be displayed on every WordPress admin page when logging is enabled:

Refer to our Logging and Debugging article for more information.
Introduction
While Gravity Forms and its add-ons include numerous logging statements sometimes you may need to add more. For example, standard logging statements don』t include the evaluation of conditional logic rules or field validation failures.
Find out how to enable logging with Gravity Forms 2.2+ in the Logging and Debugging article, older versions of Gravity Forms would require the Logging Add-On.
Logging evaluation of conditional logic
If you are having an issue with notifications not being sent due to the conditional logic rules not being met you can see exactly how the conditional logic rule is configured and what the actual field value was by using the gform_is_value_match hook in your theme functions.php file.
12345678add_filter( 'gform_is_value_match', 'log_conditional_logic_evaluation', 20, 6 );function log_conditional_logic_evaluation( $is_match, $field_value, $target_value, $operation, $source_field, $rule ) {    GFCommon::log_debug( 'gform_is_value_match: $rule => ' . print_r( $rule, 1 ) );    GFCommon::log_debug( 'gform_is_value_match: $field_value => ' . print_r( $field_value, 1 ) );    GFCommon::log_debug( 'gform_is_value_match: $is_match => ' . var_export( $is_match, 1 ) );     return $is_match;}
Logging field validation errors
Field validation failures can be logged using the gform_validation hook in your theme functions.php file.
1234567891011add_filter( 'gform_validation', 'log_validation_errors', 50 );function log_validation_errors( $validation_result ) {    $form = $validation_result['form'];    foreach ( $form['fields'] as $field ) {        if ( $field->failed_validation ) {            GFCommon::log_error( "form #{$form['id']}: validate() - failed: {$field->label}({$field->id} - {$field->type}) - message: {$field->validation_message}" );        }    }     return $validation_result;}
Logging saved values
Values being saved can be logged using the gform_save_field_value hook in your theme functions.php file.
12345678910add_filter( 'gform_save_field_value', 'log_saved_values', 50, 5 );function log_saved_values( $value, $entry, $field, $form, $input_id ) {     $input_name = 'input_' . str_replace( '.', '_', $input_id );     GFCommon::log_debug( "log_save_field_value: Input ID: {$input_id}. POST value => " . print_r( rgpost( $input_name ), true ) );    GFCommon::log_debug( 'log_save_field_value: Saved value => ' . print_r( $value, true ) );     return $value;}
Writing to the core log
To add a simple custom logging statement to your own code which will save to the core log you use the following:
1GFCommon::log_debug( __METHOD__ . '(): running.' );
To also include a variable which contains a string in the logging statement you could do this:
1GFCommon::log_debug( __METHOD__ . "(): Nothing to do for the {$event} event." );
If you wanted to output another type of variable such as an array you could use the following:
1GFCommon::log_debug( __METHOD__ . '(): form => ' . print_r( $form, true ) );
Writing to the add-on log
If you are creating your own add-on which uses the Add-on Framework you can use the following to write the logging statement to the log file for the add-on:
1$this->log_debug( __METHOD__ . '(): feed => ' . print_r( $feed, true ) );
__METHOD__ is a PHP constant, it will be replaced with the class method name. You could remove that and include the function name or some other identifier in the logging statement itself.

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;

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.

Database Structure

Tableswp_gf_addon_feedwp_gf_addon_payment_callbackwp_gf_addon_payment_transactionwp_gf_draft_submissionswp_gf_entrywp_gf_entry_metawp_gf_entry_noteswp_gf_formwp_gf_form_metawp_gf_form_viewChanges from Gravity Forms 2.2IntroductionChangesThe Migration Process

Here』s how Gravity Forms is structured within your database:

Note: This structure applies to Gravity Forms version 2.3 or higher.

Tables
wp_gf_addon_feed
Contains Gravity Forms feeds.

id
Contains the unique feed ID.
form_id
Contains the ID of the form that the feed is associated with.
is_active
Defines if the feed is active or not. Integer is used as a boolean (0 is false, 1 is true).
feed_order
The order in which the feed is processed if multiple feeds exist.
meta
Meta information related to the feed. Stored as JSON.
addon_slug
The slug of the add-on that the feed is associated with.

wp_gf_addon_payment_callback
Contains information related to payment callbacks that have been received.

id
The row ID.
lead_id
The entry ID associated with the callback.
addon_slug
The add-on associated with the callback.
callback_id
The callback ID.
date_created
The date that the callback was received.

wp_gf_addon_payment_transaction
Contains transaction details.

id
The transaction ID.
lead_id
The entry ID associated with the transaction.
transaction_type
The transaction type.
transaction_id
The unique transaction ID.
subscription_id
The subscription ID, if applicable.
is_recurring
Defines if this is a recurring subscription. Integer is used as a boolean (0 is false, 1 is true).
amount
The amount of the transaction.
date_created
The date the transaction was created.

wp_gf_draft_submissions
Holds draft submissions created by the save and continue feature.

uuid
The unique ID of the draft submission.
email
The email address associated with the draft submission.
form_id
The form ID that the draft submission is associated with.
date_created
The date the draft submission was created.
ip
The IP address that created the draft submission.
source_url
The URL that was used to submit the draft submission.
submission
Submission details regarding the draft submission.

wp_gf_entry
Contains Gravity Forms entries.

id
The unique entry ID.
form_id
The form ID that the entry is associated with.
post_id
The ID of the post that was created from the entry, if applicable.
date_created
The date that the entry was created.
date_updated
The date that the entry was last updated.
is_starred
If the entry is starred. Integer is used as a boolean (0 is false, 1 is true).
is_read
If the entry has been marked as read. Integer is used as a boolean (0 is false, 1 is true).
ip
The IP address that submitted the entry.
source_url
The URL of where the submission took place.
user_agent
The user agent of the entry submitter.
currency
The currency used in the entry, if applicable.
payment_status
The status of the payment, if applicable.
payment_date
The date that the payment took place, if applicable.
payment_amount
The amount of the payment, if applicable.
payment_method
The transaction method used to process the payment, if applicable.
transaction_id
The transaction ID associated with the entry, if applicable.
is_fulfilled
If the transaction has been fulfilled, if applicable.
created_by
The ID of the user that created the entry, if applicable.
transaction_type
The transaction type, if applicable.
status
The current entry status.

wp_gf_entry_meta
Contains additional metadata related to entries. Details from fields as well as add-ons are stored here.

id
The unique ID.
form_id
The form ID that the entry meta is associated with.
entry_id
The entry ID that the meta is associated with.
meta_key
The meta key.
meta_value
The value stored under the meta key.
item_index
The item index.

wp_gf_entry_notes
Contains notes that were placed on an entry.

id
The note ID.
entry_id
The entry ID that the note is associated with.
user_name
The user name that created the note.
user_id
The user ID that created the note.
date_created
The date that the note was created.
value
The contents of the note.
note_type
The type of note that was left, if applicable.
sub_type
The secondary note type, if applicable.

wp_gf_form
Contains the forms that exist within Gravity Forms.

id
The form ID.
title
The form title.
date_created
The date that the form was created.
is_active
If the form is active. Integer is used as a boolean (0 is false, 1 is true).
is_trash
If the form is trashed. Integer is used as a boolean (0 is false, 1 is true).

wp_gf_form_meta
Contains metadata associated with forms.

form_id
The form ID that the metadata is associated with.
display_meta
Meta related to how the form and fields are configured.
entries_grid_meta
Additional meta related to entries and how they will be displayed.
confirmations
Confirmation configuration.
notifications
Notification configuration.

wp_gf_form_view
Contains details on form views.

id
The ID.
form_id
The form ID that the data is associated with.
date_created
The date that the row was created.
ip
The IP that accessed the form.
count
The number of times that the IP accessed the form.

Changes from Gravity Forms 2.2
Introduction
The database schema was changed in Gravity Forms 2.3 to enable significant performance enhancements and to allow key features to be added. Code that uses the Gravity Forms API (GFAPI) will not be affected and will continue to work as before. However, custom code and add-ons that access the database tables directly will need updating.
Changes
The following changes were made to the tables and columns.

rg_lead -> gf_entry
rg_lead_details + rg_lead_meta tables -> gf_entry_meta
All lead_id columns -> entry_id
rg_form -> gf_form
rg_form_view -> gf_form_view
rg_form_meta -> gf_form_meta
rg_incomplete_submissions -> gf_draft_submissions

Note: Despite of tables gf_addon_feed, gf_addon_payment_callback and gf_addon_payment_transaction are using the gf_ prefix, they』re not part of the changes done in this version. If for any reason you need to delete the new tables to run the upgrade from scratch again, make sure to skip these tables.

The Migration Process
The automatic migration process creates the new tables and copies all the data over to the new tables in a series of background tasks. If the task stops, for example, due to a server restart then the migration will continue with a scheduled cron task. If there』s a database error then the migration will stop and try again later.