Gravity Forms Code Chest (2024)

Gravity Forms Code Chest (1)David Smith

/Updated March 13, 2024 /26 Comments

Implement and organize form-specific styles and scripts for simple, portable customizations.

Gravity Forms Code Chest (2)

March 13, 2024: Fixed issue where PHP error would occur if a form without custom code was duplicated.

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. 😄

Did this resource help you do something awesome with Gravity Forms?

Then you'll absolutely love Gravity Perks; a suite of 47+ essential add-ons for Gravity Forms with support you can count on.

View All PerksBuy Now

    1. Gravity Forms Code Chest (8)

      Samuel BassahStaffMarch 17, 2024 at 10:57 pm

      Hi Rob,

      Thanks for the feedback. Your wish has been noted.

      Best,

  2. Gravity Forms Code Chest (9)

    Jonathan TidwellMarch 13, 2024 at 9:05 am

    Awesome! PHP support would be great. Currently, we’re using 12 PHP code snippets to suppport our forms. Thank you!

    Reply

    1. Gravity Forms Code Chest (10)

      Samuel BassahStaffMarch 13, 2024 at 1:36 pm

      Thank you for the feedback. I’ll pass this over to our product manager.

  3. Gravity Forms Code Chest (11)

    SterlingMarch 7, 2024 at 8:27 pm

    Php please!!!

    Reply

    1. Gravity Forms Code Chest (12)

      Scott RyerStaffMarch 8, 2024 at 2:18 pm

      Thanks for the feedback, Sterling.

  4. Gravity Forms Code Chest (13)

    Stijn De MulderFebruary 28, 2024 at 4:58 pm

    Can I use wp_localize_script somehow to add some extra variables?

    Reply

    1. Gravity Forms Code Chest (14)

      David SmithStaffFebruary 29, 2024 at 10:08 am

      That’s an interesting question. I’ll reach out via email to discuss further. 👍

  5. Gravity Forms Code Chest (15)

    MorganFebruary 24, 2024 at 8:07 pm

    PHP snippets would be a great addition.

    Reply

    1. Gravity Forms Code Chest (16)

      David SmithStaffFebruary 25, 2024 at 5:59 am

      Appreciate the feedback, Morgan. 🙌

  6. Gravity Forms Code Chest (17)

    Nate AuranFebruary 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/eDueXGrGhttps://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. Gravity Forms Code Chest (18)

      David SmithStaffFebruary 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.

  7. Gravity Forms Code Chest (19)

    BarryFebruary 23, 2024 at 4:53 pm

    I would love PHP option, but only if there is a way to save it to a local file.

    Reply

    1. Gravity Forms Code Chest (20)

      David SmithStaffFebruary 24, 2024 at 7:51 am

      Noted on the local file storage. Thanks for your vote for PHP support, Barry. 🤘

  8. Gravity Forms Code Chest (21)

    Bruce MilliganFebruary 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. Gravity Forms Code Chest (22)

      David SmithStaffFebruary 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!

    2. Gravity Forms Code Chest (23)

      Andreas Schnurrer - seowerkMarch 14, 2024 at 3:08 pm

      I’d like that, too, would save a lot of work for me.

    3. Gravity Forms Code Chest (24)

      Samuel BassahStaffMarch 15, 2024 at 6:16 am

      Hi Andreas,

      Thanks for the feedback. I’ll forward your request to our Product manager.

      Best,

  9. Gravity Forms Code Chest (25)

    Nate AuranFebruary 22, 2024 at 4:41 pm

    It would be GREAT if you can enable PHP code snippet support through this as well for form specific code to run.

    Reply

    1. Gravity Forms Code Chest (26)

      David SmithStaffFebruary 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?

  10. Gravity Forms Code Chest (27)

    Cherry CappelFebruary 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

    1. Gravity Forms Code Chest (28)

      David SmithStaffFebruary 24, 2024 at 7:45 am

      Love it, Cherry. Thank you for the feedback!

  11. Gravity Forms Code Chest (29)

    DynNodeFebruary 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 snippets2) code isn’t stored in DB (FluentSnippets)3) Selectively run PHP snippets on some forms only4) 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. Gravity Forms Code Chest (30)

      David SmithStaffFebruary 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.

  12. Gravity Forms Code Chest (31)

    DynNodeFebruary 21, 2024 at 7:09 pm

    Why was this replaced for the Gravity Forms Custom JavaScript (GFJS) plugin?

    Reply

    1. Gravity Forms Code Chest (32)

      David SmithStaffFebruary 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

Gravity Forms Code Chest (2024)
Top Articles
Salted Chocolate Chunk Shortbread Cookies Recipe
All New Art Supplies | New Artist Products | Jerry's Artarama
Let's Spill The Tea: Top Consumer Tech News From Last Week That You Should Know (April 21-27, 2024) By Benzinga
I analyzed 10,000 Craigslist missed connections. Here’s what I learned. | I analyzed 10,000 Craigslist missed connections. Here’s what I learned.
Latest Posts
Chocolate-Cherry Heart Smart Cookies Recipe
Pumpkin cheesecake bars recipe
Article information

Author: Arielle Torp

Last Updated:

Views: 5940

Rating: 4 / 5 (61 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Arielle Torp

Birthday: 1997-09-20

Address: 87313 Erdman Vista, North Dustinborough, WA 37563

Phone: +97216742823598

Job: Central Technology Officer

Hobby: Taekwondo, Macrame, Foreign language learning, Kite flying, Cooking, Skiing, Computer programming

Introduction: My name is Arielle Torp, I am a comfortable, kind, zealous, lovely, jolly, colorful, adventurous person who loves writing and wants to share my knowledge and understanding with you.