Steve Grunwell

Open-source contributor, speaker, and electronics tinkerer

Custom field IDs for Gravity Forms

If you haven’t had the chance to work with it before, Gravity Forms is pretty fantastic. I was first turned onto it a few years ago while I was at Buckeye Interactive, where it was a mainstay across most of our client sites. Besides presenting an easy-to-manage interface for building forms, the plugin also makes good use of the WordPress Plugin API (thus making my life way easier) and has a vibrant ecosystem of official and unofficial add-ons.

One area where Gravity Forms could stand to improve, however, is making it easier to identify fields. Let’s say, for example, we have a form where we’re collecting a name and an email address; outside of assuming that the regular text field is the name and the input[type="email"] is the email address, Gravity Forms doesn’t really have a straight-forward way to identify fields when you’re doing extra work with submissions (like sending them to a newsletter or a CRM system).

In my new role as Director of Technology at Growella, one of the first things I needed to figure out was how we could reliably map Gravity Forms submissions into third-party tools.

Assigning custom IDs to fields

Fortunately, Gravity Forms lets us add custom properties to our fields; knowing this, we can easily add a “Field ID” input, which lets us reference a field by this ID:

This function will generate the Field ID input markup on the gform_field_advanced_settings action, calling Gravity Forms’ setFieldProperty() function whenever the input changes.

Next, we need to tell Gravity Forms that fieldID is a valid property:

This will also pre-populate the input’s value with a field ID, if one has previously been saved.

A Gravity Forms field with a custom "Field ID" input

That’s it! With these two functions, we’re able to assign custom field IDs, removing a lot of the headache of mapping to third-party services.

Mapping Gravity Forms fields to third-party services

Having the custom field IDs is great, but the icing on the cake is being able to easily get any fields with custom IDs to send to your third-party services. Thanks to your friends at Growella, now you can:

In almost any Gravity Forms callback (for example, gform_after_submission), we receive two arrays: $entry and $form. By passing these directly to growella_get_mapped_fields(), we can quickly retrieve non-empty values for fields we’ve assigned IDs to. For example:

Now, go forth and integrate Gravity Forms with :allthethings:!

Previous

Today is my last day at 10up

Next

Using symlinks for WordPress MU plugins

29 Comments

  1. Andy

    Great post, thanks for sharing your code; I was having the very same problems pulling out and sharing data collected from forms and this code looks like a great starting point!

    Many thanks!

    • studio4

      Just in case anyone else is interested in this if you want to add the fieldID to the front-end form as a class you can use the gform_field_css_class hook:

      /**
      * Show mapped field ID in front-end forms for CSS and JS manipulation
      * @param [type] $classes existing classes string
      * @param [type] $field field object
      * @param [type] $form form object
      * @return [type] new classes string
      */
      function growella_gform_custom_class( $classes, $field, $form ) {

      if ( $field->fieldID ) {
      $classes .= ‘ ‘.$field->fieldID;
      }
      return $classes;
      }
      add_filter( ‘gform_field_css_class’, ‘growella_gform_custom_class’, 10, 3 );

  2. Perfect – just what I needed! Cheers :)

  3. are we placing this in the theme functions.php file or a specific php file in the gravity forms plugin folder?

    • This would be in your theme’s functions.php file — you should never have to modify the code within wp-content/plugins/gravity-forms, as that would be wiped out with the next update.

      • Thanks Steve. I had some cache issues on my end and wasn’t seeing the update. i’m all set though now.

  4. lukecav

    Awesome share, thanks for this.

  5. I just wanted to say thank you. This solved my problem.

  6. Carlos Gouveia

    Hi

    I need to export with this field id and not the field name. How can I do that? Cheers

  7. Thanks for this:) Implemented the first two script. However, the newly created field to change the ‘fieldid’ of a field adds a class to the field instead of changing the fieldid. Anybody some thoughts on this?

  8. joelambert100

    I’m having some trouble getting this working now too, not sure if Gravity forms has updated something which breaks this, but it no longer appears to output the custom ID to the front end anymore.

  9. adrian

    Seeing the same thing here – not seeing the new custom field ID on the front end.

  10. sher

    I’m getting an error for line 11

  11. djbourque

    I have added everything to the function.php and see the field id field in gravity forms however it does not change the actual ID in the form.

    Any thoughts

  12. I used this but I’m not seeing the results in the frontend. Maybe gravityforms changed the code?

  13. Do you have a step by step tutorial on implementing this? Much appreciated.

  14. Judy Wong

    Thanks! saved my life :)

  15. The code causing a 500 error when added to the end of functions.php. Any idea? https://paste.pics/5EIKU

    • It may be a matter of copying + pasting from the blog post — WordPress often tries to convert single- and double-quotes into curly, “pretty” quotes. If not replaced, those can sometimes lead to issues.

      Any error message in the logs?

  16. Greetings! I’ve implemented the first two code boxes, and Gravity Forms is still imposing its ID’s on my form elements. I can see and assign an id in the Gravity Forms Builder, but when the form is rendered on the page, the enumerated ids are implemented. Any ideas what may be causing this?

  17. Thanks, I figured out it was the “[/php]” causing the error. I removed that and the Field ID input shows on the backend but it doesn’t update the ID of the field in the frontend. Any ideas?

    I have all the rest of the code in place without errors. The field ID just isn’t changing…

  18. I think it’s safe to say this no longer works with Gravity Forms from 2018 onward. This tutorial would be fantastic and save my bacon to add IDs but alas it no longer works. I know Steve posted his method for free so I’m not complaining but we would all be incredibly grateful if he knows how to get this working again.

    Thank you again for posting this Steve. No pressure to update it to work again…but we won’t mind if you do. ;-)

    • Dragos Stancu

      Umm, it works …

      • Jay

        Hi Dragos,

        Did you have to add a line , such as a ‘wp_remote_Post()’ in the
        function ‘do_some_cool_integration’ ?

        Regards,

        Jay

  19. Vikram Rout

    I have added the line of code in my website theme function.php files. its work in the gravity form backend But I cannot see anything in the front end of the form. How I can see the field ID in front side of the website.

    https://www.screencast.com/t/VAI5ch25FMCn

  20. Dragos Stancu

    Saved my life! Brilliant!

  21. Chet

    This no longer seems to work which is a shame. I do see the ‘set the id’ on the backend in GF Admin — but the custom field IDs are not outputted with the form.

  22. Jay

    Hello,
    We got most of this implemented, except it seems to have dis-armed the webhook setting and the form is no longer posting to the target integration URL. Is there a line of code needed at the end, to envoke the post?

    // Post $mapped_fields to your third-party service.

    Something needed here????

    Please forgive the simplicity of this question, I’m the developer of the target integration and unfamiliar with WP..

    Regards,

    Jay

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Be excellent to each other.