New to the community? Start here

Populate UTM Parameters in Hidden Fields – Forminator

How do we populate them ( hidden fields) dynamically? and rename the field ID?

I want to use a URL like this in a campaign and have it populate the form fields:

something.com/get-a-quote/?utm_source=Test1&utm_medium=Test2&utm_campaign=Test3&utm_term=Test4&utm_content=Test5

I want to populate the hidden field from a query string parameter and save it when the form submits.

Fri, 29 Mar 2019 12:28:16
More Forminator Pro discussions
Forminator Pro
  • Dimitris Kalliris
    • Support Team Lead

    Hello there Cats & Shepherd,

    hope you're doing well! :slight_smile:

    In order to auto-populate the hidden field, you should use the "HTTP Refer URL" option in the Hidden field:

    [attachments are only viewable by logged-in members]

    As for changing the field ID of the Hidden field, we forwarded this to our Second Level Support for further investigation, as it's not possible out of the box with Forminator options.

    Warm regards,

    Dimitris

  • Kostas
    • CTO

    Hi Cats & Shepherd ,

    I'm not really sure why you want to change the ID of the fields as well, for now I didn't touch that part as it isn't really needed. This is an easy way to populate the fields and have them named in your submissions as you want as well. Please note that you'll have to adjust the code a bit depending on the hidden-# id ( and this is why I didn't touch them so it's easier ). Do tell me though if you want to change them so I can provide an updated code as well.

    Let me show you how I tested this on my end so you can replicate:

    The fields in the form:

    Add the 5 hidden fields ( or as many as you need to ), and select for them to have a Custom Value and adjust their labels.

    [attachments are only viewable by logged-in members]

    [attachments are only viewable by logged-in members]

    The code:

    1] Navigate to your /wp-content/ directory and create a new one named mu-plugins if it doesn't exist.

    2] Inside the mu-plugins folder create a file named populate-utm-fields.php

    3] Edit the file and copy / paste this code snippet inside.

    <?php
    

    
/**
    
* Populate 5 hidden fields in a forminator form from the utm_ params.
    
*
    
* ?utm_source=Test1&utm_medium=Test2&utm_campaign=Test3&utm_term=Test4&utm_content=Test5
    
*
    
* utm_source
    
* utm_medium
    
* utm_campaign
    
* &utm_term
    
* utm_content
    
*/
    

    
if ( ! function_exists( 'populate_utm_fields' ) ) {
    

    
add_action(
    
'forminator_after_form_render',
    
function( $id, $form_type, $post_id, $form_fields, $form_settings ) {
    
// Change the number 60 with your Form ID.
    
if ( 60 === $id ) {
    
add_action( 'wp_footer', 'populate_utm_fields', 999 );
    
}
    
},
    
15,
    
5
    
);
    

    
function populate_utm_fields() {
    

    
$utm_source   = ( isset( $_GET['utm_source'] ) ) ? sanitize_text_field( $_GET['utm_source'] ) : '';
    
$utm_medium   = ( isset( $_GET['utm_medium'] ) ) ? sanitize_text_field( $_GET['utm_medium'] ) : '';
    
$utm_campaign = ( isset( $_GET['utm_campaign'] ) ) ? sanitize_text_field( $_GET['utm_campaign'] ) : '';
    
$utm_term     = ( isset( $_GET['utm_term'] ) ) ? sanitize_text_field( $_GET['utm_term'] ) : '';
    
$utm_content  = ( isset( $_GET['utm_content'] ) ) ? sanitize_text_field( $_GET['utm_content'] ) : '';
    

    
?>
    
<script>
    
( function( $ ) {
    
$( document ).ready( function() {
    
// Adjust the hidden-1 ids depending on the form.
    
$( 'input[name="hidden-1"' ).val( '<?php echo $utm_source; ?>' );
    
$( 'input[name="hidden-2"' ).val( '<?php echo $utm_medium; ?>' );
    
$( 'input[name="hidden-3"' ).val( '<?php echo $utm_campaign; ?>' );
    
$( 'input[name="hidden-4"' ).val( '<?php echo $utm_term; ?>' );
    
$( 'input[name="hidden-5"' ).val( '<?php echo $utm_content; ?>' );
    
} );
    
} ( jQuery ) )
    
</script>
    
<?php
    
}
    
}

    4] Save and close the file.

    5] The final path should look like /wp-content/mu-plugins/populate-utm-fields.php

    Adjusting the code:

    You will have to change the number 60 from if ( 60 === $id ) { to the Form ID that you are using ( use the same number from the shortcode provided ).

    And you can also alter the hidden-# depending on the actual fields that your form populated to "bind" them with the utm_ values that you like.

    This is a screenshot of a submission with the above form & code.

    [attachments are only viewable by logged-in members]

    I hope this helps and tell me if you need any further help with this !

    Regards,

    Konstantinos