Gravity Forms Code Chest

Gravity Forms Code Chest is a free plugin that aims to simplify and organize how you apply custom code to your Gravity Forms.

Attach custom JavaScript and custom CSS to individual forms and Code Chest will handle outputting that code wherever your form is displayed and ensures that it is executed at the right time.

Additionally, Code Chest ensures that your code goes with your form whenever it is exported, imported, or duplicated. It’s your own portable chest of code!

A life without Code Chest?

Without Code Chest, you’re in murky waters. How did people even include custom code before?

Most folks resorted to adding an extra HTML field to their form and including their custom JS and CSS there. This works (mostly) but adding non-user-facing fields to your form can clunk things up fast, making your forms a lot harder to manage. HTML fields also leave a lot to be desired, even as a basic code editor.

With Code Chest, you’ll have a lovely UI for managing your custom JS and CSS without junking up your form. It also provides options for ensuring your form-specific code only applies to the current form, while preserving your ability to use that code on other forms.

  1. A life without Code Chest?
  2. Install the Plugin
  3. Using the Plugin
    1. Custom JavaScript
      1. JavaScript Tips
    2. Custom CSS
      1. CSS Tips
    3. The Code Editor
  4. Known Limitations
  5. FAQs
    1. Can I use this with the Custom JavaScript plugin?
    2. I need some inspiration… what kind of snippets can I use with Code Chest?
    3. How do I only execute a script on a specific page?
    4. I want to contribute to this plugin!

Install the Plugin

Using the Plugin

Currently, Code Chest supports two different types of code: JavaScript and CSS.

Custom JavaScript

To add custom JavaScript, got to the Settings menu for your desired form and select the “Code Chest” item.

Now just copy-and-paste your desired snippet into the JavaScript setting or start writing something from scratch, you little code pirate!

Tip: The code in the above screenshot is from our Show ZIP as Results for GP Address Autocomplete snippet.

JavaScript Tips

  • Use the GFFORMID variable to target the current form.
  • All code in the JavaScript setting is executed on the gform_post_render event.
  • The gform_post_render event provides the formId and currentPage variables which can be used in Code-Chest-powered snippets.
  • Code Chest executes your JavaScript before any other code bound to the gform_post_render event, including Gravity Forms own JS. In some cases you may want your JavaScript to execute after all other code bound to this event. To do so, wrap your code in a function bound to the gfcc_deferred action.

Custom CSS

To add custom CSS, got to the Settings menu for your desired form and select the “Code Chest” item. Scroll down to the CSS setting and start typing/pasting.

Tip: The CSS snippet in the above screenshot is from our Numbering Gravity Forms List Field Rows snippet!

CSS Tips

  • All styles are scoped to the current form by default.
    • Code Chest’s auto-scoping works by appending the #gform_wrapper_GFFORMID to each style declaration in the CSS setting.
    • Code Chest will not scope style declarations beginning with the following keywords: @media, @font-face, @keyframes, @page and @supports.
  • Toggle the Scope CSS to this form only setting off to disable Code Chest’s auto-scoping.
  • You can scope your CSS style declarations on your own by using the GFFORMID variable in your selectors (e.g. .gform_wrapper_GFFORMID, #field_GFFORMID_4).

The Code Editor

Code Chest’s code editor is no replacement for an IDE but it sure makes adding and editing snippets a heck of a lot nicer than a plain Jane textarea.

Our editor comes with syntax highlighting, auto-formatting, and code hinting. Nothing to sneeze at, aye?

Known Limitations

  • PHP snippets are not yet supported.
    Let us know in the comments if this is something you want!

FAQs

Can I use this with the Custom JavaScript plugin?

No, this plugin is a replacement for our now deprecated Gravity Forms Custom JavaScript (GFJS) plugin. When Code Chest is activated, it will automatically assume the responsibility of outputting any code configured via GFJS and prevent GFJS from outputting those scripts itself.

We recommend disabling GFJS as soon as you’ve tested your forms to ensure your previously configured snippets are working as expected.

I need some inspiration… what kind of snippets can I use with Code Chest?

If you need a spark, check out our Snippet Library. We have hundreds of JavaScript snippets and a growing collection of CSS snippets too!

How do I only execute a script on a specific page?

Since Code Chest exposes the currentPage variable passed by Gravity Forms, you can easily use this to check for a specific page and only execute your script on that page. Here’s a quick example:

if ( currentPage == 2 ) {
	alert( "The second page is where it's at!" );
}

I want to contribute to this plugin!

If you’re looking to contribute to the codebase, PRs are welcome! Come work with us on Github. If you want to contribute financially, pick up a Gravity Perks license. It’s a win-win. πŸ˜„

Comments

  1. Nate Auran
    Nate Auran February 24, 2024 at 9:33 am

    Does the CSS scoping to a form work with the Beaver Builder Gravity Forms Styler module?

    I can’t seem to get it to work.

    I am using the recommended GF orbital theme. The form is rendered on the front end via BB GF module.

    I set these 2 CSS declarations, but they don’t apply to the form: https://share.zight.com/eDueXGrG https://share.zight.com/9Zu4oby2

    Only when I disable the Scope CSS to this form only, will the form get the styles applied: https://share.zight.com/RBukm8JP

    Reply
    1. David Smith
      David Smith Staff February 24, 2024 at 10:43 am

      Hey Nate, if you have the “Scope CSS to current form only” option enabled, Code Chest will automatically added the #gform_wrapper_GFFORMID scope to your selectors. If you add them manually and leave the option enabled, they will added twice creating an invalid selector.

  2. Bruce Milligan
    Bruce Milligan February 23, 2024 at 12:04 pm

    I really like the idea of this plugin. It would be even more useful if the Code Chest could apply the same code across all forms, or a subset of forms — rather than having to attach custom code to each form individually. Perhaps the Code Chest could allow me to create “form groups” where I could check which forms belong to a group, and then apply the same code to all forms in that group.

    Reply
    1. David Smith
      David Smith Staff February 24, 2024 at 7:49 am

      Gnarly idea, Bruce. The ability to create multiple chests for code and controlling to which forms each chest applies. I like it!

    1. David Smith
      David Smith Staff February 24, 2024 at 7:46 am

      Heck yeah, Nate. No definite ETA but PHP support is definitely on our radar. Any other PHP-focused functionality you’d like to see?

  3. Cherry Cappel
    Cherry Cappel February 21, 2024 at 11:22 pm

    PHP support, please! I have to include the form ID in the title of my PHP code snippets now so that I’ll remember to switch out the ID on each if I go to a different form. This would be so. much. better.

    Reply
  4. DynNode
    DynNode February 21, 2024 at 7:14 pm

    Hi,

    Yes, please definitely need PHP support, so that I don’t have to select the ‘Run everywhere’ option in WPCode or FluentSnippets.

    Moreover, I would rather have you guys add support for executing scripts based on shortcodes… So that: 1) we have a central storage of snippets 2) code isn’t stored in DB (FluentSnippets) 3) Selectively run PHP snippets on some forms only 4) Extend usage of existing plugins.

    Example of shortcodes for PHP: https://fluentforms.com/fluentsnippets-code-snippet-wordpress-plugin/#:~:text=Custom%20Shortcodes%20for%20Dynamic%20Content&text=Fluent%20Snippets%20introduces%20custom%20shortcodes,your%20content%20come%20to%20life!

    Thanks,

    Reply
    1. David Smith
      David Smith Staff February 24, 2024 at 7:44 am

      Appreciate the feedback! Noted on PHP support and including the PHP snippets as files rather than storing in the database. πŸ‘

      I’m not sure I understand the benefit of the shortcode approach in the context of Code Chest which aims to always execute in a form-specific context? Worth noting, we don’t see Code Chest as a replacement for a global WordPress snippet manager. It’s very much intended to work tightly with Gravity Forms.

    1. David Smith
      David Smith Staff February 24, 2024 at 7:41 am

      It includes all of GF Custom JavaScript’s functionality and moves it to a new page so we can better extend on this functionality in the future. πŸ™Œ

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Download Plugin

Gravity Forms Code Chest

This field is for validation purposes and should be left unchanged.