Gravity Forms Tag Editor

A simple plugin that makes modifying Gravity Forms tags a breeze. Change any attribute of the form tag with just a few lines of code.

September 14, 2016: Added support for {formId} merge tag for use in property values.

Getting Started

  1. Make sure you have Gravity Forms installed and activated.
  2. Click the “Download Code” button above and save the file to your Desktop.
  3. Drop the file into your WordPress plugins folder via FTP – or – zip the file up and upload it via WordPress plugin uploader.

You’re now ready to configure the plugin.

Plugin Configuration

This is plugin does not provide a user interface. You will need to configure it’s functionality via small code snippets that can be copy-and-pasted into your theme’s functions.php file.

This plugin uses the gform_form_tag filter to convert the form tag string into an array of properties which can then be easily modified, removed, or added.

Here is an example of a basic configuration. This example will modify the “action” parameter to post the form to 3rd party URL instead of the default action URL.

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'     => 'form',
		'form_id' => 123,
		'action'  => 'https://mythirdpartyservice.com',
	) );
}

To apply a configuration to all forms, simply do not specify a form_id parameter.

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'     => 'form',
		'action'  => 'https://mythirdpartyservice.com',
	) );
}

Parameters

There are only two default parameters.

  • tag string (required)

    Specify the Gravity Forms HTML tag that should be modified. Currently only ‘form’ is supported.

  • form_id integer (optional)

    Specify a form ID to which the custom tag attributes should be applied. To apply the properties to all form tags, exclude this parameter.

All other parameters will automatically be added as attributes to the specified tag. See the usage examples below to see how any attribute can be added, removed, or modified.

Usage Examples

Disable HTML5 Autocomplete

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'          => 'form',
		'autocomplete' => 'off',
	) );
}

Add Custom Event Attributes

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'     => 'form',
		'form_id' => 123,
		'oninput' => 'function() { alert ( "Something has been input!" ); }'
	) );
}

Add a Name Attribute

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'  => 'form',
		'name' => 'form_{formId}',
	) );
}

Disable HTML5 Validation

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'        => 'form',
		'novalidate' => 'novalidate'
	) );
}

For more information on disabling HTML5 validation see our article on the subject.

Process Form via a Custom Script (by modifying the action attribute)

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'     => 'form',
		'form_id' => 123,
		'action'  => '/path/to/my-custom-form-handler.php'
	) );
}

Add Custom Data Attributes

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'          => 'form',
		'form_id'      => 123,
		'data-persist' => 'garlic'
	) );
}

Garlic.js is a Javascript library which allows your form data to persist locally to prevent accidental form data loss.

Submit Form via Get Method (by changing the method attribute)

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'     => 'form',
		'form_id' => 123,
		'method'  => 'get'
	) );
}

Modify the Target Attribute

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'     => 'form',
		'form_id' => 123,
		'target'  => '_parent'
	) );
}

This is useful if you’re loading a Gravity Form in an <iframe> based modal but want to redirect on the parent page and not within the modal <iframe>.

Submit Form to a New Tab/Page (by modifying the target attribute)

if ( class_exists ( 'GW_Tag_Editor' ) ) {
	new GW_Tag_Editor( array(
		'tag'     => 'form',
		'form_id' => 123,
		'target'  => '_blank'
	) );
}

Any questions?

We’d love to to hear your feedback on this bare bones plugin. Did it make your life any easier? Do you have any features on your wishlist? Share your thoughts with us in the comments below!

Comments

  1. dreadedhamish
    dreadedhamish October 12, 2023 at 11:08 pm

    Are any merge tags available apart from {formId}? I’m doing some GA4 integrations, and it can capture these parameters: form_id: HTML id attribute of the

    <

    form> DOM element it grabs #id successfully form_name: HTML name attribute of the

    <

    form> DOM element form_destination: URL to which the form is being submitted it concatenates current URL and action (for AJAX at least) form_submit_text: text of the submit button, if present currently it’s not autoatically grabbing this – a problem for another day.

    So it’s just ‘name=’ missing. Can this merge tag be added?

    Reply
    1. Dave
      Dave Staff October 17, 2023 at 4:20 pm

      Hey Hamish, it looks like your message formatting got a little jumbled up and I’m not sure if I’m understanding your question. Could you clarify what you’re trying to achieve here?

  2. Robert Moore
    Robert Moore November 20, 2020 at 12:46 pm

    Hello Support,

    When using target => _blank, is there a way to prevent the submit button from opening a new tab until all the required fields are filled out? Right now, if you click submit without filling anything it still opens a new tab. You can see this on my site. Thanks

    if( class_exists( ‘GW_Tag_Editor’ ) ) { new GW_Tag_Editor( array( ‘tag’ => ‘form’, ‘form_id’ => 3, ‘target’ => ‘_blank’ ) ); }

    Reply
    1. David Smith
      David Smith Staff November 29, 2020 at 8:03 am

      Thanks for the question, Robert. For other folks reading this, we created a ticket for Robert and have been exploring what is possible.

  3. Robert
    Robert November 19, 2020 at 4:59 pm

    Hello, can you list several items on one script such as:

    if( class_exists( ‘GW_Tag_Editor’ ) ) { new GW_Tag_Editor( array( ‘tag’ => ‘form’, ‘form_id’ => 123, ‘target’ => ‘_blank’ ‘oninput’ => ‘function() { alert( “Something has been input!” ); }’ ) ); }

    Reply
    1. Samuel Bassah
      Samuel Bassah Staff November 20, 2020 at 5:30 am

      Hi Robert,

      I’m not sure if I understand you correctly, because the example you have there is a usage example to Add Custom Event Attributes. How are you looking to list several items on one script? That said, note that whatever script is within the anonymous function will run oninput.

      Best,

  4. steve velasco
    steve velasco July 17, 2018 at 6:48 am

    how do you apply the form action when the form has two pages?my problem right now is that the next button has the same “ID” so it automatically send when next button is press

    Reply
  5. Justin Treharne
    Justin Treharne February 26, 2018 at 11:18 am

    Hi There, A question on changing multiple forms with different ID’s, would you add multiple if statements or would you combine them?

    Reply
  6. Todd
    Todd May 30, 2017 at 10:24 am

    Thanks for sharing this tool! Wondering if you can direct me with it… I am trying to have a confirmation redirect URL open in another tab. (Using to pass through to a reservations site). So the gravity form is correctly creating the redirect custom query string, but I’d like that redirect URL to open with “_blank”. Is there a tweak I can do to make that happen? Thank you!!!

    Reply
    1. David Smith
      David Smith Staff May 31, 2017 at 10:25 pm

      Hm, I don’t know of an existing solution for this. The simplest approach would probably be to use a text-based confirmation and write a bit of JS to automatically load the new window with the desired URL when the confirmation loads.

  7. Nick
    Nick December 24, 2016 at 2:00 am

    What if I only want to process particular fields within each form to a special handler, everything else just goes to the original.

    Reply
  8. Vinu
    Vinu December 12, 2016 at 1:13 pm

    Modify the Target Attribute.

    If we are using Multi Step form, after code inserted page redirect on first step itself. We need to target _parent or _blank after form submitted on final or last step of “Multi Step Form”.

    How can we achieve that with this AWESOME code snippet?

    Please help on this.

    Thanks!

    Reply
    1. Vinu Narayanan
      Vinu Narayanan December 19, 2016 at 11:35 pm

      Thank you David for your help.

      I used another way: redirect page reload again on _parent. But your solution is correct.

      Thanks again!

      -Vinu Narayanan

  9. PJ Villarta
    PJ Villarta September 14, 2016 at 2:04 am

    Hi. In using the following snippet:

    if( class_exists( ‘GW_Tag_Editor’ ) ) { new GW_Tag_Editor( array( ‘tag’ => ‘form’, ‘name’ => ‘form_{formId}’, ) ); }

    being enclosed in ‘ ‘, {formId} would just literally form part of the string. for it to be more useful though, ideally {formId} will be replaced with the value of the corresponding form Id. What’s the correct way of dynamically replacing the value of the {formId}?

    Reply
    1. David Smith
      David Smith Staff July 14, 2016 at 7:50 pm

      This snippet doesn’t use garlicjs. Happy to clarify if there is any confusion.

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 Tag Editor

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