Gravity Forms Custom Javascript

• November 7, 2019: Fixed fatal error when Gravity Forms was not active.

Some of our Perks rely on JavaScript to handle DOM manipulation in the form. For example, Populate Anything uses JS when populating fields and Live Merge Tags. JavaScript hooks, and the snippets we write for those hooks, are always more complicated to integrate into your site. There’s generally two methods you can use to add custom JavaScript to your form, and both of them have their drawbacks.

1. The easiest method to include custom JavaScript in your forms is to include them in an HTML Field on the form, wrapped in <script> tags. While an easy method, it can cause some issues with AJAX-enabled forms. No bueno.
2. The more complex route is to write a custom function to enqueue it and place it somewhere in your theme’s code. Like any custom code, there are a multitude of different methods, and even a seasoned developer can run into issues making sure the script is loaded in the right context and not loaded on pages where it isn’t necessary.

A Better Way

During a discussion about how we recommend managing code snippets to our customers, we came up with a third option: a plugin to easily add custom JavaScript to Gravity Forms. We already recommend Code Snippets to our users for managing their PHP-based snippets, but there wasn’t an easy way to add custom JS to a form and only load it on that particular form. So we made one. It’s called Gravity Forms Custom Javascript, and it adds a Custom Javascript field to your Form Settings.

Getting Started

	Download, install, and activate the plugin.
	Navigate to your Form Settings to find the new Custom Javascript field.

Once the plugin is installed and activated, you’ll find the Custom Javascript field in your Form Settings. It includes a robust editor that will automatically highlight syntax to make it easy to read.

It even includes code suggestions should you be inclined to write custom JavaScript straight into the editor.

All Snippets Welcome

We didn’t build this solely for Gravity Perks. Gravity Forms has a bunch of available snippets too, and any of the JS ones will work with this plugin. They also maintain a massive library of JavaScript hooks that you can take advantage of. While they aren’t immediately ready for use, most of them have code examples to get you started, and many of those examples are commonly requested features.

Why We Built This

Many of our Perks have additional hooks and filters that you can apply to adjust their behavior outside of the user interface. We typically add these to our products because we have an idea for a new feature, but haven’t worked out the details on how to expose that feature to our customers in a way that is easy to use and clear to understand. Instead of sitting on the feature until we have baked an interface, we publish the hook so it can benefit the customers that need it.

In most cases, simply publishing the hook with some documentation is enough for developers to start using the feature. They’ll write custom code that uses the hook, and their Perks start doing incredible new things. We also often write our own code snippets that use these hooks, and we suggest them to our customers through Support interactions. Our Advanced and Pro Gravity Perks licenses includes Snippet support, and we’re happy to offer a solution that involves dropping in some of our code to extend the capability of a Perk.

Many snippets are blocks of PHP. You copy the code and paste it into your theme’s functions.php file. Depending on the snippet you might need to adjust some parameters like a Form ID or Field ID, and sometimes you need to call a class. If you have trouble with the snippet, we have a guide to walk you through basic troubleshooting.

Questions? Feedback?

Do you have questions about how this works, or is there a feature missing that you would really love to have? We’re always open to feedback and want to know how we can improve this plugin.