Gravity Forms 文档

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!

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}

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.

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.

Credit Card

SummaryCommon SettingsGeneral SettingsAppearance SettingsAdvanced SettingsMerge TagsUsageModifiers

Summary

Payment add-ons such as Authorize.Net and PayPal Payments Pro enable the Credit Card field in Gravity Forms. This field appears in the Pricing Fields toolbox of the Form Editor. This field type makes it easy to capture credit card information. It includes integrated card type detection so the user does not have to pick which type of card they are using and it also has built in validation to validate that the card format is correct.

Note: many Gravity Forms payment add-ons use custom credit card fields that meet their individual security and payment flow criteria. Only use this generic credit card field if you have no brand specific card field option.

Credit Card field as displayed in the Field Library

Credit Card field as displayed in the Form Editor.

This field does not actually store any of the personal information entered, to be compliant with PCI standard, only the card type and last four digits of the card are stored. The full card data is available as part of the initial form submission strictly as part of integration with the Authorize.Net add-on and other payment gateway add-ons. This data will not be stored as part of the form entry and is not retained by your site, server, or database.

If you preview or view your form on a page that is not secure, it will be obvious, both to you and your users, if you do not properly secure the page. If the page is unsecured, the Credit Card field will be highlighted with a red warning. This warning will not be displayed if the page displaying the form is loaded via https with a valid SSL certificate.

Note: When using Page fields to create a multi-page form, the Credit Card field should be located on the last page of the form.

Common Settings

For a description of each of the most common field settings, refer to this article.

General Settings

SettingDescriptionSub-LabelsThis option allows you to override the default sub-labels for each field.Supported Credit CardsUse this setting to enable or disable individual credit card types.

Appearance Settings

SettingDescriptionSub-Label PlacementSimilar to the Description Placement, but affects the sub-label placement instead.

Advanced Settings

SettingDescriptionForce SSLCheck this box to prevent the field from being displayed on insecure (non-https) pages.

Merge Tags

For more information on the use of merge tags, refer to these articles.

Usage

{Field Name:2}

Modifiers

This merge tag does not have any modifiers.

Credit Card Field CSS Selectors

ContainerCard IconsContainerAmerican ExpressDiscoverMastercardVisaCard Number InputExpirationMonthYearSecurity CodeContainerInputIcon

Container
example: credit card field container (div) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard {border: 1px solid red;}
example: credit card field container (div) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard {border: 1px solid red;}
example: credit card field container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard {border: 1px solid red;}
Card Icons
Container
example: card icon container (div) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container {border: 1px solid red;}
example: card icon container (div) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container {border: 1px solid red;}
example: card icon container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container {border: 1px solid red;}
American Express
example: card icon container (div) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_amex {border: 1px solid red;}
example: card icon container (div) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_amex {border: 1px solid red;}
example: card icon container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container  .gform_card_icon_amex {border: 1px solid red;}
Discover
example: card icon container (div) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_discover {border: 1px solid red;}
example: card icon container (div) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_discover {border: 1px solid red;}
example: card icon container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container  .gform_card_icon_discover {border: 1px solid red;}
Mastercard
example: card icon container (div) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_mastercard {border: 1px solid red;}
example: card icon container (div) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_mastercard {border: 1px solid red;}
example: card icon container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container  .gform_card_icon_mastercard {border: 1px solid red;}
Visa
example: card icon container (div) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_visa {border: 1px solid red;}
example: card icon container (div) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_visa {border: 1px solid red;}
example: card icon container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container  .gform_card_icon_visa {border: 1px solid red;}
Card Number Input
example: card icon container (input) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_full input {border: 1px solid red;}
example: card icon container (input) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_full input {border: 1px solid red;}
example: card icon container (input) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_full  input {border: 1px solid red;}
Expiration
example: card expiration container (span) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container {border: 1px solid red;}
example: card expiration container (span) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container {border: 1px solid red;}
example: card expiration container (span) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_expiration_container  {border: 1px solid red;}
Month
example: card expiration month (select) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_month {border: 1px solid red;}
example: card expiration month (select) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_month {border: 1px solid red;}
example: card expiration month (select) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_month {border: 1px solid red;}
Year
example: card expiration month (select) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_year {border: 1px solid red;}
example: card expiration month (select) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_year {border: 1px solid red;}
example: card expiration month (select) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_year {border: 1px solid red;}
Security Code
Container
example: card security code container (div) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right {border: 1px solid red;}
example: card security code container (div) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right {border: 1px solid red;}
example: card security code container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_cardinfo_right {border: 1px solid red;}
Input
example: card security code input (input) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code {border: 1px solid red;}
example: card security code input (input) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code {border: 1px solid red;}
example: card security code input (input) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code {border: 1px solid red;}
Icon
example: card security code image (span) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code_icon {border: 1px solid red;}
example: card security code image (span) – applies just to form ID #1
1body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code_icon {border: 1px solid red;}
example: card security code image (span) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code_icon {border: 1px solid red;}

Creating a Square Sandbox Account for Testing

IntroductionSign-up for a Square Developer Account

Introduction
Testing your configuration and your forms without processing live transactions is an essential and recommended tool in your arsenal when working with payment processing forms. Configuring this in Square is very easy.
Sign-up for a Square Developer Account

Go to the Square Developer Account Sign-in: https://squareup.com/signup?v=developers

Once you』ve configured your account, go to the Developer Dashboard and create a new Application: https://developer.squareup.com/apps

From the New Application Screen, Give your application a name and click Save.

You will be returned to the Developer Dashboard and presented with a list of Sandbox Test Accounts. Select the one you just created and click Launch to open the Seller Sandbox Dashboard.

This will launch this portal (Developer Dashboard): https://squareupsandbox.com/dashboard/

Configure your Sandbox Account in the Square Add-on.

Creating a PayPal Payments Pro Sandbox Account

IntroductionPrerequisitesCreating a PayPal Sandbox Test AccountGetting Your Sandbox CredentialsSetting Up the PayPal ManagerCheckout Page SettingsFraud Protection SettingsCredentialsTest Credit Card Number

Introduction
When setting up the PayPal Payments Pro Add-On, it is recommended that you test it using a sandbox developer account first. This helps reduce unexpected surprises when you start processing live transactions.
In this article, we are going to show you how to create a new PayPal Payments Pro sandbox account.
This is a Paypal process, and screen layout and behavior may be changed by Paypal without our knowledge. If you run into any issues, we recommend you contact Paypal Developer Support for resolution.
Prerequisites
A PayPal Payments Pro account
Creating a PayPal Sandbox Test Account
The first step is to create a new PayPal Sandbox Test Account. Here』s how to do so:

Access the PayPal Developer site and log in with your PayPal personal or business account. If you don』t have one, feel free to create one. It will only be used to create a new sandbox account.
Locate the Sandbox setting on the left side navigation menu, and click on Accounts.
You should see any existing sandbox accounts listed. To create a new one, click Create Account on the right side of the page.

Under Account Type select Business (Merchant Account). This is required for Gravity Forms.

Select the Country.
Click the Create button to save your account settings.
Once the new account is created, it needs to be upgraded to a PayPal Payments Pro account so that it is able to be tested with PayPal Payments Pro. To do so, hover over the listing for the newly created account, then click on View/Edit Account under Manage Accounts.

From the Profile tab of the Account Details page, locate the Account Type header. Click on the Upgrade to Pro link.

Click the Enable button to upgrade this sandbox account to PayPal Payments Pro.

Getting Your Sandbox Credentials
Now that you have a PayPal Payments Pro sandbox account, you will need to setup the credentials.

From the Profile tab of the Account Details page, click the Edit button.

Locate the Email ID header and enter the email address you would like to use with this sandbox test account.
Locate the System Generated Password header and make note of the account password. Alternatively, you can click the Change Password link to change the password to something more memorable.
Note: This is not a live account. Setting something like a very basic password is usually a good thing in these scenarios as it will be easier to remember, and security of sandbox accounts is not a high priority.

Click the Save button to commit your changes.

You』re now ready to follow the next section which will take place in the PayPal Manager.
Setting Up the PayPal Manager
After getting your sandbox credentials set up, you』ll need to configure the PayPal Manager to use those credentials.
Checkout Page Settings

Log into the PayPal Manager with your PayPal account.
At the top of the page, click on Service Settings, then on Hosted Checkout Pages. Select Set Up to begin the setup.

Under Choose your settings, ensure Transaction Process Mode is set to Test. If not already set, change it accordingly.

Under Display options on payment page, an Error URL needs to be defined. As this will be overridden with the API, enter a placeholder such as https://example.com.

Under the PayPal Express Checkout header, locate the PayPal Sandbox email address option. Within this field, enter the email address for the sandbox account you created in the previous section of this article.
Note: Be sure that this step is accurate, and there are not any spaces before or after the email address in the field, as this will cause errors when testing.
Within the Billing Information section, set any fields that you want to collect as Required as well as Editable.
Skip down to the Payment Confirmation section. You will see an option labeled Show confirmation page. Set this to On my website.

At the bottom of the page under Security Options, find the Enable secure token option and set it to Yes.

Once all of your settings are configured, click the Save Changes button at the bottom of the page.

Fraud Protection Settings
As this is a test account and is not processing live transactions, it』s a good idea to remove the fraud protection as it eliminates the possibility of test transactions being flagged as fraud.
To do so, access the Fraud Protection menu item at the top of the page. From there, go to the Test Setup page, then Edit Standard Filters.
Once on the standard filters page, uncheck each of the checkboxes and save your changes. Fraud protection filters are now disabled.
Credentials
Your PayPal Payments Pro sandbox credentials will be the same as your current credentials used to log into the PayPal Manager.
Test Credit Card Number
To access your test card number, log into the PayPal Developers site and access the sandbox account you previously created in this article. Within this, you will see card numbers that can be used for testing purposes.

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.

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.