Gravity Forms 文档

Name

SummaryCommon SettingsGeneral SettingsAppearance SettingsMerge TagsUsageModifiers

Summary

The Name field allows users to enter their name in the format you have specified via the General tab. This allows you to capture name information as individual fields. It is available under the Advanced Fields section within the form editor.

Name field as displayed in the Field Library

Name field as displayed in the Form Editor.

Common Settings

This field uses only common field settings for the Advanced settings. For a description of each of the common field settings, refer to this article. Below you will find description of specialty settings that are particular to this field.

General Settings

SettingDescriptionName FieldsSelect the fields that you would like to enable, as well as set any custom labels.

Appearance Settings

SettingDescriptionSub-Label PlacementSimilar to the description placement, this determines where the sub-labels will be located.

Merge Tags

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

Usage

Display the Prefix.

{Field Name:2.2}

Display the First Name.

{Field Name:2.3}

Display the Middle Name.

{Field Name:2.4}

Display the Last Name.

{Field Name:2.6}

Display the Suffix.

{Field Name:2.8}

Notes:

The first of these merge tag parameters is optional and is simply the field name for easier identification.The second parameter defines the field or input ID within the form.

Modifiers

This field does not have any modifiers.

Name Fields CSS Selectors

First NameContainerInputLabelLast NameContainerInputLabel

First Name
Container
example: name – first name container (span) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .name_first {border: 1px solid red;}
example: name – first name container (span) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .name_first {border: 1px solid red;}
example: name – first name 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 .name_first {border: 1px solid red;}
Input
example: name – first name field (input) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .name_first input {border: 1px solid red;}
example: name – first name field (input) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .name_first input {border: 1px solid red;}
example: name – first name field (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 .name_first input {border: 1px solid red;}
Label
example: name – first name sub-label (label) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .name_first label {color: red;}
example: name – first name sub-label (label) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .name_first label {color: red;}
example: name – first name sub-label (label) – 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 .name_first label {color: red;}
Last Name
Container
example: name – last name container (span) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .name_last {border: 1px solid red;}
example: name – last name container (span) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .name_last {border: 1px solid red;}
example: name – last name 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 .name_last {border: 1px solid red;}
Input
example: name – last name field (input) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .name_last input {border: 1px solid red;}
example: name – last name field (input) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .name_last input {border: 1px solid red;}
example: name – last name field (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 .name_last input {border: 1px solid red;}
Label
example: name – last name sub-label (label) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .name_last label {color: red;}
example: name – last name sub-label (label) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .name_last label {color: red;}
example: name – last name sub-label (label) – 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 .name_last label {color: red;}

My Download Is Not a Zip File?

IssueProbable Cause

Issue
To install a WordPress plugin, you need a zip file, which is how we provide Gravity Forms and Gravity Forms add-ons upon download. But what if your download is not a zip file?
Probable Cause
This likely means you that your browser is automatically opening (unzipping) the file at the time of download. This is a user preference within your browser settings.
For example, in Safari:

Open Safari >Preferences >General
Uncheck 「Open Safe Files After Downloading」
Re-download the file.

Screenshot shows Safari Preferences panel, as of Safari 14.0

Multi Select

SummaryCommon SettingsGeneral SettingsNotesAppearance SettingsMerge TagsUsageModifiers

Summary

The Multi Select field allows users to select multiple options available in the multi select box. It is available under the Standard Fields section within the form editor.

Multi Select field as displayed in the Field Library

Multi Select field as displayed in the Form Editor.

Important: If your choice labels contain any HTML or special characters such as ampersands, commas, hyphens or brackets of any type, you MUST enable the show values feature and give each choice a simple and unique value which does not contain any special characters. Failure to configure values could cause issues for features such as calculations, conditional logic, dynamic population, and validation.

Common Settings

This field uses only common field settings for the Advanced settings. For a description of each of the common field settings, refer to this article. Below you will find description of specialty settings that are particular to this field.

General Settings

SettingDescriptionChoicesAdd Choices to this field. You can mark each choice as checked by default by using the checkbox that appears to the left of each choice. Add a new choice by clicking the PLUS icon and delete a choice by clicking the DELETE icon.Show ValuesChecking this option will allow you to specify a value for each choice. Choice values are not displayed to the user viewing the form but are accessible to administrators when viewing the entry.Bulk Add / Predefined ChoicesAllows you to select a category and customize the predefined choices or paste your own list to bulk add choices. See note 1.

Notes

1. See this article for more information.

Appearance Settings

SettingDescriptionEnable enhanced user interfaceChecking this option enables enhanced functionality to make this more user-friendly.

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.

Multi Select Field CSS Selectors

ContainerFieldItems

Container
example: standard multi select container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_multiselect {border: 1px solid red}
example: standard multi select container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_multiselect {border: 1px solid red}
example: standard multi select container (div) – applies just to specific multi select 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 .ginput_container_multiselect {border: 1px solid red}
Field

If you』ve enabled the Enhanced UI option, you will need to target 「chosen-container」 rather than 「select」 in the selectors below.
example: standard multi select field (select) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_multiselect select {border: 1px solid red}
example: standard multi select field (select) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_multiselect select {border: 1px solid red}
example: standard multi select field (select) – applies just to specific multi select 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 .ginput_container_multiselect select {border: 1px solid red}
Items
example: standard multi select item (option) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_multiselect select option {border: 1px solid red}
example: standard multi select item (option) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_multiselect select option {border: 1px solid red}
example: standard multi select item (option) – applies just to specific multi select 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 .ginput_container_multiselect select option {border: 1px solid red}

Multi-Page Forms CSS Selectors

Progress BarContainerProgress Bar TitleProgress BarPercentage BarPercentage Completed NumberStepsContainerAll StepsActive StepInactive StepPageFooterButtonsNext ButtonPrevious ButtonSubmit Button

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}

Progress Bar Title
The progress bar title contains the 「Step x of y」 text.

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}

Progress Bar
This is the percentage progress bar shown below the above title.

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}

Percentage Bar

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

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

Percentage Completed Number

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

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

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}

All Steps

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}

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}

Inactive Step

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

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

Page
Wraps each 「paged」 set of fields

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

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

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

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}

Buttons
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}

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

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}

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

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}

Mollie Field

Pre-RequisitesIntroductionNotesAutomatic Feed creationGravity Forms Credit Card FieldCommon SettingsGeneral SettingsDefault Payment MethodsSub-LabelsSupported Credit CardsAppearance SettingsAdvanced SettingsForce SSL

Pre-Requisites

This field is only available as a Pricing Field in the Form Editor if you have installed the official Gravity Forms Mollie Add-On.

Introduction

The Mollie field provides Credit Card and Cardholder input fields tied to the Mollie payment service integration.

This field will add the Card Number, Expiration Date, Security Code and Cardholder Name inputs. Further configuration of this form is handled in General Settings and Appearance as noted below. This Credit Card field will only be available if the Payment Methods allow Credit Card as a choice.

Notes

Automatic Feed creation

A pre-configured Mollie feed will be created in the Form Settings > Mollie area when a form containing a Mollie Field is saved, and a feed does not already exist.

Gravity Forms Credit Card Field

If you have another payment gateway add-on installed and active, the Gravity Forms Credit Card Field is still made available, but is not for use with the Mollie Add-On. This can support conditional logic scenarios where you allowing users to choose from a list of payment processors, such as Authorize.Net, where the standard Credit Card field is needed

Common Settings

For a description of each of the common field settings, refer to this article. Below you will find descriptions of specialty settings that are particular to this field.

General Settings

The General settings for the Mollie Field allow you to configure the Field Label, Description, Default Payment Method, Sub Labels, Supported Credit Cards, and whether or not the field is Required.

Default Payment Methods

The Default Payment Methods setting allows you to set the default option in the payment method drop down when the field is displayed. The supported payment methods are in sync with your Mollie account and match the Gravity Forms Currency Setting. As an example, for US Dollars ($USD), the following payment methods are accepted:

Credit CardPayPal

Your Gravity Forms Currency Settings must match the Currency Settings in your Mollie account or you will get an error message upon adding the Mollie field that your Mollie account doesn』t have any payment methods that match the currency settings on your form.

Sub-Labels

The Sub-Labels settings are displayed when the Credit Card payment method is selected; they allow you to define custom sub-labels for the credit card inputs.

Supported Credit Cards

The Supported Credit Cards settings are displayed when the Credit Card payment method is selected; this provides a visual indicator to your credit card fields when users are filling in their payment details. You can select from:

American ExpressMasterCardVisaMaestro

Appearance Settings

The Appearance settings for the Mollie Field allow you to configure the Field Label Visibility, Description Placement, Sub-Label Placement, Custom Validation Message, and the Custom CSS Class.

Advanced Settings

The Advanced settings for the PayPal Field allow you to configure the Admin Field Label, Force SSL, and Conditional Logic.

Force SSL

When enabled and the form is displayed on an insecure (non-https) page the field will attempt to redirect the user to the https version of the page. Your site will need an SSL certificate for this to function correctly. Contact your web host if you need assistance purchasing and configuring an SSL certificate.

Mollie Change Log

1.2 | 2021-09-011.1 | 2020-09-161.0 | 2020-05-06

1.2 | 2021-09-01

Fixed an issue that slows down the page load speed when the Mollie add-on is active.
Fixed an issue where payment delayed feeds don't fire correctly if the window is closed before the thank you page renders.
Fixed an issue where a warning appears on the form editor when the add-on fails to communicate with the mollie API.
Fixed an issue when a PHP notice displays if an RTL language is used.

1.1 | 2020-09-16

Added support for Gravity Forms 2.5.
Added accessibility enhancements that announcing the credit card validation error in Mollie Components for screen readers.
Added accessibility enhancements that announcing the supported credit cards.
Fixed an issue that PHP notices were thrown if the Mollie feed didn't have billing fields mapped.

1.0 | 2020-05-06

It's all new!

Migrating from the Legacy Version of the Constant Contact Add-On

If you』re using the legacy third-party Constant Contact Add-On created by Katz Web Services, Inc., you will need to recreate your feed settings in the new official Add-On by Gravity Forms. The legacy add-on uses an old version of the Constant Contact API (v2) and will receive no further updates.
Both add-ons may be run side-by-side. This allows you to transition your feed configuration from the legacy version to the official version created by Gravity Forms.
If you need to add contacts to multiple lists, you can create a feed for one list first, then duplicate the feed and update the list in the 「Constant Contact List」 setting. This allows you to add contacts to multiple lists.
Below are changes which will impact creating your new feeds in the Gravity Forms version using Constant Contact』s v3 API:

Middle Name is no longer available as a Map Field. Use a custom field if this information needs to be gathered.
Address 2 is no longer available as a Map Field. Use a custom field if this information needs to be gathered.
Address 3 is no longer available as a Map Field. Use a custom field if this information needs to be gathered.
The list of available Custom Fields for mapping pulls the custom fields which have been created in your Constant Contact account.

To transition your feeds to the Gravity Forms version, load the old feed setup and create a new feed with the same configuration with the above differences.

Adding Meta Boxes to the Entry Detail Page Using the Add-On Framework

IntroductionThe HookThe Hook CallbackThe Meta Box Callback

Introduction
In Gravity Forms 2.0 we switched to using meta boxes for the sidebar panels on the entry detail page allowing the user to decide which meta boxes are displayed and their order. This change also makes it easier for add-ons to add their own custom meta boxes to the page.
In this tutorial we will show how you can add a custom meta box to the entry detail page.
Before reading on you should be familiar with the Add-On Framework.
The Hook
Adding a custom meta box to the entry detail page can be accomplished by using the gform_entry_detail_meta_boxes filter in the init or init_admin function of your add-on.
12345678910/** * Plugin starting point. Handles hooks, loading of language files, and PayPal delayed payment support. */public function init() {     parent::init();     add_filter( 'gform_entry_detail_meta_boxes', array( $this, 'register_meta_box' ), 10, 3 ); }
The Hook Callback
The following example shows the function used with the gform_entry_detail_meta_boxes filter to add the meta box to the entry detail page.
Our feed add-on integrates with a third-party service so it has an initialize_api() function used to include the API files and connect to the service to validate any API credentials. If the credentials are valid and the form has an active feed for this add-on then the meta box will be added.
123456789101112131415161718192021/** * Add the meta box to the entry detail page. * * @param array $meta_boxes The properties for the meta boxes. * @param array $entry The entry currently being viewed/edited. * @param array $form The form object used to process the current entry. * * @return array */public function register_meta_box( $meta_boxes, $entry, $form ) {    // If the form has an active feed belonging to this add-on and the API can be initialized, add the meta box.    if ( $this->get_active_feeds( $form['id'] ) && $this->initialize_api() ) {        $meta_boxes[ $this->_slug ] = array(            'title'    => $this->get_short_title(),            'callback' => array( $this, 'add_details_meta_box' ),            'context'  => 'side',        );    }     return $meta_boxes;}
It』s also possible to use the form fields to determine if the meta box should be added. In this example the Quiz Add-On is checking to see if the form uses quiz type fields.
12345678910111213public function register_meta_box( $meta_boxes, $entry, $form ) {    $fields = GFAPI::get_fields_by_type( $form, array( 'quiz' ) );     if ( ! empty( $fields ) ) {        $meta_boxes['gf_quiz'] = array(            'title'    => esc_html__( 'Quiz Results', 'gravityformsquiz' ),            'callback' => array( $this, 'add_quiz_meta_box' ),            'context'  => 'side',        );    }     return $meta_boxes;}
The Meta Box Callback
This callback function is responsible for adding the actual content to our meta box. You could include anything in the meta box but we would recommend keeping it to the essential details.
In the process_feed() example of the Including and using Entry Meta with the Add-On Framework article we showed how a feed based add-on can store entry meta when processing the feed. In this case it was the contact id returned by the third-party service.
The example below shows how the contact id can be retrieved from the entry and displayed in the meta box. If the entry being displayed doesn』t have a contact id because it wasn』t processed by the add-on during form submission the function will display a button which can be used to initiate feed processing for the current entry by our add-on. When the button is clicked the page will reload, processing the feeds, and then display the contact id.
12345678910111213141516171819202122232425262728293031323334353637383940414243/** * The callback used to echo the content to the meta box. * * @param array $args An array containing the form and entry objects. */public function add_details_meta_box( $args ) {     $form  = $args['form'];    $entry = $args['entry'];     $html   = '';    $action = $this->_slug . '_process_feeds';     // Retrieve the contact id from the current entry, if available.    $contact_id = rgar( $entry, 'simpleaddon_contact_id' );     if ( empty( $contact_id ) && rgpost( 'action' ) == $action ) {        check_admin_referer( 'gforms_save_entry', 'gforms_save_entry' );         // Because the entry doesn't already have a contact id and the 'Process Feeds' button was clicked process the feeds.        $entry = $this->maybe_process_feed( $entry, $form );         // Retrieve the contact id from the updated entry.        $contact_id = rgar( $entry, 'simpleaddon_contact_id' );         $html .= esc_html__( 'Feeds Processed.', 'simplefeedaddon' ) . '

';    }     if ( empty( $contact_id ) ) {         // Add the 'Process Feeds' button.        $html .= sprintf( '', esc_attr__( 'Process Feeds', 'simplefeedaddon' ), $action );     } else {         // Display the contact ID.        $html .= esc_html__( 'Contact ID', 'simplefeedaddon' ) . ': ' . $contact_id;         // You could include a link to the contact profile on the third-party site.    }     echo $html;}