Author 诗语

Creating a Feed for the Mollie Add-On

IntroductionPre-RequisitesCreate/Edit A Mollie FeedFeed SettingsBasic Feed SettingsProducts & Services SettingsOther Settings Conditional LogicUser Registration OptionsNotes

Introduction

The last step of integrating Mollie with Gravity Forms is creating a feed. A feed communicates information to Mollie each time a visitor successfully submits your form. This is a critical step. If it is not completed, nothing is sent to Mollie for processing.

Pre-Requisites

Set-up the Mollie Add-OnCreate a Mollie Compatible Form

Create/Edit A Mollie Feed

Note that a pre-configured feed will be automatically created for the Mollie Add-On when a form containing a Mollie Field is saved, and a feed for Mollie does not already exist.

To access your Mollie feeds list:

Click on Forms in the left side menu.Select the form that you want to use with Mollie.Hover over Settings and click on Mollie.Click Edit to edit the existing Mollie feed, or Add New. You will be presented with the feed settings screen pictured below.Complete the settings you require. See below for descriptions of all the available feed settings.Click Update Settings to save your feed.

Feed Settings

Mollie Feed Settings screen

Basic Feed Settings

SettingDescriptionNameA descriptive name so you can clearly identify this feed within the feed list page. Required.Transaction TypeProducts and Services are single one time payments. (Subscriptions/recurring payments are not currently available for the Mollie Add-On).

Products & Services Settings

SettingDescriptionPayment AmountDefine what to use for the payment amount. For example, you could choose a specific product Field, or the form Total. Required.

Other Settings

SettingDescriptionBilling InformationMap your form fields to the Mollie billing fields they will send data to. Mostly Required.

Note: Billing information fields are almost all required (only the Address Line Two and State are optional) to create an Order with a Payment. Customer data only appears in Order details within the Mollie dashboard.

Conditional Logic

SettingDescriptionEnable Conditional LogicIf enabled, allows you to set conditions on when this feed will be triggered. Allows you to configure multiple feeds with different behaviors, and trigger one of them based on conditional logic criteria. Refer to this article for more.

User Registration Options

This setting is applicable if you are utilizing the User Registration Add-On.

SettingDescriptionDelay User RegistrationDelay registration of a user (based on the submitted details), until the payment has been received.

Notes

Your Gravity Forms Currency Settings must match the Currency Settings in your Mollie account or you will not be able to create a feed.Testing your Feed with a Mollie Test Account is highly recommended before running transactions on your live account.If you initiate a refund for a transaction within the Mollie dashboard, the Form Entry will update with a webhook to show the payment status as Refunded.While the email is passed into the Mollie Account during feed processing (if you have matched the Email field in your feed), it will not be displayed in the Mollie Account transaction record. You can still search by email address in the Mollie Account transaction list and it will display matching records.When connecting and testing transactions in Test Mode, the customer data is always shown as 「Test Consumer/[email protected]」 in the Mollie Dashboard, under Payment Details, regardless of the billing information mapped.

Creating a Feed for the Square Add-On

Pre-RequisitesIntroductionCreate Your FeedTransaction TypesProducts and ServicesSubscriptionsProduct And Services SettingsPayment AmountAuthorize OnlyOther SettingsBilling InformationConditional LogicNotes

Pre-Requisites

Setup the Square Add-On
Create a Square Compatible Form

Introduction
The last step of integrating Square with Gravity Forms is creating a feed. A feed communicates information to Square each time a visitor successfully submits your form. This is a critical step, as without it, no data is sent to the external service.
Create Your Feed

Open your Square compatible form and from the dropdown menu, choose Settings → Square.

On the Square Feeds screen, select Add New.

On the Feed Settings screen, provide a unique Name.
Note: The feed name is not displayed to the user, but helps you distinguish the feed within admin lists.

Select a Transaction Type.Refer to the section below for an explanation of the transaction types.

Complete any panels of Feed Settings.Refer to the section below for a description of these settings.

Click Update Settings to finish saving your feed.

Transaction Types
The following transaction types are offered:
Products and Services
These are single/one-time payments.
Subscriptions
Subscriptions for Square can be created and managed via Gravity Forms
Product And Services Settings
The options offered here will be dependent upon the Transaction Type selected.

Payment Amount
Determines which form field will be used for the payment amount. For example, you could choose a specific product Field, or the form Total.
Authorize Only
This option allows Square to authorize the payment on a customer』s card, but to not capture that payment until a later date. Refer to this article for details.
Other Settings
Billing Information

Map your form fields to the Square address fields to determine what information will be sent to Square for each required billing field. This will include your Email Field, Name Fields and Address Fields.

Conditional Logic
Selecting 「Enable Condition」 checkbox allows you to specify the rules that determine when this feed executes.
Conditional Logic also allows you to configure multiple Square Feeds for a single form and trigger the correct one based on Conditional Logic.
Refer to the Conditional Logic feed article for more information.
Notes

Your Gravity Forms Currency Settings must match the Currency Settings in your Square account or you will not be able to create a feed.
Testing your Feed with a Square Sandbox Developer Account is highly recommended before testing your transactions on your live account first. See our article on Creating a Square Sandbox Account for Testing for more details.

Creating a Feed for the Slack Add-On

SummaryCreate a FeedFeed Settings ScreenSending MessagesTeam Invites (deprecated)Other Settings

Summary
Before the Slack Add-On can be used with Gravity Forms, 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 Slack.
Create a Feed
To create a feed to Slack using the Slack 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 Slack.
Once within your desired form, hover over Settings and click on Slack.
Click Add New to create a new feed. You will be presented with the Slack feed settings screen.

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

A feed Name is required. It is only used for identification and will not be shown anywhere other than your feed listing.
For Action, chose either Send Message and Invite to Team. The feed can be configured to either send a message inside Slack or invite a user to a Slack team.

Sending Messages
When Send Message is chosen as the Action, the following settings will display:

Send To: Based on your selection here, you will be able to send the triggered message to a channel, group, or individual.
Slack Channel: Select the specific channel, group, or individual that the message should be sent to. Use this drop down to select your desired destination. If you want it to go to multiple selections, you can simply create additional feeds.
The Message setting determines the content of the message that will be sent by the feed. Within this box, enter any text you would like to be within the message. This text area also supports the use of merge tags to dynamically generate content.

Team Invites (deprecated)
This feature was deprecated with Slack』s adoption of their new API, the deprecation of their legacy API, and version 1.13 of our Add-On. Refer to this article for more information.
Team invites are only available if your Slack user is an administrator on the Slack channel associated with your key. If you are not an administrator, this option will not appear.
When Invite to Team is chosen as the Action, the following settings will display:

Use the Email Address dropdown to select the field that contains the email address the invite will be sent to.
First Name: Use the dropdown to select the field within your form that will be used for the corresponding value.
Last Name: Use the dropdown to select the field within your form that will be used for the corresponding value.
Slack Channels: Select the channel that the message should be sent to.
Slack User: Use this drop down to select the user that the message should be sent to.
The Message setting determines the content of the message that will be sent by the feed. Within this box, enter any text you would like to be within the message. This text area also supports the use of merge tags to dynamically generate content.

Other Settings

Image Attachments: Select which file upload fields will be attached to the Slack message. Only image files will be attached.
Conditional Logic: If unchecked, every successful form submission will be sent to Slack. If you wish to set specific conditions for sending form data to Slack, then check the 「Enable」 box and fill out your required criteria.
Click the Update Settings button to save your options.

Creating a Feed for the User Registration Add-On

SummaryCreate a FeedFeed SettingsUser SettingsNoteUser MetaUser Meta in Create User FeedsUser Meta in Update User FeedsUser Meta and User ProfilesAdditional OptionsDelete a Feed

Summary

Installing the User Registration Add-On gives you access to the functionality, but to enable your form submission data to be used in the user registration process, you will need to create a User Registration Add-On feed.

Create a Feed

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 User Registration.Once within your desired form, hover over Settings and click on User Registration.Click Add New to create a new feed. You will be presented with the User Registration feed settings screen.

Feed Settings

The following fields are available within the settings screen.

A feed Name is required. It is only used for identification and will not be shown anywhere other than your feed listing.For Action, chose either Create User or Update User. This selects if you would like to use this feed to create a new user or update data for the current logged in user. The most common setting here is Create User.

Caveat: The same form cannot be used for new user registrations and user updates simultaneously. If you would like users to be able to register as well as update their details, you will need to create separate forms for each of the actions.

User Settings

When Create User or Update User is the chosen action, you will be presented with the User Settings.

This reference guide explains each of the User Settings fields.

SettingDescriptionUsernameSelect the field that will be used to set the username of the newly created user. Be sure that an appropriate field exists within your form as this is a required setting. This setting is not available for Update User feedsFirst Name and Last NameSelect the corresponding form fields in which your user would enter their first and last names. While these are optional settings, they are highly recommended as they will help immensely if you need to review or edit users.NicknameAllows the user to have a name different from their username or first/last names. If not set, the content of the Username will be used for this field when the user is created inside WordPress.Display NameAllows you to set the display name for the user, based on existing information within the user』s profile, such as {nickname}, {username}, or {first name}. By default it will use the Nickname set. If the user has not defined a nickname during registration, the username will be used.Email AddressWhen the user is created, it will use the contents of the form field defined here within the user profile and is used for things like user activation or password generation/resets. This field is required.PasswordAllows you to either choose a specific field within the form which a user can create their own password or have WordPress send a link to the user』s email to set their password.RoleSelect the role of the newly created user within your site. This field is required. See note.

Note

Be careful when selecting a user role. For example, setting the Administrator role will grant users created with this form full access to your site and all settings. For more information on user roles and capabilities, take a look at the Roles and Capabilities article on the WordPress codex.

User Meta

Here you can map form fields to custom meta values to be stored as a key-value pair of additional data for the user.

Using the Select Meta Key dropdown, you can select an existing meta key or define a new custom meta key by selecting Add Custom Meta and entering it into the text field that displays. To the right of the user meta key, select the field that will be used to provide the value for this meta key. If you want to add more user meta information, click on the 「+」 button to the right and you will be presented with an additional row.

User Meta in Create User Feeds

If you add this setup to a Create User feed, the field value entered into the mapped field for that meta key will be added to the User Meta during form submission.

User Meta in Update User Feeds

For an Update User feed, the mapped field will initially populate with the existing User Meta value (if any) on form rendering. It will also update the value during form submission if a new value was provided.

User Meta and User Profiles

Note that this module will save information from form fields into the user meta keys as configured, but it will not create new fields in the User Profile. This is not possible using the User Registration add-on, but there are third-party plugins that can be used for such use cases. E.g. Extra User Details.

Additional Options

SettingDescriptionSend EmailEnable this option if you would like to send an email containing their password to the newly created user.Note: This setting is locked when Password is configured to 「Set Password via Email Link」.Set Post AuthorCheck this box to have the newly created user set as the author of the post. This option is only available when the form uses post type fields or has an Advanced Post Creation feed.User ActivationEnabling this setting will require additional action before the newly registered user is created, either via email sent to the user or manually by an admin.Registration ConditionIf unchecked, every successful form submission will be sent to User Registration. If you wish to set specific conditions for sending form data to User Registration, then check the 「Enable」 box and fill out your required criteria.

Delete a Feed

Do the following from your WordPress Admin dashboard to delete the feed entirely. Caveat: you cannot undo or recover a deleted feed.

Click on Forms in the left side menu.Select the form that you want to use with User Registration.Once within your desired form, hover over Settings and click on User Registration.Click Delete under the feed you would like to remove.

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.

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

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

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.