Você gostaria de definir um sinalizador padrão no campo Smart Phone quando o GDPR estiver ativado? Ao usar o campo de formulário Smart Phone, o sinalizador de país padrão tentará ser definido com base no endereço IP do usuário. Quando a configuração do GDPR estiver ativada, essa configuração será bloqueada e, portanto, o sinalizador precisará ser definido manualmente por seus visitantes.
Usando um pequeno snippet de código JavaScript, você pode definir a bandeira para um país padrão por um número para não violar o contrato do GDPR e, ao mesmo tempo, economizar uma etapa para o usuário. Mostraremos a você como fazer isso neste tutorial.
Configuração do formulário
Primeiro, para fins deste tutorial, presumiremos que você já ativou a configuração GDPR do WPForms. Se precisar de mais ajuda com isso, consulte esta documentação.
Depois que a configuração do GDPR estiver ativada, é hora de adicionar um Smart Phone ao seu formulário.
Agora que o campo foi adicionado, você também pode adicionar o campo do formulário do Acordo do GDPR.
Configuração do sinalizador padrão
Agora é hora de adicionar o seguinte trecho de código ao seu site. Se você não tiver certeza de onde e como adicionar snippets ao seu site, consulte 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' );
// 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 );
O código acima procurará o options.initialCountry = 'SZ'; e definir a bandeira desse país.
Se precisar de ajuda para encontrar o código de país correto para o qual deseja definir sua bandeira, dê uma olhada nesta página para encontrar o número correto.
Agora, quando a página for carregada, ela definirá automaticamente a bandeira no campo.
Você gostaria de restringir também os países em um campo de Smart Phone? Dê uma olhada em nosso tutorial sobre Como restringir países dentro de campos de formulários Smart Phone.
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 Page Break, você também deverá usar o snippet deste tutorial.
P: Como posso limitar a exibição de apenas alguns países?
A: Se você quiser aceitar apenas determinados países, use esse snippet. Em nosso exemplo, verificamos o código de duas letras do país para obter os códigos corretos para o EUA e Grã-Bretanha e os colocou dentro do options.onlyCountries linha de 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' );
// 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 ativar meus "países preferidos no topo da lista?
R: Para mostrar os países que você prefere no topo da lista, use este snippet.
/**
* 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' );
// 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' );