Setting Up the FreshBooks Add-On

Setting Up the FreshBooks Add-On

Pre-RequisitesSetup

Note: As of September 2016, FreshBooks has released a new version of their service. Currently, the Gravity Forms FreshBooks Add-On only works with the previous Freshbooks Classic version and will not work with their updated API.
Pre-Requisites

Download and install the add-on
A FreshBooks account

Please note that when using the FreshBooks Add-On you are limited to the capabilities of the FreshBooks account you have signed up for. Limitations include the number of clients you can create, so be sure to have a FreshBooks account that will be able to handle the level of integration you choose to implement.
Setup

Log into your WordPress admin dashboard.
On the left side navigation menu, hover over Forms and click on Settings.
From this page, click the FreshBooks tab.
Enter your Site Name and Authorization Token. If you need help finding this, refer to the Obtaining and Saving your FreshBooks API Credentials article.
Click Update Settings. If you』ve entered your account information correctly, you will be notified by green check marks beside each box. If you do not see green check marks, please double check this information and try again.

Once you have entered your API key, you』re ready to begin creating a feed for the FreshBooks Add-On.

Common Issues With Formatting

Common Issues With Formatting

Why aren』t my form styles being loaded properly?Why is my form showing up with list bullets?How do I align my form fields into columns?Why does the word 「none」 appear next to my form inputs in IE?

Why aren』t my form styles being loaded properly?
Most of the time this is due to embedding the form via the php function call directly into the theme files or into a third-party widget. When embedding the form via this method, you also have to manually enqueue the CSS and scripts required for the forms to display and function properly.
You can find more information on this topic in the documentation here:

Embedding a Form
gravity_form_enqueue_scripts

Why is my form showing up with list bullets?
This is usually due to the form inheriting styles from your theme. You can add the following CSS declaration to your theme stylesheet and it should remove the bullet styling plus any stray borders that appear on occasion.
body .gform_wrapper form .gform_body ul,
body .gform_wrapper form .gform_body ul li {
list-style-type: none !important;
list-style-image: none !important;
list-style: none !important;
background-image: none !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important
}
body .gform_wrapper form .gform_body ul > li:before {
content: "";
}

How do I align my form fields into columns?
Gravity Forms includes several 「helper」 CSS classes we call CSS Ready Classes. They allow you to easily create column style layouts without having to write custom CSS rules.
You can find out more about these classes in the CSS Ready Classes article.
Why does the word 「none」 appear next to my form inputs in IE?
We have seen this several times and it has always been related to the usage of the DDBelatedPNG.js script. This script was designed to add transparent PNG image support for IE6. Both IE6 and the DDBelatedPNG script are at the end of life and therefore the script shouldn』t be necessary any longer. Removing the script reference from the page solves the issue.

Form Settings

Form Settings

Getting ThereSettings AreaSettings Sections Form BasicsForm LayoutForm ButtonSave and ContinueRestrictionsForm OptionsSave Settings

Getting There

Every form has its own group of settings. You can navigate to the Form Settings page a few different ways:

From within the Form List view, hover over the form you want to review and then click or hover on the Settings link that appears below. From within the Form Editor for a particular form, hover or click on the Settings option in the top bar.

Settings Area

The Settings area contain access to the many form specific areas of your form. Form Settings is the top most option. Note that the content of this left hand menu may vary based on which add-ons you have installed.

An example of some options available in the Settings area.

Settings Sections

Each setting option within the Form Settings page is described below, categorized into the sections they appear in.

Note that you can get a quick tooltip about a form settings by hovering over the (?) 「what is this」 button on the settings page for a short tooltip.

Form Basics

These are the basic fields entered when you created your form.

TitleEnter the title of your form. This will be helpful when you need to find it in the forms list.

DescriptionEnter a description for your form. This may be used for user instructions.

Form Layout

Label PlacementThis defines where your field labels will appear, relative to the position of the input area of the field. Top aligned is above the field, left aligned is and right aligned to that respective side of the field.

Description PlacementSelect the description placement. Descriptions can be placed above the field inputs or below the field inputs. Only available when Label Placement is set to 「Top aligned」. This setting can be overridden by field specific settings.

Sub-Label PlacementDetermines the placement of the sub-label. This setting can be overridden by field specific settings.

Validation SummaryIf enabled, will show a summary that lists form validation errors at the top of the form when a user attempts a failed submission.

Required Field IndicatorDetermines how you wish to indicate a required field. Options include the text 「(required)」, an asterisk only, or a customer indicator where you can define the text to be displayed.

CSS Class NameEnter the CSS class name you would like to use in order to override the default styles for this form.

Form Button

This section defines the options available to manipulate the appearance of the button used to submit your form.

Input TypeSelect either:Text: type in what you would like to appear as the button text. Image: to use an image as the button, select Image and enter the full path to the image you would like to use.

Conditional LogicThis option allows you to create rules to dynamically display or hide the submit button based on values from a field. Refer to this article for more on conditional logic.

Note that hiding the submit button can cause usability issues, which can negatively affect the accessibility of your form.

Save and Continue

This checkbox allows you to enable a button in which the user can save their progress and continue at a later time. See this article more information on Save and Continue.

Restrictions

Limit number of entriesEnter a number in the input box below to limit the number of entries allowed for this form. The form will become inactive when that number is reached.

Schedule formSchedule a time period the form is active. Checking this option also provides additional inputs for the Start Date and Time and End Date and time for the form schedule, along with Pending Message and Expired Message to display when the form is waiting to be displayed and after it has expired.

Require user to be logged inCheck this option to require a user to be logged in to view this form.

Require login messageEnter a message to be displayed to users who are not logged in. Shortcodes and HTML are allowed in this message so you can use a shortcode to call another form.

Form Options

Enable anti-spam honeypotChecking this option will enable the honeypot spam protection technique, which is an alternative to the reCAPTCHA field. Once activated, the honeypot spam protection technique will function automatically and will not require any user interaction. Form submissions caught by the honeypot protection are not saved, but the form confirmation is processed as usual.

Enable Animated transitionsChecking this option will enable a sliding animation when displaying/hiding conditional logic fields. By default, the displaying/hiding of conditional logic fields has no animation; the fields are displayed/hidden instantly.

Enable legacy markupTurning this option on will revert to pre-2.5 markup for your form. This option is enabled by default for forms that existed prior to you upgrading to 2.5. This option is off for all new forms.

Save Settings

Don』t forget to click Save Settings once you are done to commit your form setting changes.

Form Object

Form Object

IntroductionUsagePropertiesBasic PropertiesPost RelatedForm SubmissionAdvanced PropertiesForm JSON

Introduction
The Form object is the main object in Gravity Forms. It contains all properties of a particular form (i.e. form title, fields, notification, scheduling, etc…). This object is available to most of the Gravity Forms hooks.
It is formatted as an associative array (i.e. $form[『title』] retrieves the form title).
Usage
12$form['title']                  //returns the form title$form['fields'][0]['type'];     //returns the type of the first field of the form

Properties
Basic Properties

id integer
The form Id.

title string
The form title

description string
The form description

labelPlacement string
Determines if the field labels are displayed on top of the fields (top_label), besides the fields and aligned to the left (left_label) or besides the fields and aligned to the right (right_label)
Possible values: top_label, left_label, right_label

descriptionPlacement string
Determines if the field description is displayed above the field input (i.e. immediately after the field label) or below the field input.
Possible values: above, below
Note: This setting is only available when labelPlacement is set to 「top_label」. When labelPlacement is not 「top_label」, this setting will always be set to 「below」.

Field Object array
List of all fields that belong to the form

Post Related

useCurrentUserAsAuthor bool
For forms with Post fields, this determines if the post should be created using the current logged in user as the author. 1 to use the current user, 0 otherwise.

postAuthor integer
When useCurrentUserAsAuthor is set to 0, this property contains the user Id that will be used as the Post author.

postCategory integer
Form forms with Post fields, but without a Post Category field, this property determines the default category that the post will be associated with when created.

postContentTemplate string
Template to be used when creating the post content. Field variables (i.e. {Name:3} ) can be added to the template to insert user submitted values into the post content. Only applicable when postContentTemplateEnabled is true

postContentTemplateEnabled bool
Determines if the post template functionality is enabled. When enabled, the post content will be created based on the template specified by postContentTemplate.

postFormat string
For forms with Post fields, determines the format that the Post should be created with.
Possible values: Will vary depending on the formats supported by the current theme.

postStatus string
For forms with Post fields, determines the status that the Post should be created with.
Possible values: draft, pending, publish

postTitleTemplate string
Template to be used when creating the post title. Field variables (i.e. {Name:3} ) can be added to the template to insert user submitted values into the post title. Only applicable when postTitleTemplateEnabled is true

postTitleTemplateEnabled bool
Determines if the post title template functionality is enabled. When enabled, the post title will be created based on the template specified by postTitleTemplate.

Form Submission

confirmation array
Contains the form confirmation settings such as confirmation text or redirect URL

notifications Notifications Object
An associative array containing the properties for all the email notifications which exist for a form.

Advanced Properties

Button array
Contains the form button settings such as the button text or image button source.

cssClass string
Custom CSS class. This class will be added to the

tag.

enableAnimation bool
When enabled, conditional logic hide/show operation will be performed with a jQuery slide animation. Only applicable to forms with conditional logic.

enableHoneypot bool
Specifies if the form has the Honeypot spam-protection feature

limitEntries bool
Specifies if this form has a limit on the number of submissions. 1 if the form limits submissions, 0 otherwise.

limitEntriesCount integer
When limitEntries is set to 1, this property specifies the number of submissions allowed.

limitEntriesMessage string
Message that will be displayed when the maximum number of submissions have been reached

scheduleForm bool
Specifies if this form is scheduled to be displayed only during a certain configured date/time

scheduleStart string
Date in the format (mm/dd/yyyy) that the form will become active/visible

scheduleStartHour integer
Hour (1 to 12) that the form will become active/visible

scheduleStartMinute integer
Minute that the form will become active/visible

scheduleStartAmpm string
「am」 or 「pm」. Applies to scheduleStartHour

scheduleEnd string
Date in the format (mm/dd/yyyy) that the form will become inactive/hidden

scheduleEndHour integer
Hour (1 to 12) that the form will become inactive/hidden

scheduleEndMinute integer
Minute that the form will become inactive/hidden

scheduleEndAmpm string
「am」 or 「pm」. Applies to scheduleEndHour

scheduleMessage string
Message to be displayed when form is no longer available

schedulePendingMessage string
Message to be displayed when form is not yet available

Form JSON
This example shows how a form array would look when formatted as JSON for use by the Gravity Forms CLI Add-On.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071{    "title": "My test form",    "description": "",    "labelPlacement": "top_label",    "descriptionPlacement": "below",    "button": {        "type": "text",        "text": "Submit",        "imageUrl": ""    },    "fields": [{        "type": "text",        "label": "My New Label",        "defaultValue": "Just testing",        "id": "1",        "visibility": "visible",        "formId": "14",        "pageNumber": 1    }, {        "type": "select",        "label": "My Dropdown",        "choices": [{            "text": "Choice 1",            "value": "one"        }, {            "text": "Choice 2",            "value": "two"        }],        "id": "2",        "visibility": "visible",        "formId": "14",        "pageNumber": 1,        "isRequired": false    }],    "version": "2.3-rc-5",    "id": "14",    "useCurrentUserAsAuthor": true,    "postContentTemplateEnabled": false,    "postTitleTemplateEnabled": false,    "postTitleTemplate": "",    "postContentTemplate": "",    "lastPageButton": null,    "pagination": null,    "firstPageCssClass": null,    "is_active": "1",    "date_created": "2018-04-12 16:51:40",    "is_trash": "0",    "notifications": {        "5acf8e9cf2b40": {            "id": "5acf8e9cf2b40",            "to": "{admin_email}",            "name": "Admin Notification",            "event": "form_submission",            "toType": "email",            "subject": "New submission from {form_title}",            "message": "{all_fields}"        }    },    "confirmations": {        "5acf8e9cf310a": {            "id": "5acf8e9cf310a",            "name": "Default Confirmation",            "isDefault": true,            "type": "message",            "message": "Thanks for contacting us! We will get in touch with you shortly.",            "url": "",            "pageId": "",            "queryString": ""        }    }}

Sending Form Notifications Using SendGrid

Sending Form Notifications Using SendGrid

Pre-RequisitesConfiguring Notifications

In most cases, it』s best practice to use an email-specific service for sending emails from your WordPress site instead of relying on your web server. That』s where the SendGrid Add-On for Gravity Forms comes in. With the SendGrid Add-On, you』ll be able to easily send all of your form notifications directly through SendGrid with just a few clicks.

Pre-Requisites

Make sure you have completed the steps in this article to ensure you have setup the SendGrid Add-On.

Configuring Notifications

Now that you』ve set up your initial settings within the SendGrid Add-On, it』s time to configure your form notifications to send using SendGrid.

Access an existing form notification or create a new notification by going to your form settings and clicking on Notifications.Within your notification, you should see a setting labeled Email Service. Within this setting, select the SendGrid option.Continue setting up your notification like usual. For more information, see our article on configuring notifications in Gravity Forms.Save your settings.

That』s all there is to it! Your form notifications are now configured to use the SendGrid email service!

Sending Form Notifications Using Postmark

Sending Form Notifications Using Postmark

Pre-RequisitesConfiguring Notifications

A common issue that most WordPress users see is a failure to send emails from their site. This is usually caused by their web host blocking the emails or a shared IP on the web server being flagged for spam. By using the Postmark Add-On to send form notifications, that issue can be eliminated, since the notifications will be sent using a dedicated email service, rather than relying on the web server. Here』s how to set it up.

Pre-Requisites

Setup the Postmark Add-On

Configuring Notifications

Now that you』ve set up your initial settings within the Postmark Add-On, it』s time to configure your form notifications to send using Postmark.

Access an existing form notification or create a new notification by going to your form settings and clicking on Notifications.Under Email Service, select the Postmark option.When using Postmark, you』ll only be able to send from specific email addresses that are pre-configured within Postmark. Within the From Email dropdown, select the email address that you want to use as the sender for the notification.Continue setting up your notification. For more information, see our article on configuring notifications in Gravity Forms.Save your settings.

You』re all set! Your form notifications will now use Postmark to send the messages.

In addition to the standard functionality of sending notifications, you can also take advantage of Postmark』s additional features within the Postmark Add-On such as email tracking and statistics within your Postmark account. For more information, take a look at our article on email tracking in Postmark.

Form Heading CSS Selectors

Form Heading CSS Selectors

ContainerTitleDescription

Container
Contains the form title and description

example: the form heading section (div) – applies to all forms
1body .gform_wrapper .gform_heading { border: 1px solid red }

example: the form heading section (div) – applies just to form ID #1
1body #gform_wrapper_1 .gform_heading { border: 1px solid red }

Title

example: the form title (h3) – applies to all forms
1body .gform_wrapper .gform_heading .gform_title { color: red }

example: the form title (h3) – applies just to form ID #1
1body #gform_wrapper_1 .gform_heading .gform_title { color: red }

Description

example: the form description (span) – applies to all forms
1body .gform_wrapper .gform_heading .gform_description { border: 1px solid red }

example: the form description (span) – applies just to form ID #1
1body #gform_wrapper_1 .gform_heading .gform_description { border: 1px solid red }

Form Footer CSS Selectors

Form Footer CSS Selectors

ContainerSubmit ButtonSubmit Button (image)

Container
Contains the submit button and admin edit link

example: the form footer section (div) – applies to all forms
body .gform_wrapper .gform_footer {border: 1px solid red}

example: the form footer section (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_footer {border: 1px solid red}

Submit Button

example: the form submit button (input) – applies to all forms
body .gform_wrapper .gform_footer input[type=submit] {border: 1px solid red}

example: the form submit button (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_footer input[type=submit] {border: 1px solid red}

Submit Button (image)

example: the form submit button (image) – applies to all forms
body .gform_wrapper .gform_footer input[type=image] {border: 1px solid red}

example: the form submit button (image) – applies just to form ID #1
body #gform_wrapper_1 .gform_footer input[type=image] {border: 1px solid red}

Fields Available for Forms

Fields Available for Forms

IntroductionStandard FieldsAdvanced FieldsPost FieldsPricing Fields

Introduction

The Form Editor toolbox groups fields under a few categories: Standard, Advanced and Post. This post is a quick reference to all the standard field types available in Gravity Forms. 

Some fields may require a specific Gravity Forms Add-On to be installed in order to function, and that may require a certain Gravity Forms license type. Those fields are marked with an 「AO」 superscript below.

Deleting a field will also delete all entry data associated with that form field.

Standard Fields

Standard Fields are basic form fields that can be customized for just about any use. These can be used to capture and store a variety of data when an advanced field is not available to meet your needs.

Single Line TextParagraph TextDrop DownNumberCheckboxesRadio ButtonsHiddenHTMLSection BreakPage Break

Advanced Fields

Advanced Fields are more advanced form field types with specific usage in mind. Advanced fields may actually contain multiple fields in one container. These fields make it easy to capture data such as a users Name, Address, etc.

NameDateTimePhoneAddressWebsiteUsername AOPassword AOEmailFile UploadCAPTCHAListMulti SelectConsentChained Selects AOQuiz AOSurvey AO

Post Fields

Post Fields are form fields that enable you to capture data that is then used to create a WordPress Post. These fields make it quick and easy for you to create forms that allow users to submit content to your site. The result posts will be set as a Draft and will need to be published before they are visible.

Post TitlePost BodyPost ExcerptPost TagsPost CategoryPost ImagePost Custom Field

Pricing Fields

Pricing Fields are form fields that enable you to create products focussed forms. Additionally, this is where you will find Add-On specific payment collection fields, such as the Stripe Card field, and the (mostly deprectaed) generic credit card field that is still utilized for the Authorize.net Add-On.

ProductOptionQuantityShippingTotal2Checkout card field AOMollie card field AOSquare card field AOStripe card field AOCredit Card