How to add custom HTML attributes to your Gravity Forms

How to add custom HTML attributes to your Gravity Forms

Don’t want to read my life’s story and go straight to the tutorial? Click here.

Thanks to its ease of use and robust features, Gravity Forms is one of the most popular form builder plugins for WordPress. We use Gravity Forms for quite a few of our clients, and our own website as well, and we have been consistently happy with the results.

Sometimes, however, you may want greater control over your Gravity Forms’ HTML output. In our case, we’ve been conducting experiments hosting our website on Netlify, a static web app hosting service. Because Netlify sites are static (i.e., not running on a server), our existing Gravity Forms need some configuration to be able to work with Netlify’s built-in form handling, instead of Gravity Form’s default PHP processing through WordPress.

According to Netlify’s documentation, our <form>s need to have the attribute data-netlify="true" in order for Netlify’s built-in robots to recognize and process the forms, and a name attribute in order for Netlify to identify the form in their backend.

Without further ado, here is the code we added to our WordPress site’s functions.php to get this to work.

//Add Netflify tag to GForms
add_filter( 'gform_form_tag', 'form_tag_netlify', 10, 2 );
function form_tag_netlify( $form_tag, $form ) {
    $form_name = $form['title'];
    $form_tag = str_replace( "<form ", "<form name='{$form_name}' data-netlify='true' ", $form_tag );
    return $form_tag;
}

One of my biggest pet peeves with some WordPress tutorials online is that they don’t explain why the code examples work, so let’s go ahead and break this down.

• First, we are calling the gform_form_tag filter. This is a filter that comes built-in with Gravity Forms, and allows you to alter what each form outputs.
• form_tag_netlify is the name of the function we defined ourselves. In your case, you would change this to a name that more closely matches what you are trying to accomplish with your function.
• Next, we have our filter’s priority set to 10, i.e., the relative priority our function has against other functions using the gform_form_tag filter. In most cases, we can leave this at the default 10, but if you run into issues, you could try increasing the priority to a higher number.
• 2 is saying how many parameters to expect from our function. The reason this is set to “2” is because our form_tag_netlify function takes two parameters, $form and $form_tag. If the numbers don’t match up, we’ll get an error.

Now to the function itself:

1. function form_tag_netlify( $form_tag, $form ) is where we define the name of our function. Notice that the function name here is the same that we are passing through the filter we set previously. $form_tag and $form are each Gravity Form’s <form> HTML output and form object (with all of its associated data), respectively. These two variables are what we use to grab and manipulate our form’s attributes.
2. Netlify forms need a name attribute on the form in the front-end, so let’s go ahead and define a name for our form with this line of code:

$form_name = $form["title"];

This is grabbing the Gravity Form’s “title” attribute (which is the name you set for your form when creating it in the WordPress backend) from the $form object. In our case, this title is “Get Started”. We will use this when rebuilding our <form> element later.

1. Next is to update the <form> output itself. This is where $form_tag comes in. We will take advantage of PHP’s str_replace() function to add more attributes to our form:

$form_tag = str_replace( "<form ", "<form name='{$form_name}' data-netlify='true' ", $form_tag );
    return $form_tag;

The first parameter is the string we’re looking to replace–in this case, <"form " (make sure to leave a trailing space so you don’t accidentally remove any other form attributes!).
The next parameter is what we are replacing our string with. Notice we are including the $form_name variable we defined earlier for our name attribute, and then adding data-netlify='true' (again, make sure you keep that trailing space).
The third parameter is telling str_replace() where to look. Since we only want our function to affect a Gravity Form’s HTML, we are only targeting the $form_tag.

1. Finally, we return the updated value with:

return $form_tag;

Altogether, here is what the code you add to your functions.php file might look like:

//Add Netflify tag to GForms
add_filter( 'gform_form_tag', 'form_tag_netlify', 10, 2 );
function form_tag_netlify( $form_tag, $form ) {
    $form_name = $form['title'];
    $form_tag = str_replace( "<form ", "<form name='{$form_name}' data-netlify='true' ", $form_tag );
    return $form_tag;
}

Armed with this knowledge, you can adjust your Gravity Forms’ <form> tag output to become whatever you want.

Happy coding!

Questions, comments, found a way to make the code more efficient? Let us know in the comments below!