Introduction

There are several different methods which can be used to add javascript intended for interacting with your frontend forms. This article covers most of the common options.

Regardless of which method you use to add your javascript, you will most commonly add your scripts within a function hooked to the DOMContentLoaded event.

Note: Replacing or updating your theme can overwrite the theme directory in your site folder, which means modifications you may have made to the files there will be lost. Always keep regular backups and consider using a child theme.

Method 1: Using wp_print_footer_scripts

If you are using some third party plugin as an alternative for adding PHP code, then you might prefer the straightforward approach of including scripts via the WordPress action wp_print_footer_scripts. Some themes provide an init.js or custom.js file where you can include your snippet.

add_action( 'wp_print_footer_scripts', function() { ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            // custom code
        });
    </script>
<? } );

Method 2: Using an HTML Field

In some instances, you will want to run javascript for a single form. You can include that block of javascript directly in an HTML field on the form. One benefit of this method is that the code will accompany the form when exporting the form.

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // custom code
    });
</script>

Method 3: Using a Third-Party Plugin

Third-party plugins and theme tools are also available to run additional JavaScript alongside your form. The good folks at Gravity Wiz have a free plug-in called Code Chest that outputs your form-specific code (JavaScript and CSS) right where it needs to be. Many of these tools will not require the inclusion of the script block.

document.addEventListener('DOMContentLoaded', function () {
    // custom code
});

Method 4: Using the GFAddOn Framework

Reference: Including Scripts and Styles When Using the Add-On Framework. See specifically enqueue condition according to field_types property.

Special Considerations

Dependencies

When loading custom scripts on your site, it is important to ensure that any other scripts on which your code depends are loaded before your code. Method 4 above provides parameters for passing an array of dependencies. This array should include handles for scripts that must be loaded before your script is loaded.

Use the gform/theme/scripts_loaded event to initialize scripts that depend on Gravity Forms front-end form scripts. Hooking scripts to this event ensures that other Gravity Forms related scripts are available and that your scripts have access to the JavaScript gform object.

Conditional Loading

It is best practice to include your script only on pages where it is needed. It is recommended that you check the page being loaded prior to serving your script.

Disclaimer: Third-party services, plugins, or code snippets that are referenced by our Support documentation or in Support Team communications are provided as suggestions only. We do not evaluate, test or officially support third-party solutions. You are wholly responsible for determining if any suggestion given is sufficient to meet the functional, security, legal, ongoing cost and support needs of your project.

Feedback, feature, and integration requests, and other functionality ideas can be submitted at http://forms.roadmap.gravity.com/.

Adding JavaScript Code to the Frontend of Your Site