Resumo de IA
Gostaria de definir uma bandeira padrão no campo Telefone Inteligente quando o GDPR estiver ativado? Ao usar o campo de formulário Telefone Inteligente, a bandeira do país padrão tentará ser definida com base no endereço IP do usuário. Quando a configuração do GDPR estiver ativada, essa configuração será bloqueada e, portanto, a bandeira precisará ser definida manualmente pelos seus visitantes.
Usando um pequeno trecho de código JavaScript, você pode definir a bandeira para um país padrão por um número, para que você não esteja em violação do seu acordo de GDPR, mas economizando um passo para o usuário ao mesmo tempo. Mostraremos como conseguir isso com este tutorial.
Configurando o formulário
Primeiro, para fins deste tutorial, presumiremos que você já ativou a configuração de GDPR do WPForms. Se precisar de mais ajuda com isso, revise esta documentação.
Uma vez que a configuração para GDPR esteja ativada, é hora de adicionar um Telefone Inteligente ao seu formulário.
Agora que o campo foi adicionado, você também pode adicionar o seu campo de formulário Acordo de GDPR.
Definindo a bandeira padrão
Agora é hora de adicionar o seguinte trecho de código ao seu site. Se você não tem certeza de onde e como adicionar trechos ao seu site, revise este tutorial.
/**
* Set the country code on Smart Phone form field country flag
*
* @link https://wpforms.com/how-to-set-a-default-flag-on-smart-phone-field-with-gdpr/
*/
function wpf_dev_smart_phone_field_initial_country() {
?>
<script type="text/javascript">
jQuery( document ).on( 'wpformsReady', function() {
jQuery( '.wpforms-smart-phone-field' ).each(function(e){
var $el = jQuery( this ),
iti = $el.data( 'plugin_intlTelInput' ),
options;
// Options are located in different keys of minified and unminified versions of jquery.intl-tel-input.js.
if ( iti.d ) {
options = Object.assign( {}, iti.d );
} else if ( iti.options ) {
options = Object.assign( {}, iti.options );
}
if ( ! options ) {
return;
}
$el.intlTelInput( 'destroy' );
$el.off( 'validate' );
// Put a country code here according to this list: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
options.initialCountry = 'SZ'.toLowerCase();
$el.intlTelInput( options );
// Restore hidden input name after intlTelInput is reinitialized.
$el.siblings( 'input[type="hidden"]' ).each(function() {
const $hiddenInput = jQuery( this );
$hiddenInput.attr( 'name', $hiddenInput.attr( 'name' ).replace( 'wpf-temp-', '' ) );
});
});
} );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_smart_phone_field_initial_country', 30 );
Este código acima procurará por `options.initialCountry = 'SZ';` e definirá a bandeira para esse país.
Se você precisar de ajuda para encontrar o código de país correto para o qual deseja definir sua bandeira, por favor, dê uma olhada em esta página para encontrar o número correto.
Agora, quando a página carregar, ela definirá automaticamente a bandeira no campo.
Gostaria também de restringir países para um campo de Telefone Inteligente? Dê uma olhada em nosso tutorial sobre Como Restringir Países Dentro de Campos de Formulário de Telefone Inteligente.
Ação de Referência
Perguntas Frequentes
P: Isso funcionará em um formulário com Quebras de Página?
R: Se o seu formulário tiver os campos de formulário Quebra de Página, então você também vai querer usar o trecho deste tutorial também.
P: Como posso limitar apenas certos países aparecendo?
R: Se você quiser aceitar apenas certos países, você usaria este trecho. Em nosso exemplo, verificamos o código de país de duas letras para os códigos corretos para os EUA e Grã-Bretanha e os colocamos na linha `options.onlyCountries` do código.
/**
* Restrict countries to only on Smart Phone form field country flag
*
* @link https://wpforms.com/how-to-set-a-default-flag-on-smart-phone-field-with-gdpr/
*/
function wpf_dev_smart_phone_field_restrict_countries() {
?>
<script type="text/javascript">
jQuery( document ).on( 'wpformsReady', function() {
jQuery( '.wpforms-smart-phone-field' ).each(function(e){
var $el = jQuery( this ),
iti = $el.data( 'plugin_intlTelInput' ),
options;
// Options are located in different keys of minified and unminified versions of jquery.intl-tel-input.js.
if ( iti.d ) {
options = Object.assign( {}, iti.d );
} else if ( iti.options ) {
options = Object.assign( {}, iti.options );
}
if ( ! options ) {
return;
}
$el.intlTelInput( 'destroy' );
$el.off( 'validate' );
// Set the initial country
options.initialCountry = 'gb'.toLowerCase();
// Put a country code here according to this list: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes
options.onlyCountries = [ 'gb','us' ];
$el.intlTelInput( options );
// Restore hidden input name after intlTelInput is reinitialized.
$el.siblings( 'input[type="hidden"]' ).each(function() {
const $hiddenInput = jQuery( this );
$hiddenInput.attr( 'name', $hiddenInput.attr( 'name' ).replace( 'wpf-temp-', '' ) );
});
});
} );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_smart_phone_field_restrict_countries', 30 );
P: Como posso habilitar meus "países preferidos no topo da lista?"
R: Para mostrar os países que você prefere no topo da lista, use este trecho em vez disso.
/**
* Show preferred countries inside the Smart Phone form field
*
* @link https://wpforms.com/developers/how-to-set-a-default-flag-on-smart-phone-field-with-gdpr/
*/
function wpf_dev_smart_phone_field_preferred_countries() {
?>
<script type="text/javascript">
jQuery( document ).on( 'wpformsReady', function() {
jQuery( '.wpforms-smart-phone-field' ).each(function(e){
var $el = jQuery( this ),
iti = $el.data( 'plugin_intlTelInput' ),
options;
// Options are located in different keys of minified and unminified versions of jquery.intl-tel-input.js.
if ( iti.d ) {
options = Object.assign( {}, iti.d );
} else if ( iti.options ) {
options = Object.assign( {}, iti.options );
}
if ( ! options ) {
return;
}
$el.intlTelInput( 'destroy' );
$el.off( 'validate' );
// Put a country code here according to this list: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
options.initialCountry = 'in'.toLowerCase();
// the countries at the top of the list. defaults to united states and united kingdom
options.preferredCountries = ["de", "in"]; //your preferred country
$el.intlTelInput( options );
// Restore hidden input name after intlTelInput is reinitialized.
$el.siblings( 'input[type="hidden"]' ).each(function() {
const $hiddenInput = jQuery( this );
$hiddenInput.attr( 'name', $hiddenInput.attr( 'name' ).replace( 'wpf-temp-', '' ) );
});
});
} );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_smart_phone_field_preferred_countries' );