Get Parameters in Kadence Form

How to Get Parameters in Kadence Form (Hidden Field)

One of my clients recently needed a way to capture URL parameters, like UTM codes or custom values, in a hidden field using the Kadence Form block. They were transitioning from a tool like Fluent Forms, which has built-in parameter capturing, and wanted to replicate this functionality in Kadence.

While Kadence Forms don’t natively pull URL parameters into hidden fields out of the box, there are practical solutions to make this work. Below, I’ll walk you through two effective methods to solve this problem: one using a custom script and another leveraging Kadence’s “Populate With Parameter” feature.

Option 1: Using a Custom Script to Capture URL Parameters

If you need to grab dynamic values from the URL (like UTM parameters) and populate them into a hidden field, a small JavaScript snippet can do the trick. This approach is flexible and works even if Kadence’s built-in features don’t fully meet your needs.

Steps:
  1. Set Up Your Kadence Form
    Add a Kadence Form block to your page.
    Include a hidden field in the form. To do this, add a new field, set the “Field Type” to “Hidden,” and give it a clear “Field Name” (e.g., utm_source).
    Save the form and note the field’s input name. You can find this by inspecting the form on the front end—right-click the hidden field, select “Inspect,” and look for the name attribute (e.g., kb_field_6 if it’s the sixth field in your form).
  2. Prepare the JavaScript Code
    Here’s a sample script to populate the hidden field with a URL parameter like utm_source:
(function () {
    var urlParams = new URLSearchParams(window.location.search);
    var value = urlParams.get('utm_source') || 'default'; // Replace 'utm_source' with your parameter
    var selector = "input[name='kb_field_6']"; // Replace 'kb_field_6' with your field’s name
    var field = document.querySelector(selector);
    if (field) {
        field.value = value;
    }
})();
  1. In this example:
    • utm_source is the URL parameter you’re capturing (e.g., ?utm_source=facebook).
    • kb_field_6 is the hidden field’s name attribute.
    • If no parameter is found, it defaults to “default” (you can adjust this).
  2. Add the Script to Your Site
    Go to your WordPress dashboard and use a plugin like Code Snippets or add the code directly to your theme’s functions.php file via a child theme.
    Wrap the script in <script> tags and enqueue it properly. Example with Code Snippets:
add_action('wp_footer', function () {
    ?>
    <script>
    (function () {
        var urlParams = new URLSearchParams(window.location.search);
        var value = urlParams.get('utm_source') || 'default';
        var selector = "input[name='kb_field_6']";
        var field = document.querySelector(selector);
        if (field) {
            field.value = value;
        }
    })();
    </script>
    <?php
});
  1. Save and activate the snippet.
  2. Test It
    Visit your form page with a URL like http://yoursite.com/form-page?utm_source=facebook.
    Submit the form and check the entry (in Kadence Forms > Entries) to confirm the hidden field captured “facebook.”

This method is great for capturing UTM parameters or any custom URL value dynamically.

Option 2: Using Kadence’s “Populate With Parameter” Feature

Since 2025, Kadence Forms have added a “Populate With Parameter” setting for hidden fields, making it easier to capture URL parameters without coding—if you control the links directing to your form. This is perfect for tracking inquiry sources (e.g., which button or campaign led to the submission).

Steps:
  1. Configure the Hidden Field
    Add a Kadence Form block and include a hidden field.
    In the field settings, set “Field Type” to “Hidden.”
    Look for the “Populate With Parameter” option (usually under Advanced Settings or Field Input settings).
    Enter a parameter name, like inquirytype or utm_source. This is the key you’ll use in your URL (e.g., ?inquirytype=fb).
  2. Set Up Your URLs
    Create custom links for each source you want to track. For example:
    • From Facebook: http://yoursite.com/form-page?inquirytype=fb
    • From Google: http://yoursite.com/form-page?inquirytype=google

    These links dictate what value the hidden field will capture.
  3. Test the Form
    Click one of your custom links to load the form page.
    Submit the form and check the entries in Kadence Forms > Entries. The hidden field should reflect the value from the URL (e.g., “fb” or “google”).

This approach is simpler if you’re linking to the form from specific sources (e.g., buttons on a services page or marketing campaigns) and don’t need real-time URL parsing.

Choosing the Right Method

  • Use the Script if you need flexibility with dynamic URL parameters (like UTM codes) that users might bring from external sources.
  • Use “Populate With Parameter” if you control the inbound links and want a no-code solution for predefined values.

Both methods have worked flawlessly for my client’s needs—whether it’s tracking marketing campaigns or identifying which button someone clicked. If you’re still stuck, double-check your field names (for the script) or URL structure (for the parameter method), and test with a clean browser to rule out caching issues. Let me know in the comments if you need help tweaking this for your setup!

Leave a Reply

Your email address will not be published. Required fields are marked *