Author 詩語

Adding a Form Using a Template (or Saved) File

One of the quickest ways to get a form up and running is to import a completed form from a saved/exported form file. From there you can use it as is, or even modify it for any special requirements you have.
Check out these resources:
1. Our help guide to show you how to import a form file.
2. This helpful page full of templates contains a list of common pre-built forms we have put together to satisfy many common uses. You can download them as a JSON file and import them to your own site.
3. If you want to export your own form (for example, to save a backup or migrate it to another site), follow this guide.

Adding a Form Using Blocks

SummaryAdding A Form To Your Page or PostUsing Add Block in Gravity Forms 2.4.9+Using Add Block and the Gravity Forms Gutenberg Block Add-OnBlock OptionsForm TitleForm DescriptionAdvanced > PreviewAdvanced > AJAXAdvanced > Field ValuesAdvanced > Tabindex

NOTE: This article refers specifically to the block-based page editor environment released with WordPress 5.0. For information on embedding a form using the classic WordPress editor, see this article.
Summary
With the full release of WordPress 5.0, we now have a completely new editor environment (referred to during the beta period as the 「Gutenberg Editor」). With progress comes a few casualties though, and indeed, the faithful 「Add Form」 button, that served us so well in the 「classic」 post editor, has now departed (as has the entire top bar of editor chrome).
RIP, classic button.
Adding A Form To Your Page or Post
Using Add Block in Gravity Forms 2.4.9+
You can add a form to a page or post by using the block function that is a part of Gravity Forms core. This article assumes that you have already created a form. See Create A New Form for instructions.

Open the page or post you wish to add a form to.
Click the plus sign to add a new block.
In the Search for a block field, type gravity.
Under Embeds, click on Form. This will insert the Gravity Forms block.
Click the Select a Form drop down and choose your form. This will insert the selected form.

For additional ways to add forms using the block editor, refer to this article.
Using Add Block and the Gravity Forms Gutenberg Block Add-On
Our Gravity Forms Gutenberg Block Add-On has been available during the beta and release candidate stages of WP5. If you are still using an older Gravity Forms core version, it is available for download to active license holders of all levels using any of the standard Gravity Forms add-on download and install mechanisms. This add-on has all of the same functionality as the Gravity Forms core block editor as well as support for conditional logic.
At the moment, the two form blocks are not interchangeable. Future updates will improve the interoperability between the two.
Block Options

Form Title
Will toggle appearance of the form title on or off.
Form Description
Will toggle appearance of the form description on or off.
Advanced > Preview
Toggles whether the full form is shown within the editor block, or just a marker for it.
Advanced > AJAX
Toggles embedding the form on the front-end using AJAX, allowing for confirmations and changing between form pages to happen without page reloads.
Advanced > Field Values
Specifies the default field values in an ampersand (&) separated list. For example, to set default values for fields with the parameters 「dropdown」 and 「email」 you would use [email protected]&dropdown=First Choice. If the block preview is also enabled in the Advanced tab of the block settings you will see the default values update in real time in the editor while editing the page or post.
For more detailed information on how to dynamically populate a field please see our documentation on dynamic population.
Advanced > Tabindex
Sets the tab index of the form element on the page.

Adding a Form Using the Classic Editor

SummaryPage/Post EditorAdd Form ButtonAdd Code Manually Using a Shortcode

Summary
In this article, we show how to add a form to a page or post using the classic editor.
Page/Post Editor
Add Form Button
From the Page or Post Editor, click the Add Form button in the Upload/Insert toolbar. This is located to the left of the Visual/Text tabs in the body text editor.
Clicking the Add Form button will activate the Insert A Form modal window.Select a form from the Select a Form dropdown. If you are unable to find your form in the dropdown list, return to the Edit Forms page and ensure that your form is active.
Once you have selected a form, you can specify the following options:

Display form title
Checking this option will display the form title.
Display form description
Checking this option will display the form description.
Enable AJAX
Checking this option will enable your form to be submitted via AJAX. Submitting the form via AJAX allows the form to be submitted without requiring a page refresh. Note: Due to limitations with reCAPTCHA, forms containing a reCAPTCHA field will not be submitted via AJAX even if this option is enabled.
Tabindex
Located under Advanced Options, this lets you specify the starting tab index for the fields of this form.

After you have specified your desired options, click the Insert Form button to automatically insert the Gravity Forms shortcode into the body of the page/post content you are editing. Don』t forget to save the changes!
Add Code Manually Using a Shortcode
If you would like to build the WordPress shortcode manually, then insert the shortcode into the body of the page or post you would like the form to appear in.
See this article for more information on form shortcodes.

Adding Images, JavaScript, and HTML To Forms

If you need to insert an image or other HTML content within your form, Gravity Forms makes the process easy and painless with the HTML field. Here』s how to do it.

First, add an HTML field to your form where you want the custom content to go.
Next, click on the HTML field that you just added to open up the field』s settings.
Within the Content setting on the field, enter in any HTML content that you want to display.
Save the form and access the form. You should now see your HTML content displaying correctly.

For example, if you want to embed an image within the form (ie: add a profile picture), you would enter the following:

If you wanted to embed JavaScript into the form, you would do so like this:

Adding Javascript Code to the Admin Side of Your Site

IntroductionImportant!Method 1: Using admin_enqueue_scriptsExampleMethod 2: Using the GFAddOn FrameworkMethod 3: Using admin_footer_print_scriptsExampleSpecial ConsiderationsDependenciesConditional Loading

Introduction

Adding scripts and styles for use in the wp-admin area of your site can be accomplished in a few ways. Depending on what code you are trying to add, and the complexity of the theme you are using, there can be a number of different methods by which code snippets can be added to extend your forms. This article covers common options. Also reference: Where Do I Put This Code?

Important!

Replacing or updating your theme can overwrite the theme directory in your site folder, and that means modifications you may have made to files there will be lost. Always keep regular back-ups and consider the use of a child theme .

Method 1: Using admin_enqueue_scripts

The recommended approach for including your custom scripts is to add your scripts to a file and then use the conventional approach of registering and enqueueing those scripts via the WordPress action admin_enqueue_scripts and the WordPress functions wp_register_script() and wp_enqueue_script().

Note: Scripts included via this method will not be loaded when No Conflict Mode is enabled unless allowed via gform_noconflict_scripts

Example

In this example, you will need to replace custom-script-name and custom-script-location with specifics for your script. You will also need to replace CUSTOM_SCRIPT_VERSION with a string or constant that specifies your script version number, which will be added to the URL as a query string for cache-busting purposes.

add_action( 'admin_init', function() {
wp_register_script( 'custom-script-name', 'custom-script-location', array( 'jquery', 'wp-util' ), CUSTOM_SCRIPT_VERSION );
} );
add_action( 'admin_enqueue_scripts', function() {
wp_enqueue_script( 'custom-script-name', 'custom-script-location', array( 'jquery', 'wp-util' ), CUSTOM_SCRIPT_VERSION );
} );

Method 2: Using the GFAddOn Framework

Reference: Including Scripts and Styles When Using the Add-On Framework

Method 3: Using admin_footer_print_scripts

If you are using some third party plug-in as an alternative for adding code, then you might prefer the straightforward approach of including scripts via the WordPress action admin_print_footer_scripts.

Example

add_action( 'admin_print_footer_scripts', function() {
if ( method_exists( 'GFForms', 'is_gravity_page' ) && GFForms::is_gravity_page() ) { ?>

Adding Mailchimp Subscriptions to Groups

When using the Mailchimp Add-On, you can add users to groups to better target subscribers. For example, if you want to send an email to all users who have shown interest in baseball, you can group users by interest so that the content can be specifically tailored to them. This differs from Audiences because subscribers can be part of multiple groups without signing up for multiple Audiences.

Here』s how to easily add users to different groups based on their form submissions:

Ensure that the group exists within Mailchimp. If not, you』ll need to log into your Mailchimp account and create the group.When creating a feed for the Mailchimp Add-On, select the audience that contains your group.If groups exist within the audience, they will automatically appear with checkboxes next to each of them. Upon enabling a group, you will be able to select if all subscribers on the form will be added to the audience, or just ones that fall under a specific condition. For more information on using conditions, see our article on configuring conditional logic.Save your feed.

Adding Row Spans in the 2.5 Form Editor

IntroductionQuickstart GuideSetup the FieldsAdd a CSS Class to the Spanning FieldAdd a CSS Span Property to your ThemeWant to learn more about CSS Grid?

Introduction
The article shows you how to line up fields so that one column field takes up the same vertical space as a multiple fields in an adjacent column. Hard to describe, so let』s show a picture!

This technique is for Gravity Forms 2.5 and later only.
Quickstart Guide

Add a Name field and Textarea field side by side in the form.
Add an Email field and Phone field side by side in the form.
Add a Custom CSS class to the Textarea field under Field Settings > Appearance > Custom CSS ie gform-field-row--span-three
Save the Form and Add the form to your website.
Add the following CSS to your website:
.gform-field-row--span-three {
grid-row: span 3;
}

Setup the Fields
In our example, we are setting up a two column view, where the leftmost column will hold multiple fields, and the right most column will hold one field that takes up the same vertical space as the left column.
In the column editor, drag and drop side-by-side the first field for the leftmost column, and then the field that will end up spanning multiple rows on the right column. This will automatically set the width of those two fields to half the grid each.

In our example, that means adding a Name field and a Textarea field side-by-side in the editor
Next, drag and drop side-by-side the two fields that will eventually fill the rest of the leftmost column. Putting them next to each other in columns will ensure they are half-width each. They will be 「reflowed」 into the left column with some CSS later.

In our example, this is adding an Email field and a Phone field side-by-side in the row below the first two fields.
Add a CSS Class to the Spanning Field
To bring the fields into the alignment we desire, you will need to add a custom CSS style to the field, and then set some properties for it in your theme file.
Taking advantage of the Custom CSS Class settings, go into the Textarea field in the form and select it to then click the tab for Appearance. This will reveal the Custom CSS Class setting 1. In this field, add a CSS Class name that you will remember. For example, span-three-rows or row-span-three or gform-field-row--span-three. It is up to you, just remember what you chose for later.

In our example, we will use gform-field-row--span-three, adding it to the Custom CSS for the Textarea field under Field Settings, Appearance, Custom CSS Class. Save the form.
Add a CSS Span Property to your Theme
Now that we have named the element, we need to tell the Theme file how to treat it, in this case specifically using the span property. The easiest way will be to add this to the Customizer in Theme Options. There are other ways to add CSS to your theme. The following line is what you will add to your Theme』s CSS:
.gform-field-row--span-three {
grid-row: span 3;
}

Here』s how this works: the .gform-field-row--span-three identifies the class and makes the action specific to any objects with that class. The grid-row is a CSS Grid property, and the span 3 is telling the CSS to span 3 grid rows for any object with the class gform-field-row--span-three. Simple!

Add the CSS snippet above to the Additional CSS section of the Customizer.
NOTE: We added an extra CSS property to correct the spacing of the fields in our theme. In this case, our theme was adding specific CSS to target the .gfield class. We corrected that by making it consistent throughout the theme at 1em bottom margin for all fields. You might not need to do this as each theme will supply their own styling to the forms.
Want to learn more about CSS Grid?
If you』d like to learn more about CSS Grid and how Gravity Forms is using it in version 2.5, check out these articles:

Official Documentation for CSS Grid
Comprehensive Guide to Grid by CSS Tricks

An alternative to using Custom CSS Class Settings is to inspect your form after configuring and putting it into a page, and then seeing what the field id is for the Textarea field so you can specifically target just that field with your CSS.

Adding/Removing Countries From the Country Select Field

Removing a CountryAdding a Country

In some instances, you may need to add or remove a particular country to or from the country selection field in Gravity Forms. Here』s how to do it.

Doing so will require using a filter within your code. This code would be placed within your theme』s functions.php file, or ideally, within it』s own plugin.

Removing a Country

add_filter( 'gform_countries', 'remove_country' );
function remove_country( $countries ) {
$key = array_search( 'United States', $countries );
unset( $countries[ $key ] );
return $countries;
}

As you can see from the above snippet, the _gform_countries_ filter is being called, and replacing the default information with the return value of the remove_country function.

Adding a Country

add_filter( 'gform_countries', 'add_country' );
function add_country( $countries ) {
$countries[] = 'Custom Country';
sort( $countries );
return $countries;
}

In this example, the _gform_countries_ filter is being called, and replacing the default information with the add_country function, which is adding an additional country to the array. From here, we then sort the listing, and return the $countries array.

Address Field CSS Selectors

Address Line 1ContainerInputLabelAddress Line 2ContainerInputLabelCityContainerInputLabelStateContainerInputLabelZip CodeContainerInputLabelCountryContainerInputLabel

Address Line 1
Container
example: address – address line 1 container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_line_1 {border: 1px solid red;}
example: address – address line 1 container (div) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_line_1 {border: 1px solid red;}
example: address – address line 1 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_1 .gform_body .gform_fields #field_XX_X.gfield .address_line_1 {border: 1px solid red;}
Input
example: address – address line 1 field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_line_1 input {border: 1px solid red;}
example: address – address line 1 field (input) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_line_1 input {border: 1px solid red;}
example: address – address line 1 field (input) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_line_1 input {border: 1px solid red;}
Label
example: address – address line 1 sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_line_1 label {color: red;}
example: address – address line 1 sub-label (label) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_line_1 label {color: red;}
example: address – address line 1 sub-label (label) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_line_1 label {color: red;}
Address Line 2
Container
example: address – address line 2 container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_line_2 {border: 1px solid red;}
example: address – address line 2 container (div) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_line_2 {border: 1px solid red;}
example: address – address line 2 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_1 .gform_body .gform_fields #field_XX_X.gfield .address_line_2 {border: 1px solid red;}
Input
example: address – address line 2 field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_line_2 input {border: 1px solid red;}
example: address – address line 2 field (input) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_line_2 input {border: 1px solid red;}
example: address – address line 2 field (input) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_line_2 input {border: 1px solid red;}
Label
example: address – address line 2 sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_line_2 label {color: red;}
example: address – address line 2 sub-label (label) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_line_2 label {color: red;}
example: address – address line 2 sub-label (label) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_line_2 label {color: red;}
City
Container
example: address – city container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_city {border: 1px solid red;}
example: address – city container (div) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_city {border: 1px solid red;}
example: address – city 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_1 .gform_body .gform_fields #field_XX_X.gfield .address_city {border: 1px solid red;}
Input
example: address – city field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_city input {border: 1px solid red;}
example: address – city field (input) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_city input {border: 1px solid red;}
example: address – city field (input) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_city input {border: 1px solid red;}
Label
example: address – city sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_city label {color: red;}
example: address – city sub-label (label) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_city label {color: red;}
example: address – city sub-label (label) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_city label {color: red;}
State
Container
example: address – state container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_state {border: 1px solid red;}
example: address – state container (div) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_state {border: 1px solid red;}
example: address – state 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_1 .gform_body .gform_fields #field_XX_X.gfield .address_state {border: 1px solid red;}
Input
example: address – state field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_state input {border: 1px solid red;}
example: address – state field (input) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_state input {border: 1px solid red;}
example: address – state field (input) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_state input {border: 1px solid red;}
Label
example: address – state sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_state label {color: red;}
example: address – state sub-label (label) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_state label {color: red;}
example: address – state sub-label (label) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_state label {color: red;}
Zip Code
Container
example: address – zip container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_zip {border: 1px solid red;}
example: address – zip container (div) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_zip {border: 1px solid red;}
example: address – zip 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_1 .gform_body .gform_fields #field_XX_X.gfield .address_zip {border: 1px solid red;}
Input
example: address – zip field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_zip input {border: 1px solid red;}
example: address – zip field (input) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_zip input {border: 1px solid red;}
example: address – zip field (input) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_zip input {border: 1px solid red;}
Label
example: address – zip sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_zip label {color: red;}
example: address – zip sub-label (label) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_zip label {color: red;}
example: address – zip sub-label (label) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_zip label {color: red;}
Country
Container
example: address – country container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_country {border: 1px solid red;}
example: address – country container (div) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_country {border: 1px solid red;}
example: address – country 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_1 .gform_body .gform_fields #field_XX_X.gfield .address_country {border: 1px solid red;}
Input
example: address – country field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_country select {border: 1px solid red;}
example: address – country field (input) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_country select {border: 1px solid red;}
example: address – country field (input) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_country select {border: 1px solid red;}
Label
example: address – country sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .address_country label {color: red;}
example: address – country sub-label (label) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .address_country label {color: red;}
example: address – country sub-label (label) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .address_country label {color: red;}

Address

SummaryCommon Field SettingsGeneral SettingsAddress TypeAddress FieldsAppearance SettingsAdvanced SettingsUse values submitted in a different fieldCustom FormatConditional Logic SupportCSS Targeting ExamplesExtending the Address FieldMerge TagsUsageModifiers

Summary

The Address field makes it quick and easy to capture address information on a form. This field provides a pre-formatted area for two street addresses, city, state/province, zip/postal code, and a drop down for country selection. It is available under the Advanced Fields section within the form editor.

Address field as displayed in the Field Library

Address field as displayed in the Form Editor.

Common Field Settings

Many of the options in the General, Appearance and Advanced sections are common to most fields. Refer to this article for a description of those common settings.

In the section below, you will find description of those settings that are unique to this field type.

General Settings

Address Type

Select the type of address you would like to use, from the choices of International, United States, Canadian.

International

United States

Canada

You can add support for a custom address type by using the gform_address_types filter. This filter can also be used to update the format of the predefined options as well.

Address Fields

OptionsDescriptionsShow (toggle)Show or hide specific address sub-fields. For example, you could opt to hide Address Line 2, show ZIP Code, but hide the StateCustom Sub-LabelReplace the default address sub-field labels with custom text. For example, replace 「Address Line 2」 with 「Suite or Apartment #」.Default Country/State/ProvinceYou can specify a default country value (for international address type), default state (for US address type) or default province (for Canadian address type).

Appearance Settings

SettingDescriptionSub-Label PlacementSimilar to the Description Placement option, but instead applies to the sub-label defined in the General settings.

Advanced Settings

SettingDescriptionDefault ValuesDefine a default value for each sub-field. Note that anything entered here will override the Default Country/State/Province General Setting. If using a drop down list of values (e.g. State, Province or Country), the value entered here must be an exact match to a value offered in that list.Display Option Allows you to populate the field from the information submitted in another Address field. For example, to make the shipping address fields the same as the billing address.Refer to section below for additional options.

Use values submitted in a different field

Checking this setting opens a further options as described below.

SettingDescriptionOption LabelText that appears next to the checkbox, defaults to 「Same as previous」 checkbox. An example would be: 「Use billing address.」Source FieldIdentify the Address field that will provide the data to this field.Activated by defaultTurn』s on the 「use other values」 option by default at form load. This will hide the address fields, and display only the (filled) check box. If a user un-checks it, the other fields will appear again.

Custom Format

To change the expected format of one of the offered custom formats, you can replace the Address field with multiple Single Line Text fields, and establish an input mask for those you wish to be non-standard. You can learn more about input masks in this article.

Conditional Logic Support

You can configure conditional logic rules on other fields based on the values of the Address sub-field inputs.

CSS Targeting Examples

Address Field Targeting Examples

Extending the Address Field

Looking for information about what properties the Address field uses in the Field Object, what format its value is stored in the Entry Object and how you can access it, or what hooks/filters it includes? Then take a look at the GF_Field_Address article.

Merge Tags

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

Usage

Display the Street Address.

{Field Name:2.1}

Display the Address Line 2.

{Field Name:2.2}

Display the City.

{Field Name:2.3}

Display the State / Province.

{Field Name:2.4}

Display the ZIP / Postal Code.

{Field Name:2.5}

Display the Country.

{Field Name:2.6}

Modifiers

This merge tag does not have any modifiers.