Google Tag Manager and E.164 Phone Number Format

Hi @whyknott,

I think all that it needs is the + plus symbol placed before the number and include the country code. like this with 11 numbers for US…..?+18885550000

Just to be sure, is the issue only specific to the number format?

If yes, have you tried the “International” validation option in the Phone Field and see whether that helps?

View post on imgur.com

Looking forward to your response, so that we could have a better idea.

Kind Regards,

Nithin

No, I have haven’t tried international format as I thought that wasn’t relevant to U.S. for some reason. I will give this a try and run another test in GTM to see if it works.

Ok I tried the international option for formatting and it brings it into Google Tag Manager with the + plus symbol but it included the spaces! Like this: +1 555 666 7777
What format removes the spaces? and just has it formatted like this: +15556667777

• This reply was modified 6 months, 1 week ago by Why Not Advertising, LLC. Reason: typo

Hello @whyknott,

Could you please try adding the following PHP snippet as a must use plugin:

<?php

add_action('wp_footer', function () { 
    ?> 
    <script> 
        (function ($) { 
            $(function () { 
                setTimeout(function() {
                    $('.forminator-custom-form').trigger('after.load.forminator');
                }, 100);
                
                $(document).on("after.load.forminator", function (e, id) { 
                    // Phone number formatting logic 
                    $('input[name^="phone-"]').on('input', function () { 
                    var number = $(this).val().replace(/\s+/g, ''); // Remove spaces
                    if (number.length === 10) { 
                    // Format as "XXXXXXXXXX" 
                    number = number.replace(/(\d{10})/, '$1'); 
                    } 
                    // Set the formatted number as the input value 
                    $(this).val(number); 
                    }); 
                }); 
            }); 
        })(window.jQuery); 
    </script> 
    <?php 
}, 21);
    
/* Remove the spaces upon submission */
add_action( 'forminator_custom_form_submit_before_set_fields', 'phone_number_correction', 10, 3 );
    function phone_number_correction( $entry, $module_id, $field_data_array ) {
    $form_ids = array(6); // Please change the form ID.
    if ( !in_array( $module_id, $form_ids ) ) {
        return;
    }

    foreach ( $field_data_array as $key => $value ) {
        if ( strpos( $value['name'], 'phone-' ) !== false ) {
            $new_phone = str_replace( '', '', $value['value'] );
            $new_phone = str_replace(' ', '', $new_phone);
            Forminator_CForm_Front_Action::$info['field_data_array'][$key]['value'] = sanitize_text_field($new_phone);
        }
    }
}

add_filter( 'forminator_prepared_data', 'phone_number_correction_prepared', 10, 2 );
function phone_number_correction_prepared( $prepared_data, $module_object ){
    if ( $module_object->id != 6 ) { // Please change the form ID.
        return $prepared_data;
    }

    foreach ( $prepared_data as $key => $value ) {
        if ( strpos( $key, 'phone-' ) !== false ) {
            if ( ! empty( $prepared_data[$key] ) ) {
                $new_phone = str_replace( '', '', $prepared_data[$key] );
                $new_phone = str_replace(' ', '', $new_phone);
                $prepared_data[$key] = sanitize_text_field($new_phone);
            }
        }
    }

    return $prepared_data;
}

– save it in a PHP file, for example forminator-phone-remove-space.php, and upload the saved file to /wp-content/mu-plugins/ directory.

It should remove spaces from all phone fields in Forminator forms.
Hope this helps. Let us know if you need any further assistance.

Best Regards,
Dmytro

The code worked great! Thank you! One styling issue, not pertaining to the code you provided here, but when you use the international version the cursor goes behind the flags and it’s hard to see it when you type the number. It’s doing it across two of my websites so I know it’s not my themes. Please fix this. Also, I’m using CSS display none to hide the flag selection because my clients don’t do business internationally. However, I had to select to use the international version to get the + plus sign to show up in the output of the phone number in GTM and even in the notification emails. I really wish there was more emphasis placed on these things especially with userData collection being more strict and having to deal with Google Ads and third party sites needing E.164 formatted data. You can see my dilemna here with having to use the international version just to get the + plus sign and then it adds the “flags” which I don’t want to show. And the CSS needs adjusted because the cursor gets overlapped by the flags.

You can see how the flags overlap the cursor….

Hi @whyknott

Thank you for response!

As for the flag overlapping the phone number, it actually is related to something specific on site. On a default setup it doesn’t happen. Just to make sure I checked it on two separate test sites with different standard themes and no other plugin active (and also tested all the built-in form design styles) and could not replicate this.

So there must be some CSS either in the theme(s) used, in some custom CSS that you got added to site or in some other plugin(s) that’s conflicting here.

If you share a link to example form in question, we can check what is possibly causing it and how to override it.

However, since you want to hide the flag anyway, you can simply add this CSS to form’s Custom CSS option first:

.forminator-field-phone .iti__flag-container {display:none!important;}

Since the number is already moved to the left, it should be enough to make it work fine. In case you’d still need to move the number itself, you can use a CSS like this for it (changing the padding value)

.forminator-field-phone .forminator-phone.iti--allow-dropdown .forminator-input {padding-left:10px!important;}

—-

As for how those numbers are displayed, it’s related mostly to the validation library that we are using but we do already have a plan for simple option to remove those flags. I don’t have ETA for it but it is planned to be implemented with one of future releases of the plugin.

Kind regards,
Adam

Hello @whyknott,

I hope the suggested CSS rules helped.

We are marking the thread as resolved for now, since we haven’t heard from you for some time.

In case you still have any questions, please let us know.

Best Regards,
Dmytro

it worked nicely to remove the spaces thank you. That said, I wish there were more formatting options built in because now my client only does business in United States and their website visitors have to add +1 to their phone number. Basically having to use the international format. I don’t like this. I just want the customer/prospects to be able to type a normal USA phone number in the phone field and the data on the backend would format automatically in E.164. The only reason is because of Google ads needing it. So perhaps in a very soon future update you can have an option in the phone field to connect Google ads Enhanced Conversion to E.164 formatted phone number automatically so my USA clients don’t have to use international formatted phone validation????

• This reply was modified 5 months, 3 weeks ago by Why Not Advertising, LLC. Reason: Updated a word

Hi @whyknott,

Hope this message finds you well and thanks for your feedback.

Thank you for reaching out to us with your suggestion for a new feature. We understand your eagerness to see it implemented, but we wanted to take a moment to explain the process involved and why it may take some time.

Implementing a new feature in our system is not a straightforward task. It requires careful evaluation, planning, and development to ensure that it meets our quality standards as well as the specific needs of our users. We need to consider various factors such as technical feasibility, compatibility, and potential impact on existing functionalities.

Furthermore, we take into account the priority of requests from all the users and members and strive to maintain a balanced roadmap for new features and enhancements. This means that we need to evaluate the potential value and impact of each request against other ongoing projects and user/member needs.

Having explain that, I have modified the code, previously provided to work this way:

– If your visitors add any US number like XXXXXXXXXX it will add the +1XXXXXXXXXX as per your request here:

What format removes the spaces? and just has it formatted like this: +15556667777

– This code can be used either with International or National validation.

I tested it on my own site and is currently working for National US validation.

<?php

add_action('wp_footer', function () { 
    ?> 
    <script> 
        (function ($) { 
            $(function () { 
                setTimeout(function() {
                    $('.forminator-custom-form').trigger('after.load.forminator');
                }, 100);
                
                $(document).on("after.load.forminator", function (e, id) { 
                    // Phone number formatting logic 
                    $('input[name^="phone-"]').on('input', function () { 
                    var number = $(this).val().replace(/\s+/g, ''); // Remove spaces
                    //if (number.length === 10) { 
                    if (number.length === 10 && !$(this).val().includes('+1')) {
                        number = "+1" + number;
                        // Format as "XXXXXXXXXX" 
                        number = number.replace(/(\d{10})/, '$1');       
                    } else{
                        number = number.replace(/(\d{10})/, '$1'); 
                    }
               
                    // Set the formatted number as the input value               
                    $(this).val(number); 
                    }); 
                }); 
            }); 
        })(window.jQuery); 
    </script> 
    <?php 
}, 21);

This code is above the part that said: /* Remove the spaces upon submission */ just need to replace that part of the code. Hope this code can help.

Best regards,
Laura

thank you, I understand you have to analyze and ensure an update works for everyone. I assure you thousands of folks who use forminator forms with Google ads will absolutely need to use “Enhanced Conversion Tracking” and via Google Tag Manager we need the phone number data hashed and in the E.164 format for userData so that we can track Google ad performance properly. Google is requiring this due to more strict rules with how marketers can use cookie data etc (privacy is more strict, so Google has created the Enhanced Conversion Tracking. Thousands of your users won’t be able to use Forminator out of the box with Google ads and Google Tag Manager if you don’t adjust the main plugin at some point.

Hi @whyknott

Thank you for your feedback on this.

I see what you mean and I certainly agree that implementing this would be beneficial to users. We, as a support team, don’t really have a way to “force” if/when certain feature will be implemented, I’m afraid. But Forminator Team takes into account various factors, including the demand for given feature, so I hope we’ll be able to handle that in some reasonable future, though I’m really not able to give promises or ETA at this point.

Kind regards,
Adam

Hi Laura and Adam,
Thank you for the updated code, I’ve made the update and it works great, I changed the setting to National validation and used your updated code, now when visitors type a normal USA phone number like 333-555-4444 it will format it to E.164 format like this: +13334445555, which is what Google Ads needs for their Enhanced Conversions setup to track results properly. Thank you!