Plugin not working anymore for me

Hi @rabelo17,

The CPF class is entered incorrectly.

Below is the recommended.

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

Thank you for your contact.

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!

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.

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.

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>

Hi @rabelo17,

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

• This reply was modified 3 years, 1 month ago by Ivan Petermann.

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.

Hi @rabelo17

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

Hi @ivanpetermann,

I`ve submited the form.

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.

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

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>