Introduction

Form input is prone to errors by your users. You should try to avoid the possibility for these errors to occur, by giving users choices instead of text input fields. Gravity Forms helps you out in certain cases by offering a number of predefined lists like continents, countries, states, etc. However, sometimes you’ll need to populate these fields with information that (preferably) isn’t in a static list. In our case we wanted the titles of Custom Post Types in a select box for the use of our suggestions form.

Gravity Forms’ predefined choices

Code

Our solution requires coding. Ideally you should put your code in a plugin (we did, see our GitHub repository), but for the sake of this article we’ll use our theme’s functions.php. Before you continue: backup your site. Better safe than sorry.

Functions.php

We’ll add a new function to our functions.php that we’ll use to populate a select field in our form. Notice the $form parameter that we return immediately.

function popupate_cpt_titles( $form ) {
   return $form;
}

Form ID

Next we need to trigger the function only for the form we’re interested in. For this we need the form ID, which you can find in the ‘ID’ column in your forms overview.

Gravity Forms overview with ID column

We’re interested in the form with ID 7, so we’ll use that for the remainder of this article. To call our function, add the following filters:

add_filter( 'gform_pre_render_7', 'populate_cpt_titles' );
add_filter( 'gform_pre_validation_7', 'populate_cpt_titles' );
add_filter( 'gform_pre_submission_filter_7', 'populate_cpt_titles' );
add_filter( 'gform_admin_pre_render_7', 'populate_cpt_titles' );

Our code now looks like this:

add_filter( 'gform_pre_render_7', 'populate_cpt_titles' );
add_filter( 'gform_pre_validation_7', 'populate_cpt_titles' );
add_filter( 'gform_pre_submission_filter_7', 'populate_cpt_titles' );
add_filter( 'gform_admin_pre_render_7', 'populate_cpt_titles' );
function populate_addon_titles( $form ) {
	return $form;
}

Filter for the correct form field

We only want our function to work on a specific dropdown field. For this we need to add a class attribute to the Gravity Forms form field:

Add a class to the Gravity Forms dropdown field.

Having this class configured, we can filter for the specific select field by that class. In the code below we loop over all form fields and check for a select field with the class ‘populate_cpt_titles’:

foreach ( $form['fields'] as &$field ) {
   if ( $field->type != 'select' || strpos( $field->cssClass, 'populate_cpt_titles' ) === false ) {
      continue;
   }
}

Placeholder

Lets check to see if the code works by setting a placeholder. We’ll do this before we start collecting values and populating the field options:

$field->placeholder = 'Select an Addon';

The full code up until now look as follows:

add_filter( 'gform_pre_render_7', 'populate_addon_titles' );
add_filter( 'gform_pre_validation_7', 'populate_addon_titles' );
add_filter( 'gform_pre_submission_filter_7', 'populate_addon_titles' );
add_filter( 'gform_admin_pre_render_7', 'populate_addon_titles' );
function populate_addon_titles( $form ) {
	foreach ( $form['fields'] as &$field ) {
		if ( $field->type != 'select' || strpos( $field->cssClass, 'populate_addon_titles' ) === false ) {
	    	continue;
		}
		
		$field->placeholder = 'Select an Addon';
	}

	return $form;
}

The field should now look something like below in your frontend:

Select with Caption

Retrieve data and populate field

The next step is to collect the information we need. In our case we’ve got a custom post type ‘add-on’ for which we want to retrieve the title. We’ll first retrieve the data we need:

$args = [
	'posts_per_page'   => -1,
	'order'            => 'ASC',
	'orderby'          => 'post_title',
	'post_type'        => 'add-on', // Change this to your Custom Post Type
	'post_status'      => 'publish',
];
$custom_posts = get_posts( $args );

Next we’ll create an array of options for the select. We’ll loop over our Custom Post Types to populate the option array:

$options = [];
foreach( $custom_posts as $custom_post ) {
	$options[] = ['text' => $custom_post->post_title, 'value' => $custom_post->post_title];
}

The one thing left to do is actually add the retrieved titles to the select field:

$field->choices = $options;

The full code example now looks like this:

add_filter( 'gform_pre_render_7', 'populate_cpt_titles' );
add_filter( 'gform_pre_validation_7', 'populate_cpt_titles' );
add_filter( 'gform_pre_submission_filter_7', 'populate_cpt_titles' );
add_filter( 'gform_admin_pre_render_7', 'populate_cpt_titles' );
function populate_cpt_titles( $form ) {
	foreach ( $form['fields'] as &$field ) {
		if ( $field->type != 'select' || strpos( $field->cssClass, 'populate_cpt_titles' ) === false ) {
	    		continue;
		}

		$field->placeholder = 'Select an Addon';

		$args = [
			'posts_per_page'   => -1,
			'order'            => 'ASC',
			'orderby'          => 'post_title',
			'post_type'        => 'add-on', // Change this to your Custom Post Type
			'post_status'      => 'publish',
		];
		$custom_posts = get_posts( $args );

		$options = [];
		foreach( $custom_posts as $custom_post ) {
			$options[] = ['text' => $custom_post->post_title, 'value' => $custom_post->post_title];
		}

		$field->choices = $options;
	}

	return $form;
}

Now check your frontend! It should be populated with your custom post type titles as shown in the picture below, where it show the list of our Gravity Forms add-ons:

Dropdown field with Custom Post Type titles as select options

It has been a short year for Gravity Extend because we launched in September 2017. So, o ur search engine for Gravity Forms add-ons saw only the last quarter of the year. Nonetheless, we think it’s interesting to share what we saw during these four months.

Our website lets you go about finding the right Gravity Forms add-ons in various ways:

  • Stumble upon an add-on through Google
  • Browse our add-on categories
  • Search for add-ons within our site

Therefore, we’ll list the ten most popular add-on pages, the five most popular add-on categories and the ten most popular searches on Gravity Extend.

Most popular Gravity Forms add-ons

By far, most traffic reaches us through Google. We can’t see what searches lead to our site, but we can see what pages where visited. Most of them being add-on pages. The ten best visited pages are listed below:

1) Import Entries

Import Entries is a commercial add-on by Gravity View, which also produces a couple of other funcional add-ons. With Import Entries, you can create posts and form entries from a CSV. The add-on supports a wide range of field types to which you can map the CSV columns. Also, this add-on lets you create entries and posts, based on conditional settings.

2) Invisible Recaptcha

It makes total sense to have a Captcha on your forms. Invisible Recaptcha is a free add-on available from the WordPress.org plug-in repository. This add-on is not specific for Gravity Forms: it integrates the Google Invisible Recaptcha with Contact Form 7 and WooCommerce, amongst others.

3) Date and Time Picker

Somewhere during the last months of the year 2017 the WP Gurus website has gone offline, leaving a functionality gap yet to be filled. We list a couple of datepickers, but none of them seems to support time. Let us know if you are familiar with a great replacement for this add-on. The datepickers we know about are:

4) Image Choices

Jetslot has produced a visually stunning way to have your users choose images in Gravity Forms. Use various multi-option fields such as checkboxes or radio’s to provide image choices to you website visitors.

5) Address Autocomplete

This address autocompletion add-on yields the strength of the Google Places API to come up with address suggestions in Gravity Forms fields. By adding the functionality of this add-on to your Gravity Forms field, you can have your users autocomplete multiple address fields at once. Great when you’re doing e-commerce through Gravity Forms.

6) WP Mautic Form Integrator

Mautic is a marketing automation platform. The freely available form integrator links up Mautic with Gravity Forms. Just like Invisible ReCaptcha, this add-on is not specific to Gravity Forms. Ninja Forms, Contact Form 7 and Formidable Forms are also supported.

7) Integration for wpDataTables

This add-on integrates Gravity Forms and wpDataTables plugin, and enables you to create reports and other visualisations from your entries. If wpDataTables is not for you, have a look at Gravity View or the jQuery DataTable add-on.

8) Gravity Geolocation

Gravity Geolocation is similar to Address Autocomplete. Instead of using text however, this add-on lets users drop a pin on a map to find the right address to fill out your forms.

9) Schedule entries export

Since we’ve got the Import Entries as #1, this list was bound to feature an export tool: Schedule Entries Export can create scheduled CSV exports to file or mail.

10) GravityPress

This add-on integrates Gravity Forms with MemberPress. Users can subscribe to your MemberPress websites through Gravity Forms, even allowing you to manage subscriptions with the recurring payments functionality present in Gravity Forms.

Most popular add-on categories

As you would expect from the add-on list, amongst the categories we see an heightened interest for importing and exporting data. However, with the exception of the wpDataTables integration, no front-end add-ons are listed in our top ten add-on list. Therefore it is interesting to see both Front-end Entry and Styling present in the category list at places 1 and 2. In the middle of the list is the category security and form validation, which we saw embodied in the add-on list by Invisible ReCaptcha.

1) Front-end entry and Results display
2) Styling and Visual
3) Security and Validation
4) Import
5) Export

Most popular searches

With the searches, the picture of what our users are interested in becomes more and more apparent. Again, we see address and autocompletion. Again and interest for import and export. We see approve, captcha and conditional which can be linked to validation. And finally we see chart, which we saw earlier in the front-end categories. We’re sorry to say that we could not provide any results for avatar, but we hope to see many cool additions in 2018, so who knows..

1) autocomplete
2) import
3) search
4) address
5) approve
6) avatar (no results)
7) captcha
8) chart
9) conditional
10) csv

If you’ve never worked with Payment Gateways before, some of the terminology might sound a bit abstract. In this post we’ll go over how to implement a Gravity Forms form with a payment option, and how to integrate your payment service provider.

When to use?

If you have a lot of products you want to manage and sell online, you might be better off using a full blown webshop like WooCommerce or any of the other online webshop systems. That way you can easily manage stock, shipping, orders etc. However, if you’re selling only a handful of products, it might not be worth going through the trouble of setting up, configuring and maintaining an entire webshop. A small collection of simple forms might suffice. This post is aimed at those for whom a webshop is just overkill.

The Gravity Forms Elite tier comes with a couple of payment integrations (Stripe, Paypal). But when you’re on a budget, there are cheaper alternatives available which we’ll discuss in this post.

Payment Service Provider

Throughout this post, we’ll talk about the Stripe, which is a Payment Service Provider (PSP) or Payment Gateway. But what do they do for you? A PSP is the company that allows your customers to pay you online. Through your PSP you are able to receive your payments in your (bank) account. The PSP receives the payment your customer makes for your products and turns over the money to you afterwards. In return for their services, your PSP will ask for a percentage of the transaction. In short, a PSP allows you to accept electronic (online) payments. There exist many PSP’s, not all of them known in every part of the world.

Gravity Forms Integration

Unless you’re a programmer, a PSP is useless if it doesn’t integrate with your webshop. Luckily there are quite a number of Payment Gateway integrations available for Gravity Forms. For the purpose of this post we’ll use the PSP named Stripe. We’re using Stripe both because it’s pretty well known and because there is a couple of free Gravity Forms add-ons available which makes it easy to test a setup.

Prerequisites

Https encryption is a good idea anyway, certainly if you are handling customer payment details. Certificates nowadays are free or cheap, so that shouldn’t withhold you to get a certificate. Also, Google and the major browsers are getting less and less forgiving towards websites without encryption in place. Just give your host a call to have them activate https for you. This should be a breeze. If it’s not: consider another hosting provider, seriously.

Finally, you’ll need to install one of the Stripe-for-Gravity-Forms add-ons:

Add-ons

Each payment integration add-on will have it’s own way of configuring stuff, as we´ll illustrate by going over the configuration of both add-ons we’ve mentioned. It shouldn’t come as a surprise to you that the PSP dictates which settings are required for the communication between your WordPress website and their service. The add-on of your choice just implements these requirements. So let’s see how this works for the mentioned plug-ins.

Noor’s Plug-in

The configuration process of this plugin is nicely explained on the plugin page, but we’ll go over it here as well.

Gravity Forms Strip Settings

Once you’ve activated ‘Gravity Forms Stripe Integration’ in your WordPress backend, you can navigate to it’s settings page. This page is also reachable through Forms > Settings > Stripe. As you’ll see, it integrates nicely with your Gravity Forms settings page, adding a new tab which should look similar to the image below.

Stripe Settings Tab Noor's Plugin

In the above image we’ve already changed the default API setting from ‘Live’ to ‘Test’. You should do this as well while you’re setting up, as to prevent your customers from potentially paying you for something you won’t deliver. The four fields below the Live/Test radios require you to log into your Stripe account.

In your Stripe account, both the Live and Test public/private key pairs can be found in the left menubar under ‘API’. You’ll need to flip the switch ‘View test data’ to see your Test keys. The Live keys are shown by default (also see screenshot below).

Stripe API keys

Once filled, your Stripe settings under Gravity Forms should look something like the image below.

Stripe Key Settings

Notice the green checkmarks behind the input fields. The add-on won’t give you an error if you fill out an incorrect key, but instead it’ll keep showing you a spinner (loading icon). Also notice publishable keys start with ‘pk_’ and secret keys start with ‘sk_’, followed by either ‘test_’ or ‘live_’. You should keep your secret keys to yourself to prevent abuse of your Stripe account.

The screen above cannot be saved unless you check the `I have enabled the Gravity Forms webhook in my Stripe account´. To find the instructions for actually doing this, click on `View instructions´:

Webhooks - View Instructions

Basically you’ll need to copy the URL (with gray background) to your Stripe account (API > Webhooks) by adding an Endpoint. The Filter event should be ‘Send all event types’.

Stripe Add Endpoint

Which will look similar to the screenshot below, once added:

Stripe - Added Endpoint

Once you have the above set in Stripe, you can check the `Webhooks Enabled?´ option and save your Stripe settings in WordPress/Gravity Forms.

Pricing Fields

You’re now set to use (test) Stripe with your Gravity Forms, but you still need to add the payment options to your forms. The pricing fields are present by default in Gravity Forms.

Create a new form and add Pricing fields such as product, credit card and perhaps shipping.

Pricing Fields

Don’t forget to add fields to your form that collect contact information, required for shipping and invoicing (Advanced Fields). Also don’t forget to set your payment fields to be required 🙂 Adjust the fields to your needs and save your form. The final form might look something like below:

Gravity Form with Payment Option

The final step is to add a Stripe feed to your form. In the Settings tab of your form, you’ll find some additional Stripe settings:

Stripe Feed

You need to configure a feed for your entries / orders to be recorded to Stripe.

Stripe Feed Settings

You’re now ready to test your form. Don’t use an actual credit card while you’re in test mode, as they’ll be rejected. Instead, use the Stripe test card numbers. Once you’ve submitted a test payment, you’ll see the corresponding data appear in your Stripe dashboard:

And you’re done! Switch from testing to live under Forms > Settings > Stripe to start receiving actual payments.

Gravity Forms + Stripe

This add-on works very similar to Noor’s plug-in, with the key settings to be found under Forms > Settings > Stripe:

Gravity Forms + Stripe Settings

As metioned, the pricing fields where already available by default in Gravity Forms.

The difference with Noor’s Plugin is that you don’t need to configure a webhook / endpoint in Stripe. Additionally, the form Feed settings for Stripe are replaced with Rules:

Gravity Forms + Stripe Form Rule

Even if you don’t need to map any of your input fields, you’ll need to add a rule for transactions to be recorded by Stripe. Don’t omit adding this.

Conclusion

Although you´ll need to do some configuration, adding payments to Gravity Forms isn´t hard. Just add the required add-on for your payment provider to WordPress and go through the documented configuration option. Do test your setup carefully. The described plugins for Stripe integration in Gravity Forms have some settings (Feeds and Rules respectively) that are important, but easily missed. The same is true for the default Gravity Forms pricing fields: you’ll almost always need them to be required.

Gravity Extend was launched September 1st 2017 out of personal need. Gravity Forms is a great formbuilder and a great addition to WordPress. That’s why there are numerous third party add-ons (or plugins) for Gravity Forms. However, these add-ons are scattered all over the internet which makes it hard to get an overview of the relevant add-ons for your situation.

Search Gravity Forms add-ons

Finding the right add-on can be a daunting task. There are many Gravity Forms add-ons on WordPress.org and GitHub, there are some on Envato and quite a number of add-ons can be found exclusively on commercial websites. If you can’t shed the feeling that somewhere on the internet this great solution for your problem exists…and that you’ve missed it in your search, you are not alone.

Add-on overviews

Although there are lists of third party Gravity Forms add-ons on the web, they are either uncategorized or lack a description of what they do. Not to mention that many entries on these lists are outdated and no longer maintained. These lists are of some help, but they’re far from perfect. Neither is this website perfect, but it aims to become the starting point in finding the right add-on for your Gravity Forms. Saving you time and effort and providing in your needs.

Gravity Extend

To our knowlegde, our database contains most of the Gravity Forms add-ons available on the web. We’re working to grow the database further in adding the few remaining add-ons known to us and keeping the database up-to-date. We estimate over 200 add-ons will be available through our search eventually. The work doesn’t stop there though, and you can help!

Submit an add-on

You can help making the Gravity Extend search tool better by submitting add-ons that are not yet in our database. If that’s the case, that add-on is probably not yet know to us. It’s a small task to submit an add-on. Add-on maintainers get full credit of their work on Gravity Extend, which is why we ask you to provide links to both the add-on and the author of the add-on.

Add-on rating

During the filling of the database a sifting was done by omitting add-ons that haven’t been maintained for over 4 years, or add-ons that require an unmaintained platform to function. This has been a mild selection, so there are probably still add-ons in the database that are next to useless. You can help improving the Gravity Forms ecosystem by rating (and reviewing) plug-ins that are familliar to you. Let other users know what you think!

Suggest an improvement

Lastly, it’s possible to improve add-on descriptions. Most of the current descriptions where pulled from the internet the way they were found. Some add-ons deserve a more detailed text. Others don’t describe the add-on at all and require a rewrite. That’s a lot of work, and you can help by suggesting improvements.

We hope to provide you with an awesome tool that makes your day-to-day work a little easier!