Website Field CSS Selectors

Website Field CSS Selectors

ContainerInput

Container
example: website field container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_website {border: 1px solid red;}
example: website field container (div) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_website {border: 1px solid red;}
example: website field container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_website {border: 1px solid red;}
Input
example: website field input (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_website input {border: 1px solid red;}
example: website field input (input) – applies just to form ID #1
body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_website input {border: 1px solid red;}
example: website field input (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 .ginput_container_website input {border: 1px solid red;}

Creating Columns in the Form Editor

Creating Columns in the Form Editor

IntroductionDrag And dropDrag and Drop Not Working?Column Drop ZonesRow Drop ZonesDragging Fields to Create ColumnsResize Columns using Column HandlesKnown Issues or Limitations

Introduction

In this article, we』ll demonstrate how to work with columns in the Form Editor in the Gravity Forms 2.5. With this new streamlined release of the form editor, you create rows and columns of fields simply by dragging and dropping fields into the form editor:

Drag And drop

Fields can be placed on your form using drag and drop actions. Where you drag and drop determines how the columns will be created. We call the destination area that you release at the end of a drag action a 「drop zone」.

Drag and Drop Not Working?

Drag and drop column control is only available to forms using Gravity Forms 2.5 standard markup. If you are using legacy markup, or using an older Gravity Forms version, then features like drag and drop will not be available.

If you wish to change to using the standard markup, you will need to disabling the Enable legacy markup toggle, found within the Form Settings → Form Options

Column Drop Zones

To create multiple columns of fields, drag fields into the Column Drop Zones to the left or right of existing fields in the editor.

Row Drop Zones

To create multiple rows of fields, drag fields into the Row Drop Zones to the top and bottom of an existing row of fields in the editor.

Dragging Fields to Create Columns

To create columns in the editor, drag and drop fields directly into a column drop zone and the editor will automatically add the column and re-size existing fields.

Select the Field in the editorGrab the Field HandleDrag the Field over the Column Drop ZoneDrop the Field and the Columns will automatically adjust

Resize Columns using Column Handles

To resize existing columns in the editor, use Column Handles to shrink or enlarge the width of a column.

Select the Field in the editorGrab the Column Handle to the right of the field, the Active Column HandleDrag left to shrink the column widthDrag right to enlarge the column width

Known Issues or Limitations

There is a maximum of 4 resizable columns. You cannot create a fifth.Columns are not supported on forms with legacy markup enabled.The field types of Page Break, Section Break, & Hidden cannot be placed in columns.

Where Do I Put This Code?

Where Do I Put This Code?

IntroductionImportant!CSSJavascript/jQueryPHPThird Party Plug-Ins

Introduction

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 places that code snippets can be added to extend your forms. This article covers most of the common options.

Important!

Replacing or updating your theme can overwrite the theme directory in your site folder, and that means modifications like these you may have made to files there will be lost. Always keep regular back-ups, consider the use of a child theme, and check out some of the third party plug-ins that provide safer alternatives for adding code.

CSS

CSS code will typically look something like this:

body .gform_wrapper { border:1px solid red }

In most cases, custom CSS should be pasted at the bottom of your theme』s style.css file. Your theme may have a custom.css. If so, pasting your custom styles at the very end of that file is preferable. Generally, when a theme includes any type of file named custom it indicates that this file should be used for custom code specific to the file type.

Javascript/jQuery

Javascript code will typically look something like this:

jQuery(document).ready(function($) {
$('.gfield_checkbox input').click(function(){
var is_checked = $(this).is(':checked');
var parent = $(this).parent('li');
if(is_checked){
$(parent).addClass('selected');
} else {
$(parent).removeClass('selected');
}
});
});

Community Library Alternative The team at Gravity Wiz have a free Custom JavaScript add-on which you can use to include custom scripts for forms.(see disclaimer at bottom of article)

Some theme』s will provide an init.js or, even better, a custom.js file. If so, pasting the custom Javascript in either of these files would be ideal. If neither is present, you can wrap your Javascript code in a

Additional Information on using JavaScript with WordPress can be found here: https://codex.wordpress.org/Using_Javascript

PHP

PHP code will typically look something like this:

PHP snippets will almost always be pasted in your theme』s functions.php file. A few things to be aware of when adding PHP snippets.

Your functions.php will already have an opening

Zapier Feed Meta

Zapier Feed Meta

IntroductionUsageProperties

Introduction
The Feed Object meta for the Zapier add-on is an associative array containing the properties which determine how the add-on should process the form submission.
$feed['meta'] = array(
'feedName' => 'Your Feed Name',
'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

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

zapURL string
The Zapier hosted URL where the entry data will be sent when the feed is processed.

adminLabels string
Indicates if the field admin labels should be sent to Zapier instead of the main labels, if configured. Possible values: 1 or 0.

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.

legacy boolean
Indicates if the feed was migrated from the non-framework version of the add-on (pre 4.0).

legacy_id int
The feed ID when it was stored in the legacy rg_zapier table.

Website

Website

SummaryCommon SettingsMerge TagsUsageModifiersValidation

Summary

The Website field allows users to enter a website URL. This field automatically validates that the information entered was formatted correctly. It is available under the Advanced Fields section within the form editor.

Website field as displayed in the Field Library

Website field as displayed in the Form Editor.

Common Settings

This field uses only common field settings for the General, Appearance, and 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.

Merge Tags

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

Usage

{Field Name:2}

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 ID within the form. In the example above, it would be field ID 2.

Modifiers

This field does not have any modifiers.

Validation

URLs submitted through this field are validated by GFCommon::is_valid_url(). For more information on how URLs are validated, and overriding them, take a look at the article on URL validation in Gravity Forms.

wp_rg_form_view

wp_rg_form_view

「wp_rg_form_view」 refers to the form view database table used by Gravity Forms. The table is named using your site』s database prefix (「wp」 is the default) plus 「rg_form_view」.
Note: Once Gravity Forms version 2.3 is released, the table will have the new name 「wp_gf_form_view」.
Further details for this table can be found viewing the Database Storage Structure Reference document for Gravity Forms version 2.3.

Viewing Sales Results

Viewing Sales Results

Where can I see the Sales Results?Sales Results DisplayResults Filter

Where can I see the Sales Results?

As a site administrator, you can view results from a payment add-on like Stripe or PayPal by navigating to the Form and clicking the Sales link at the top of the form editor.

If you have multiple Add-Ons installed that support results, you will need to hover over the 「Results」 item and then select 「Sales」 in the submenu.

Sales Results Display

The sales results are divided into a few sections within a dashboard style layout. 

SectionDescriptionTodayDisplays the value of orders and subscriptions made today.YesterdayDisplays the value of orders and subscriptions made yesterday.Last 30 DaysDisplays the value of orders and subscriptions made in the last 30 days.TotalDisplays the value of orders and subscriptions made in total.Results GraphDisplays sales results in a visual format.Results NumbersDisplays sales results in a number format.

Results Filter

The filter section displayed in the right hand sidebar allows you to limit which results are included in your display.

View selects how you would like the data to be displayed: Daily, Weekly, or Monthly.

Payment Method allows you to view only certain payment methods like Visa or Mastercard.

Start date and End date limit your results display to those submission made within a certain date range.

Using the Survey Add-On

Using the Survey Add-On

IntroductionPre-RequisitesConfiguring the Survey FieldDisplay Your SurveySurvey ResultsSurvey Merge Tags

Introduction

The Survey Add-On allows you to easily interact with your users to both collect and analyze data on your target audience. Market research, customer satisfaction, employee surveys, job satisfaction surveys – anything is possible! You can even implement Survey fields on an Order Form to quickly get feedback from your customers as they place an order!

The Survey field introduces not one, but three new field types geared towards surveys: Likert, Rating, and Rank. The Survey field is accessible in the Form Editor within the Advanced Fields toolbox.

The integrated Survey Results display allows you to view your survey results and filter the results data based on your needs. You can view Survey Results for any form that contains a Survey field by clicking on the Results link on the Gravity Forms toolbar.

Pre-Requisites

Setup the Survey Add-On

Configuring the Survey Field

After installing and activating the Survey Add-On, you can now add Survey fields to your form. This is done by adding a Survey field from the Advanced Fields toolbox in the form editor to any form you would like to add a Survey to. You would add a Survey field for each survey question you would like to ask the user.

In your WordPress admin dashboard, go to New Form under the Forms navigation or edit an existing form from Forms.Add a Survey field to your form from the Advanced Fields toolbox.Edit the field and configure the options. You can configure it as a Likert, Rank, Rating, Radio Buttons, Checkboxes, Single Line Text, Paragraph Text, or Drop Down field using the Survey Field Type option.Enter the survey question in the Survey Question box.Enter the answer choices in the Choices interface based on which Survey Field Type you selected.Save your form.

That』s it! Creating a Survey using Gravity Forms is that easy.

Display Your Survey

The Gravity Forms Survey Add-On uses the standard form shortcode, function, and widget in order to display the form. You would insert your survey into a page or post using the standard methods you already use when displaying a Gravity Form on your site.

Survey Results

You can view aggregate results of your survey and filter this data based on date and field selection by going to the Survey Results. You access Survey Results by clicking on the Results navigation item in the Gravity Forms toolbar. If you have multiple Add-Ons installed that support Results, you will need to rollover the 「Results」 navigation item and then select 「Survey Results」.

Survey Merge Tags

The Survey Add-On includes a few specific merge tags for use in notifications and confirmations.

{score} — displays the score for a specific survey question.{survey_total_score} – displays the total score for the survey.

Using the Akismet Add-on

Using the Akismet Add-on

IntroductionDescriptionPrerequisitesSetup AkismetMarked As SpamTesting Akismet FormsAkismet Hooks

Introduction

The official Gravity Forms Akismet Add-on provides a way to integrate your form with the Akismet service, allowing you to use that service to help identify suspicious or likely spam entries.

Description

Akismet is a spam filtering plugin for WordPress websites. It catches blog comments and pingback spam using its own algorithm and a broad collection of data collected from thousands of sources.

This algorithm learns from previous data and the actions taken by participating websites. For example, when a number of websites start reporting similar content as spam, Akismet will learn to identify this type of content as spam.

Akismet integration used to be part of Gravity Forms core but with the release of Gravity Forms, Akismet integration is now handled by the official Gravity Forms Akismet addon. Both integrations will work for the time being but the old method of integration will be phased out.

Prerequisites

To use the Akismet Add-On, you will require:

Gravity Forms plugin, and the official Gravity Forms Akismet Add-On.The Akismet Spam Protection plugin must be installed and active.Ensure the global Akismet setting under Gravity Forms → Settings page is toggled to On.

When all prerequisites are satisfied, a new Akismet page will be added to the Form Settings area of every form.

Setup Akismet

Refer to the Akismet Settings Reference article for a full list of add-on settings, and the Setting Up The Akismet Add-On for the process steps required to get up and running.

Marked As Spam

When Akismet marks an entry as spam the entry can still be found on the entries page, but it will be placed in the Spam category instead of Unread.

When you manually mark an entry as spam (by clicking the red Spam link as shown in the screenshot above) it will help train Akismet for similar entries moving forward. Akismet will take this information and uses it to improve its spam filtering process not only on your installation but across all websites. This help guide shows how to mark entries as spam.

Testing Akismet Forms

Entries submitted from a form preview will be processed by Akismet in test mode, which prevents those submissions from training the Akismet filters.Embedded forms submitted by logged in users will send the user role to Akismet. Akismet does not mark submissions by administrators as spam.

Akismet Hooks

Gravity Forms includes two filters which can be used to customize the Akismet integration:

gform_akismet_enabled which can be used to enable or disable the integration globally or for specific forms.gform_akismet_fields which can be used to modify the data which is sent to Akismet.

Viewing Survey Results

Viewing Survey Results

Where To Find ThemResults DisplayResults FilterExportingResetting Survey Results

Where To Find Them

Your survey results can be accessed from within the Entries page or from within the Form Editor.

On either of these pages, click on Survey Results in the top menu bar.

If you are using multiple add-ons that generate results, you may need to hover over Results and click on Survey Results.

Results Display

The main page of the results display will show the quantity of responses received for each answer of every question included.

Note that these results are calculated dynamically, so will be affected by any changes made to entries after submission.

Results Filter

The filter section displayed in the right hand sidebar allows you to limit which entries are included in your results display.

Include results if allows you filter the entries that make up your results display, based on criteria such as the content of a particular form field, or other submission metadata.

Start date and End date limit your results display to those submission made within a certain date range.

Exporting

You cannot export the summary results, but you can export the entries that constitute them if you wish to work on your own dataset manipulations. See this article for more information on exporting entries.

Resetting Survey Results

You can learn about resetting results by reading this article.