How to put mascara in Wordpress contact-form-7?

Question

I can’t seem to put a mask on contact-form-7 of Wordpress 4.5.3.

Answer 1

In the form add the (class:telefone-mascara)

[tel* seu-telefone class:telefone-mascara placeholder "seu telefone ou whatsapp"]

In the plugin click edit:

A textarea will appear with the following code:

<?php
/*
Plugin Name: Contact Form 7
Plugin URI: http://contactform7.com/
Description: Just another contact form plugin. Simple but flexible.
Author: Takayuki Miyoshi
Author URI: http://ideasilo.wordpress.com/
Text Domain: contact-form-7
Domain Path: /languages/
Version: 4.5
*/

define( 'WPCF7_VERSION', '4.5' );

define( 'WPCF7_REQUIRED_WP_VERSION', '4.4' );

define( 'WPCF7_PLUGIN', __FILE__ );

define( 'WPCF7_PLUGIN_BASENAME', plugin_basename( WPCF7_PLUGIN ) );

define( 'WPCF7_PLUGIN_NAME', trim( dirname( WPCF7_PLUGIN_BASENAME ), '/' ) );

define( 'WPCF7_PLUGIN_DIR', untrailingslashit( dirname( WPCF7_PLUGIN ) ) );

define( 'WPCF7_PLUGIN_MODULES_DIR', WPCF7_PLUGIN_DIR . '/modules' );

if ( ! defined( 'WPCF7_LOAD_JS' ) ) {
    define( 'WPCF7_LOAD_JS', true );
}

if ( ! defined( 'WPCF7_LOAD_CSS' ) ) {
    define( 'WPCF7_LOAD_CSS', true );
}

if ( ! defined( 'WPCF7_AUTOP' ) ) {
    define( 'WPCF7_AUTOP', true );
}

if ( ! defined( 'WPCF7_USE_PIPE' ) ) {
    define( 'WPCF7_USE_PIPE', true );
}

if ( ! defined( 'WPCF7_ADMIN_READ_CAPABILITY' ) ) {
    define( 'WPCF7_ADMIN_READ_CAPABILITY', 'edit_posts' );
}

if ( ! defined( 'WPCF7_ADMIN_READ_WRITE_CAPABILITY' ) ) {
    define( 'WPCF7_ADMIN_READ_WRITE_CAPABILITY', 'publish_pages' );
}

if ( ! defined( 'WPCF7_VERIFY_NONCE' ) ) {
    define( 'WPCF7_VERIFY_NONCE', true );
}

if ( ! defined( 'WPCF7_USE_REALLY_SIMPLE_CAPTCHA' ) ) {
    define( 'WPCF7_USE_REALLY_SIMPLE_CAPTCHA', false );
}

if ( ! defined( 'WPCF7_VALIDATE_CONFIGURATION' ) ) {
    define( 'WPCF7_VALIDATE_CONFIGURATION', true );
}

// Deprecated, not used in the plugin core. Use wpcf7_plugin_url() instead.
define( 'WPCF7_PLUGIN_URL', untrailingslashit( plugins_url( '', WPCF7_PLUGIN ) ) );

require_once WPCF7_PLUGIN_DIR . '/settings.php';

Assuming you’re using a jQuery plugin, at the end add this:

require_once WPCF7_PLUGIN_DIR . '/settings.php';

register_shutdown_function(function () {
    echo '
        <script type="text/javascript">
        $(document).ready(function () {
             $(".telefone-mascara").mask();
        });
        </script>
    ';
});

If it’s pure Javascript:

echo '
    <script type="text/javascript">
    window.addEventListener("load", function () {
         var el = document.querySelector(".telefone-mascara");

         if (el) {
              //Adiciona a mascara
         }
    });
    </script>
';