Formulário com DDI no Elementor

Códigos - Formulário com DDI no Elementor

Para entender como aplicar os códigos, assista ao vídeo abaixo:

JAVASCRIPT (USAR WIDGET HTML)

				
					<link data-minify="1" rel="stylesheet" href="https://ciparoni.com/wp-content/cache/background-css/ciparoni.com/wp-content/cache/min/1/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css?ver=1734217268&wpr_t=1735206059"/>

<script data-minify="1" src="https://ciparoni.com/wp-content/cache/min/1/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js?ver=1734217268"></script>

<script data-minify="1" src="https://ciparoni.com/wp-content/cache/min/1/ajax/libs/jquery/3.7.1/jquery.min.js?ver=1734217268" ></script>

<script>
    const phoneInputField = document.querySelectorAll('input[type="tel"]');
    const btForm = document.querySelectorAll('.elementor-button[type="submit"]');
    let telefones = [];
    
    for (i = 0; i < phoneInputField.length; i++){
        var phone_number = window.intlTelInput(phoneInputField[i], {
        separateDialCode: true,
        preferredCountries:["br"],
        hiddenInput: "full",
        utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
        });
        
        telefones[i] = phone_number;
    }
    $(phoneInputField).each(function(i) {
        $("form").submit(function() {
            var full_number = telefones[i].getNumber(intlTelInputUtils.numberFormat.E164);
            $(phoneInputField[i]).val(full_number);
            console.log(phoneInputField[i]);
            console.log(phone_number);
        });
    });

    for (i = 0; i < phoneInputField.length; i++){
        var larguraInput = phoneInputField[i].getBoundingClientRect().width;
        $(".iti__country-list").css({width: larguraInput});
    }

    window.addEventListener("resize", function() {
      for (let i = 0; i < phoneInputField.length; i++) {
        const larguraInput = phoneInputField[i].offsetWidth;
        $(".iti__country-list").css({ width: larguraInput });
      }
  });
</script>

CASO USE POPUP, COLOQUE TAMBÉM O CÓDIGO ABAIXO (USAR WIDGET HTML)

				
					<script>
var $=jQuery.noConflict();
jQuery(document).ready(function( $ ){

    jQuery(document).on('elementor/popup/show', () => {
        const phoneInputField = document.querySelectorAll('input[type="tel"]');
        const btForm = document.querySelectorAll('.elementor-button[type="submit"]');
        let telefones = [];
    
        for (i = 0; i < phoneInputField.length; i++){
            var phone_number = window.intlTelInput(phoneInputField[i], {
            separateDialCode: true,
            preferredCountries:["br"],
            hiddenInput: "full",
            utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
            });
        
            telefones[i] = phone_number;
        }

        $(phoneInputField).each(function(i) {
            $("form").submit(function() {
                var full_number = telefones[i].getNumber(intlTelInputUtils.numberFormat.E164);
                $(phoneInputField[i]).val(full_number);
                console.log(phoneInputField[i]);
                console.log(phone_number);
            });
        });
    
        for (i = 0; i < phoneInputField.length; i++){
            var larguraInput = phoneInputField[i].getBoundingClientRect().width;
            $(".iti__country-list").css({width: larguraInput});
        }

    });
});
</script>

CSS

				
					.iti, .iti--allow-dropdown{
    width: 100% !important;
    z-index: 9999 !important;
}

.iti__selected-dial-code{
    color: #ffffff;
    font-size: 16px;
}

.iti__country-list{
    color: #f9f9f9 !important;
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

.iti__arrow{
    border-top-color: #ffffff !important;
}

.iti__selected-flag{
    background-color: #707070 !important;
}

.iti__divider{
    border-bottom-color: #505050 !important;
}

.iti__country-name{
    font-size: 16px;
}

POLÍTICA DE PRIVACIDADE • TERMOS DE USO