Support » Plugin: Masks Form Fields » Plugin not working anymore for me

  • Resolved gurabelo17

    (@rabelo17)


    Hello,
    The plugin was working fine as usual. But recently it just stopped working.
    I tried using previous versions but it doesn’t work.
    I think it’s something related to my site, maybe some conflict with other plug-ins.
    Anyway, if someone has the same problem and can help me, I appreciate it.

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author Ivan Petermann

    (@ivanpetermann)

    Hi @rabelo17,

    The CPF class is entered incorrectly.

    Below is the recommended.

    [text* CPF class:cpf placeholder "CPF"]

    Thank you for your contact.

    Thread Starter gurabelo17

    (@rabelo17)

    Hi Ivan,

    Thanks for your reply.

    It is working for CF7, but not for my other forms.
    Please, check this page and try to buy a ticket to see the problem.
    https://timeaction.com.br/evento/cross-aquathlon-2021/#tribe-tickets
    It was working fine some weeks ago, including the fields date and phone.
    As it does not have a default way to insert classes via wp panel, I made a code to include it in my child theme. I can send you the code if you could check.

    Thanks in advance for your help!

    Plugin Author Ivan Petermann

    (@ivanpetermann)

    Hi @rabelo17,

    I’m sorry for not replying earlier. I see you are rebuilding the form into a Popup. In this case, you need to run the mask script again to apply it to the newly created fields. Maybe this will help you.

    <script>
        (function($) {
            'use strict';
            if (typeof _mff == 'undefined' || _mff === null) {
                return;
            }
            jQuery(document).ready(function($) {
                $('input.date').mask('00/00/0000');
                $('input.phone').mask(PhoneMaskBehavior, nonoOptions);
                $('input.cpf').mask('000.000.000-00', { reverse: true });
            });
            var PhoneMaskBehavior = function(val) {
                    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
                },
                nonoOptions = {
                    onKeyPress: function(val, e, field, options) {
                        field.mask(PhoneMaskBehavior.apply({}, arguments), options);
                    }
                };
        })(jQuery);
    </script>

    * Remember to add the classes on fields.

    Thread Starter gurabelo17

    (@rabelo17)

    Hi @ivanpetermann,

    Thank you for trying to help.

    Unfortunately it not solve my problem. Must probably because I do not have the development skills required.

    The strange is, it was working perfectly a month ago, and nothing has changed in the theme, it was already a form inside a popup.

    But anyway, this last code you shared, it is supposed to include inside the functions.php?

    Thank you,
    Gustavo R.

    Thread Starter gurabelo17

    (@rabelo17)

    This is the code that I`am using to include the cpf class and was working:

    <?php
    $required    = isset( $field->required ) && 'on' === $field->required ? true : false;
    $option_id   = "tribe-tickets-meta_{$field->slug}_{$ticket->ID}{{data.attendee_id}}";
    $field       = (array) $field;
    $multiline   = isset( $field['extra'] ) && isset( $field['extra']['multiline'] ) ? $field['extra']['multiline'] : '';
    $field_name  = 'tribe-tickets-meta[' . $ticket->ID . '][{{data.attendee_id}}][' . esc_attr( $field['slug'] ) . ']';
    //INÍCIO acrescenta novas variaveis
    $cpf           = "cpf";
    $data_nasci    = "nascimento";
    $telefone      = "telefone";
    //FIM acrescenta novas variaveis
    $disabled    = false;
    $classes = [ 'tribe-common-b1', 'tribe-field', 'tribe-tickets__item__attendee__field__text' ];
    if ( $required ) {
    	$classes[] = 'tribe-tickets-meta-required';
    }
    
    if ( $multiline ) {
    	$classes[] = 'tribe-tickets__item__attendee__field__textarea';
    }
    ?>
    <!--DEFINICAO DE QUAL CLASSE USAR - DA LINHA 38 ATÉ 51-->
    <div <?php tribe_classes( $classes ); ?> >
    	<label
    		class="tribe-common-b2--min-medium tribe-tickets-meta-label"
    		for="<?php echo esc_attr( $option_id ); ?>"
    	><?php echo wp_kses_post( $field['label'] ); ?><?php tribe_required_label( $required ); ?></label>
    	<?php if ( $multiline ) : ?>
    		<textarea
    			id="<?php echo esc_attr( $option_id ); ?>"
    			class="tribe-common-form-control-text__input ticket-meta"
    			name="<?php echo esc_attr( $field_name ); ?>"
    			<?php tribe_required( $required ); ?>
    			<?php tribe_disabled( $disabled ); ?>
    		><?php echo esc_textarea( $value ); ?></textarea>
    	<?php else : ?>
    		<!--DEFINICAO DE QUAL CLASSE USAR - DA LINHA 38 ATÉ 69 - RETIREI A CLASSE PADRAO QUE ESTAVA NA LINHA 72-->
    		<input
    			<?php
    			switch ($option_id) {
    				case (strpos($option_id, $cpf) == true):
    				    echo "class='cpf tribe-common-form-control-text__input ticket-meta' minlength='14'";
    				    break;
    				case (strpos($option_id, $data_nasci) == true):
    				    echo "class='date tribe-common-form-control-text__input ticket-meta' minlength='10'";
    				    break;
    				case (strpos($option_id, $telefone) == true):
    				    echo "class='phone tribe-common-form-control-text__input ticket-meta'";
    				    break;
    				default:
    				    echo "class='tribe-common-form-control-text__input ticket-meta'";
    			}?>
    			type="text"
    			id="<?php echo esc_attr( $option_id ); ?>"
    			name="<?php echo esc_attr( $field_name ); ?>"
    			value="<?php echo esc_attr( $value ); ?>"
    			<?php tribe_required( $required ); ?>
    			<?php tribe_disabled( $disabled ); ?>
    		/>
    	<?php endif; ?>
    </div>
    Plugin Author Ivan Petermann

    (@ivanpetermann)

    Hi @rabelo17,

    Try to add the code I sent earlier, after the </div>

    Thread Starter gurabelo17

    (@rabelo17)

    Hi @ivanpetermann,

    Thanks for trying to help me.

    Although that code works, it brokes the layout and the pop-up content shows before clicking. It seems a CSS issue now, but I don’t know what to do.

    Do you have any suggestion? I’m also willing to hire someone to do this for me.

    Thank you.

    Plugin Author Ivan Petermann

    (@ivanpetermann)

    Hi @rabelo17

    If you prefer, contact me at ivanpetermann.com/contato/.

    Thread Starter gurabelo17

    (@rabelo17)

    Hi @ivanpetermann,

    I`ve submited the form.

    Plugin Author Ivan Petermann

    (@ivanpetermann)

    Hi @rabelo17,

    I already replied your email on Nov 7, 2021 at 14:36. Please, check the junk email.

    Hi,
    Using CF7 in an Elementor Pop, the phone input mask (for US) is not working for me.
    Thank you.

    Plugin Author Ivan Petermann

    (@ivanpetermann)

    Hi @cwlocal,

    Try adding the script below with an HTML widget in Popup Element.

    <script src="/wp-content/plugins/masks-form-fields/includes/js/scripts.js" id="masks-form-fields-js"></script>

    Thank you very much @ivanpetermann,
    Above method works!

    I have tried different solutions and the following script worked for me before I was surprised by your very quick response (within 2 hours!):

    `<script>
    jQuery( document ).on( ‘elementor/popup/show’, function() {
    wpcf7.init(jQuery(‘.popup-form’)[0]);
    jQuery(“input[name=’tel-418′]”).mask(‘(000) 000-0000’);
    });
    </script>

    I have this hooked to the header and works great and also takes care of CF7 submit action closing the popup before seeing any error/success messages.

    Not sure if I need to change my solution to yours? Which one is more efficient?

    Thank you

    Plugin Author Ivan Petermann

    (@ivanpetermann)

    Hi @cwlocal,

    Great that it worked.

    If you’re just going to use a mask, your solution is better.

    Thanks for your return.

    Phone mask script for Contact Form 7 in Popup Elementor.

    <script>
    jQuery(document).on('elementor/popup/show', function () {
        wpcf7.init(jQuery('.popup-form')[0]);
        jQuery('input[type="tel"]').mask('(000) 000-0000');
    });
    </script>
Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Plugin not working anymore for me’ is closed to new replies.