Adding Images, JavaScript, and HTML To Forms

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:
Profile photo

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

Adding a Form Using the Classic Editor

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 a Form Using Blocks

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 a Template (or Saved) File

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 a Theme File or Hooks

Adding a Form Using a Theme File or Hooks

SummaryFunction CallUsage ExamplesEnqueue Scripts and Styles

Summary
In this article, we show how to use the Gravity Forms function call embedding method that would allow you to add a form to a page or post using a theme file or third-party hooks.
Function Call
If you would like to call a form from within a WordPress theme file, you may do so using a function call. The function and its available parameters are outlined below.
gravity_form( $id_or_title, $display_title = true, $display_description = true, $display_inactive = false, $field_values = null, $ajax = false, $tabindex, $echo = true );

$id_or_title
(mixed) (required) The id or title of the form to be embedded.
$display_title
(boolean) (optional) Whether or not to display the form title.
Defaults to true.
$display_description
(boolean) (optional) Whether or not to display the form description.
Defaults to true.
$display_inactive
(boolean) (optional) Whether or not to display the form even if it is inactive.
Defaults to false.
$field_values
(array) (optional) Pass an array of dynamic population parameter keys with their corresponding values to be populated.
Example: 「array(『parameter_name』 => 『custom_value』)」
Defaults to false.
$ajax
(boolean) (optional) Whether or not to use AJAX for form submission.
Defaults to false.
$tabindex
(integer) (optional) Specify the starting tab index for the fields of this form.
$echo
(boolean) (optional) Whether to echo the form code or return it.
Defaults to true.

Usage Examples

Basic Function Call
gravity_form( 1, false, false, false, '', false );
This snippet will display the form with an id of 『1』; the title and description will not be displayed, the form itself will not display if it is inactive, and it will not use AJAX for form submission.

With Ajax & Tabindex
gravity_form( 1, false, false, false, '', true, 12 );
This snippet will display the exact same form as above except it will use AJAX for form submission and the starting tabindex will be 12.

Using the Form Title instead of ID
gravity_form( 'Contact Us', false, false, false, '', false );
This snippet will display the form titled 『Contact Us』; the title and description will not be displayed, the form itself will not display if it is inactive, and it will not use AJAX for form submission.
If you use the id for a form that does not exist, the following message will be displayed:
Oops! We could not locate your form.

Pass a variable for Dynamic Population
gravity_form( 1, false, false, false, array('some_field' => $my_variable ), false);
This snippet will do the same shown above for Basic Function Call adding the array to pass a variable named $my_variable that will populate a field that has the parameter name some_field

Enqueue Scripts and Styles
When embedding a form via a function call you must also manually include the necessary Gravity Forms related Javascript and CSS via the built in WordPress enqueue capabilities. Gravity Forms does not include these by default when calling a form via a function call and they are necessary for forms that contain conditional logic or the date picker field.
We strongly recommend you enqueue the scripts rather than including them as hardcoded calls in your theme. Implementing it this way will insure that Gravity Forms does not include them on the page if they are already present. It is also a good practice to only load these scripts on the front end.
Gravity Forms 1.5 introduced the gravity_form_enqueue_scripts function which allows you to easily enqueue the necessary Gravity Forms』 scripts and styles when manually embedding a form. This is also useful if you are using a GF widget and do not wish for the styles and scripts to be loaded inline.

Add Sub-Pages to Gravity Forms Admin Navigation

Add Sub-Pages to Gravity Forms Admin Navigation

If you want to add a page to the Gravity Forms Admin navigation options, add the following code to your theme』s functions.php file.
1234567891011add_filter( 'gform_addon_navigation', 'create_menu' );function create_menu( $menus ) {  $menus[] = array( 'name' => 'my_custom_page', 'label' => __( 'My Custom Page' ), 'callback' =>  'my_custom_page' );  return $menus;} function my_custom_page(){     echo 'My Custom Page!'; }
This would create a page called My Custom Page that shows text on it that says My Custom Page.

How to Add Delayed Payment Support to a Feed Add-On

How to Add Delayed Payment Support to a Feed Add-On

IntroductionEnable Delayed Payment SupportDefine a Custom LabelFull ExamplePerform a Custom Action When a Feed is DelayedParameters

Introduction
There are times when users will want to use multiple add-ons with the same form; one of those could be a payment add-on such as PayPal Standard or Stripe when configured to use Stripe Checkout. As payment is not captured during submission the user may want the option to delay processing of other add-on feeds until payment has been sucesfully captured. The GFFeedAddOn class has built-in support for this; all you need to do is enable it in your add-on.
Enable Delayed Payment Support
It』s very easy to enable; all you need to do is add one line to your add-ons init() method. Here』s an example:
$this->add_delayed_payment_support( array() );

That will add a checkbox to the payment add-on feed with the label 「Process $_short_title feed only when payment is received.」
Define a Custom Label
When enabling delayed payment support you can define your own custom label for the checkbox. Here』s an example:
$this->add_delayed_payment_support(
array(
'option_label' => esc_html__( 'Subscribe contact to ActiveCampaign only when payment is received.', 'gravityformsactivecampaign' )
)
);

Full Example
/**
* Plugin starting point. Handles hooks, loading of language files, and delayed payment support.
*/
public function init() {

parent::init();

$this->add_delayed_payment_support(
array(
'option_label' => esc_html__( 'Subscribe contact to ActiveCampaign only when payment is received.', 'gravityformsactivecampaign' )
)
);

}

Perform a Custom Action When a Feed is Delayed
If you want to perform a custom action when a feed is delayed you can do that by overriding the delay_feed() method:
public function delay_feed( $feed, $entry, $form ) {
// do something when the feed is being delayed
}

Parameters

$feed Feed Object
The feed which has been delayed.

$form Form Object
The form which is currently being processed.

$entry Entry Object
The entry which is currently being processed.

How to Add a Custom Field Group when Using the Field Framework

How to Add a Custom Field Group when Using the Field Framework

IntroductionThe add_button() method

Introduction
Back in the day you could use the gform_add_field_buttons filter to add the buttons for custom fields and add custom field groups.
With the introduction of the GF_Field class adding a field to an existing group is a simple as overriding the get_form_editor_button() method. But what about adding the field button to a custom group?
Introducing the add_button() method.
The add_button() method
GF_Field::add_button() is responsible for adding the field button to the group specified in the array returned by get_form_editor_button(), however, if the group does not exist the button won』t be added.
If you were to use the gform_add_field_buttons filter to add your custom group you would find the group is added but your new field isn』t added to the group, that』s because the filter runs after the fields are added to the groups. You could update your function hooked to the gform_add_field_buttons filter to also add the button to the group but what would be the fun in that.
The following example shows how you can override the add_button() method to include a custom group if it doesn』t already exist.
123456789101112/** * Adds the field button to the specified group. * * @param array $field_groups The field groups containing the individual field buttons. * * @return array */public function add_button( $field_groups ) {    $field_groups = $this->maybe_add_field_group( $field_groups );     return parent::add_button( $field_groups );}
And here』s the function which actually performs the check and then returns the updated array of groups.
1234567891011121314151617181920212223/** * Adds the custom field group if it doesn't already exist. * * @param array $field_groups The field groups containing the individual field buttons. * * @return array */public function maybe_add_field_group( $field_groups ) {    foreach ( $field_groups as $field_group ) {        if ( $field_group['name'] == 'your_custom_group_name' ) {             return $field_groups;        }    }     $field_groups[] = array(        'name'   => 'your_custom_group_name',        'label'  => __( 'The Group Label', 'simplefieldaddon' ),        'fields' => array()    );     return $field_groups;}
Now when you your get_form_editor_button() function looks like this your field button will be added to the custom group.
1234567891011/** * Assign the field button to the custom group. * * @return array */public function get_form_editor_button() {    return array(        'group' => 'your_custom_group_name',        'text'  => $this->get_form_editor_field_title(),    );}

ActiveCampaign Feed Meta

ActiveCampaign Feed Meta

IntroductionUsagePropertiesCustom Field Properties

Introduction
The Feed Object meta for the ActiveCampaign add-on is an associative array containing the properties which determine how the add-on should process the form submission.
$feed['meta'] = array(
'feed_name' => 'Your Feed Name',
'fields_email' => '1',
'fields_first_name' => '2.3',
'fields_last_name' => '2.6',
'feed_condition_conditional_logic' => true,
'feed_condition_conditional_logic_object' => array(
'conditionalLogic' => array(),
),
);

Usage
We recommend accessing the $feed meta using the rgar() or rgars() functions, e.g.:
$conditional_logic_enabled = rgars( $feed, 'meta/feed_condition_conditional_logic' );

Properties

feed_name string
The feed name which appears on the add-ons feeds tab.

list string
The ID of the ActiveCampaign List this feed will subscribe the user to when processed.

fields_email string
The ID of the field containing the user』s email address. Required.

fields_first_name string
The ID of the field containing the user』s first name.

fields_last_name string
The ID of the field containing the user』s last name.

fields_phone string
The ID of the field containing the user』s phone number.

fields_orgname string
The ID of the field containing the user』s organization name.

fields_tags string
The ID of the field containing the tags. This setting was removed in ActiveCampaign 1.2.

custom_fields array
A multidimensional array containing the ActiveCampaign custom fields. See Custom Field Properties.

tags string
A comma seperated list of tags. Merge tags are supported. This setting was added in ActiveCampaign 1.2.

double_optin_form string
The ID of the ActiveCampaign form which will be used when exporting to ActiveCampaign to send the opt-in email.

instant_responders boolean
Should ActiveCampaign send any instant responders setup when the contact is added to the list. This option is not available to users on a free trial. Default is false.

last_message boolean
Should ActiveCampaign send the last campaign sent out to the list to the contact being added. This option is not available to users on a free trial. Default is false.

feed_condition_conditional_logic boolean
Is the feed condition (conditional logic) setting enabled. Default is false.

feed_condition_conditional_logic_object array
An associative array containing the conditional logic rules. See the Conditional Logic Object for more details.

Custom Field Properties
array(
'key' => '1',
'value' => 'date_created',
)

Each custom field is an associative array containing the following properties:

key integer
The ActiveCampaign custom field ID.

value string
The ID of the form field or entry meta item containing the value for this custom field.

ActiveCampaign Change Log

ActiveCampaign Change Log

1.9.11.9 | 2021-05-131.8 | 2020-09-071.7 | 2020-03-111.61.51.41.3.11.31.21.1.21.1.11.11.0

1.9.1

Updated the API auth test so the existing gform_activecampaign_request_timeout filter can be used to increase the request timeout period.
Fixed an issue where the add-on log uses the "Invalid API URL" message for request failures of any kind.

1.9 | 2021-05-13

Fixed an issue that causes the plugin settings to always show the API URL and Key as invalid even when they are correct.

1.8 | 2020-09-07

Added support for Gravity Forms 2.5.

1.7 | 2020-03-11

Added translations for Hebrew, Hindi, Japanese, and Turkish.
Fix PHP notices thrown on the feed list and edit page in PHP 7.4.

1.6

Added support for adding notes to contacts.
Updated feed settings with improvements to user experience.
Fixed issue where field values hidden by conditional logic were overriding visible values when mapped to the same Active Campaign field.

1.5

Added filter to prevent mapped, blank fields from overriding existing data.
Example:
add_filter( 'gform_activecampaign_override_empty_fields', '__return_true' );
Added filter do allow different field types to be mapped to Active Campaign's email field.
Example:
add_filter( 'gform_activecampaign_supported_field_types_email_map', function( $field_types ) {
return array( 'email', 'hidden', 'text' );
});
Added filter to change the timeout value when sending requests to Active Campaign and updated default value to 20 seconds.
Example:
add_filter( 'gform_activecampaign_request_timeout', function(){ return 30; //Changes timeout to 30 seconds } );
Added security enhancements.
Added GPL to plugin header.
Updated feed setting styles.
Updated Plugin URI and Author URI to use https.
Updated feed list to prevent feed creation when valid API URL is not provided.
Fixed issue where non-mapped fields would override existing data with blank values.
Fixed strings for translations.
Fixed PHP notice when editing a feed when no ActiveCampaign forms are available.

1.4

Added the gform_activecampaign_contact_pre_sync filter for overriding the contact properties before sending them to ActiveCampaign.
Added feed duplication support.
Updated API library naming to prevent conflicts with third-party ActiveCampaign API libraries.
Fixed an issue with the request failed message if a WP_Error occurs.

1.3.1

Fixed PHP warning related to Double Opt-In Form setting.

1.3

Added support for delaying feed processing until payment by PayPal Standard is successfully completed.
Updated 'Opt-In Condition' setting label to 'Conditional Logic'.
Updated admin stylesheet to use minified file by default unless SCRIPT_DEBUG is active or query param gform_debug is set, e.g. domain.com/?gform_debug.

1.2

Added merge tags support for contact tags.
Added the gform_activecampaign_tags filter.
Removed the gform_activecampaign_enable_tag_mapping filter, the tags setting is now permanently displayed.

1.1.2

Added additional logging statement to process_feed().
Updated the form field drop down for the Email Address to include hidden fields.
Updated feed processing to abort if value of mapped Email Address field is invalid or empty.

1.1.1

Added gf_activecampaign() for easily getting an ActiveCampaign instance.
Fixed PHP warnings during feed processing.

1.1

Added Double Opt-In support.
Added Spanish (es_ES) translation.

1.0

It's all new!