• Resolved richsadams

    (@richsadams)


    I’m trying out the free version of this great plugin before upgrading to pro.

    Is there a way to format the phone number field? In my case I would like the 10 digit U.S. format: 123-456-1234.

    I searched here but didn’t find anything, however I found a support ticket on your regular website that outlined a way to do that with an additional plugin:

    https://wpmudev.com/forums/topic/forminator-phone-number-field-custom-format/#post-3666500

    I was able to create and upload the plugin, however it’s not clear where the referenced javascript file should be uploaded. I’ve tried numerous locations, but none worked.

    My client requires the phone numbers to be formatted before he will upgrade or find another plugin so I’m hoping you can assist.

    TIA!

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    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

    Thread Starter richsadams

    (@richsadams)

    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 6 months, 2 weeks ago by richsadams.
    Plugin Support Dimitris – WPMU DEV Support

    (@wpmudev-support6)

    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

    Thread Starter richsadams

    (@richsadams)

    Hi Dimitris,

    Tried several of the suggested work-arounds without success.

    Thank you though.

    Best regards,

    Rich

    Plugin Support Predrag – WPMU DEV Support

    (@wpmudev-support1)

    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

    Thread Starter richsadams

    (@richsadams)

    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!

    Plugin Support Dimitris – WPMU DEV Support

    (@wpmudev-support6)

    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

    Thread Starter richsadams

    (@richsadams)

    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 6 months ago by richsadams.
    • This reply was modified 6 months ago by richsadams.
    • This reply was modified 6 months ago by richsadams.
    • This reply was modified 6 months ago by richsadams.
    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    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

    Thread Starter richsadams

    (@richsadams)

    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

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    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

    Thread Starter richsadams

    (@richsadams)

    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

    Thread Starter richsadams

    (@richsadams)

    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

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    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

    Thread Starter richsadams

    (@richsadams)

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

Viewing 15 replies - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.