How to Create and Use the User-Agent Smart Tag

Introduction

Would you like to create a user-agent Smart Tag to know where you’re visitors are coming from? This data can make future decisions for your website super easy. In this tutorial, we’re going to create a Smart Tag that will automatically fill in a Hidden Field on your form to capture where you’re submissions are coming from.

A User-Agent is information that you can retrieve from the browser to see what browser, operating system, device used (desktop/mobile) etc.

Creating the User-Agent Smart Tag

First, we’re going to add the code snippet that will create a new Smart Tag inside WPForms that we can use in the builder.

If you need any help adding code snippets to your site, please see this tutorial.

/** * Register the User-Agent Smart Tag so it will be available to select in the form builder.
 *
 * @link   https://wpforms.com/developers/how-to-create-and-use-the-user-agent-smart-tag/
 */

//Create the Smart Tag to be used
function wpf_dev_register_smarttag( $tags ) {

    $tags['user_agent'] = 'User Agent';
  
    return $tags;
}
add_filter( 'wpforms_smart_tags', 'wpf_dev_register_smarttag' );

//Define what the Smart Tag is
function wpf_dev_custom_smarttags( $content, $tag ) {

	$user_agent = ! empty( $_SERVER['HTTP_USER_AGENT'] ) ? substr( $_SERVER['HTTP_USER_AGENT'], 0, 256 ) : '';

   if ( $tag === 'user_agent' ) {
      $content = str_replace( '{' . $tag . '}', $user_agent, $content );
   }
   return $content;
};
add_filter( 'wpforms_smart_tag_process', 'wpf_dev_custom_smarttags', 10, 2 );

In the snippet, you’ll notice there are two different functions. Each has been commented so that you can understand what they are. The first function will create the Smart Tag, this is only the creation, however, it’s only in the second function that we define what the Smart Tag is which in this case is to pull in the HTTP_USER_AGENT.

Using the User-Agent Smart Tag

Now we’re going to create a new form so that we can use the Smart Tag. If you need any help in creating a form, please review this documentation.

Our form is just going to have a few fields on it for the Name, Email Address and then we’ll add a Hidden Field that will hold the information we capture with the user-agent Smart Tag.

Once you’ve added your Hidden Field, click the Show Smart Tags link to open up a list of Smart Tags you can add inside the Default Value field.

By default, any custom-made Smart Tags created will appear at the bottom of the list, scroll to find the User Agent Smart Tag and select it to insert it on the Default Value.

Add the user-agent Smart Tag to the Default Value of the hidden field

Viewing the User-Agent

When you view your entries, you’ll see inside the Hidden Field all the user information that was captured.

You can now view the user-agent data captured inside the hidden field when you view the entry.

And that’s all you need! Would you like to create more custom Smart Tags? Take a look at our article on How to Create a Custom Smart Tag.

Filter References: