Formatting Telephone Numbers

Hi @richsadams

I hope you are doing well.

I checked the code on that thread but it doesn’t seem to work anymore.

We can verify if there is a different solution, before it, are you looking to save the field using the format 123-456-1234 or format on the fly while the user types the phone?

Do you use any validation?
https://monosnap.com/file/wkd1LioXOUxChDIOp1rrLBbFJd5FKl

Best Regards
Patrick Freitas

Hi Patrick,

Thanks for the fast reply.

It doesn’t need to format on the fly, just save it and display it as 123-456-1234 in the email the admin receives. If it did format on the fly that would be nice, but again, it’s not necessary.

I do have U.S. validation turned on, but it’s not important as the phone number is not a required field. I could easily turn it off if that makes it easier.

Thank you again!

• This reply was modified 3 years, 7 months ago by richsadams.

Hello @richsadams

Doing so in the frontend using some jQuery should be pretty easy. Check the following workarounds: https://stackoverflow.com/a/8760108

Warm regards,
Dimitris

Hi Dimitris,

Tried several of the suggested work-arounds without success.

Thank you though.

Best regards,

Rich

Hi Rich,

I tried one of the solutions from that ticket and when using it as an MU plugin it worked with both formatting while typing and in the submissions.

This is the code snippet that I used as mu-plugin:

<?php function format_input_phonenumber() { ?>
  <script type='text/javascript'>

    jQuery(document).ready(function() {
		// Used to format phone number
		  jQuery('#forminator-field-phone-1').on('input', function() {
		    var number = jQuery(this).val().replace(/[^\d]/g, '')
		    if (number.length == 7) {
		      number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
		    } else if (number.length == 10) {
		      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
		    }
		    $(this).val(number)
		  });
    });

  </script>
<?php  }
add_action( 'wp_footer', 'format_input_phonenumber', 99 );

Cheers,
Predrag

Hi @predrag,

Thank you for that. Unfortunately adding that content as an MU plugin (or regular plugin) breaks the site, generating this warning (I’ve substituted “website.com” for the actual URL):

Warning: Cannot modify header information – headers already sent by (output started at /home/customer/www/website.com/public_html/wp-content/mu-plugins/forminator_phone_format.php:1) in /home/customer/www/website.com/public_html/wp-includes/functions.php on line 6362

Here are the functions.php file lines 6354 through 6363:

‘/**
* Send a HTTP header to limit rendering of pages to same origin iframes.
*
* @since 3.1.3
*
* @see https://developer.mozilla.org/en/the_x-frame-options_response_header
*/
function send_frame_options_header() {
header( ‘X-Frame-Options: SAMEORIGIN’ );
}`

Welcome your thoughts.

TIA!

Hello @richsadams

Can you try to split the first line in two, like from
<?php function format_input_phonenumber() { ?>
to

<?php 
function format_input_phonenumber() { ?>

and make sure there is no other empty line or character before the opening PHP tag in the first line.

Let us know if that does the trick!

Thank you,
Dimitris

Hi @dimitris,

I tried creating an MU plugin (forminator-phone-format.php) using the following code as suggested:

<?php 
function format_input_phonenumber() { ?>
  <script type='text/javascript'>

    jQuery(document).ready(function() {
		// Used to format phone number
		  jQuery('#forminator-field-phone-1').on('input', function() {
		    var number = jQuery(this).val().replace(/[^\d]/g, '')
		    if (number.length == 7) {
		      number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
		    } else if (number.length == 10) {
		      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
		    }
		    $(this).val(number)
		  });
    });

  </script>
<?php  }
add_action( 'wp_footer', 'format_input_phonenumber', 99 );

This is the error message it generated this time:

“Warning: Cannot modify header information – headers already sent by (output started at /home/customer/www/website.com/public_html/wp-content/mu-plugins/forminator-phone-format.php:1) in /home/customer/www/website.com/public_html/wp-login.php on line 400”

Thank you for trying, it’s truly appreciated.

UPDATE: I was able to retry the code again (it did have a space after the opening <?php), upload it and did not get the previous error. However, the phone number was still not formatted live or in the admin email.

• This reply was modified 3 years, 7 months ago by richsadams.
• This reply was modified 3 years, 7 months ago by richsadams.
• This reply was modified 3 years, 7 months ago by richsadams.
• This reply was modified 3 years, 7 months ago by richsadams.

Hi @richsadams

Can you export your form and we can take a closer look?

https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

Please, share it using Google drive and we can take a closer look.

Our Second Line Support also updated the code that you shared if you would like to give a new try to it:

https://wpmudev.com/forums/topic/help-me-modify-the-outputs-of-forminator-form-fields/#post-3910228

Best Regards
Patrick Freitas

Hi @patrick,

Here’s a link to one of the basic contact forms I’m using on the staging site. (I did a find a replace to mask the actual contact info, etc.)

https://www.dropbox.com/s/k1ns7wd2h2roydc/forminator-general-comments-or-inquiry-form-export.txt?dl=0

I will take a look at the new code.

Thanks so much for working on this, it’s truly appreciated. It’s a great plugin and I’d really like to use it if I can this one issues ironed out.

Best wishes,

Rich

Hi @richsadams

I hope you are doing well.

Thank you for the form.

I can see your form load from Ajax, in this case you need to use a different script:

$(document).on("after.load.forminator", function (e, id) {

Entire code:

<?php

add_action( 'wp_footer', function(){ ?>
<script>
	(function ($) {
		$(function () {
			$(document).on("after.load.forminator", function (e, id) {

            	// Used to format phone number
		jQuery('#forminator-field-phone-1').on('input', function() {
		var number = jQuery(this).val().replace(/[^\d]/g, '')
		if (number.length == 7) {
		    number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
		 } else if (number.length == 10) {
		    number = number.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, '$1-$2-$3');}
	$(this).val(number)
					});

				});
			});
	})(window.jQuery);
</script>
<?php }, 21); ?>

However, I tested the new version shared in the ticket is a better version as it uses the cleave js https://nosir.github.io/cleave.js/

I also found you need to disable the validation to make it work as expected in the phone field or modify the code to auto-format to (555) 555-1234

Best Regards
Patrick Freitas

Hello @patrick,

I will try the new code as well as the one linked.

I’m not clear on the js file, but will try to figure it out.

I will let you know if I can get it sorted out or not.

Thank you again for your help, it’s truly appreciated.

Best wishes,

Rich

Hello @patrick,

I removed the phone validation and gave the various codes a try in numerous ways and couldn’t get the expected results. Noting that someone else used the code successfully I’ll accept that I may not be doing something correctly.

At this point I’m going to let the client know that phone number formatting is not an option and hope he sticks with your plugin.

Hopefully that’s something that can be built into future versions as it is with many other plugins.

Thanks so much for your help with this. You’ve gone above and beyond the call of duty.

Best regards,

Rich

Hi @richsadams

Thank you for the update.

I sent this ticket to our developers to implement a native option for phone format and accept different frontend formats.

We can’t guarantee that it is going to be implemented but if more members request the same this can be stronger.

I am marking this as resolved, but feel free to let us know if you need any further help on this.

Best Regards
Patrick Freitas

Thank you very much for your hard work on this Patrick. Looking forward to the update(s)!