Adding JavaScript Code to the Frontend of Your Site

• Introduction
• Filters
• Add Javascript Using wp_footer.
• Using a Third Party Plugin

Introduction

Depending on what JavaScript code you are trying to add, there can be several different places where code snippets can be added to extend your forms. This article covers most of the common options.

Filters

The gform/theme/scripts_loaded event can be used to initialize scripts that depend on Gravity Forms front-end form scripts, including the JavaScript gform object. Refer to this article for more information about usage.

Alternatively, JavaScript or jQuery code will typically look something like this:

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.gfield_checkbox input').forEach(function (checkbox) {
        checkbox.addEventListener('click', function () {
            var isChecked = checkbox.checked;
            var parent = checkbox.closest('li');
            if (isChecked) {
                parent.classList.add('selected');
            } else {
                parent.classList.remove('selected');
            }
        });
    });
});

Some themes will provide an init.js or a custom.js file. If so, pasting the custom JavaScript in either of these files would be ideal.

If neither an events section nor a filters header is present, you can add your JavaScript code using a <script> block; it is generally recommended to add scripts to the footer using the wp_footer or wp_print_footer_scripts action hooks for better performance.

Add Javascript Using wp_footer.

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

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

Using a Third Party Plugin

Third-party plugins allow you to add additional styles to your theme without editing the core theme files. They often allow you to target changes to only specific form pages, and they may keep your changes intact, even if you decide to switch themes or your theme provider issues an update.

The good folks at Gravity Wiz have a free plug-in called Code Chest, which will output your form-specific code (JavaScript and CSS) right where it needs to be.

The Custom CSS & JS Pro plugin by SilkyPress.com is a well-established plugin with good supporting documentation. There are also other plugins that do similar things. Try searching our community plugins library or the WordPress plugin directory.

​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 on our Gravity Forms, Gravity Flow, or Gravity SMTP product roadmap pages.