Resumo de IA
Deseja definir uma bandeira padrão no campo Telemóvel quando o RGPD estiver ativado? Ao usar o campo de formulário Telemóvel, a bandeira do país padrão tentará ser definida com base no endereço IP do utilizador. Quando a configuração do RGPD estiver ativada, esta configuração é bloqueada e, portanto, a bandeira precisaria ser definida manualmente pelos seus visitantes.
Usando um pequeno trecho de código JavaScript, pode definir a bandeira para um país padrão para não violar o seu acordo RGPD, mas ao mesmo tempo poupar um passo ao utilizador. Mostraremos como conseguir isto com este tutorial.
Configuração do formulário
Primeiro, para efeitos deste tutorial, presumiremos que já ativou a configuração RGPD do WPForms. Se precisar de mais assistência com isto, revise esta documentação.
Assim que a configuração para RGPD estiver ativada, é hora de adicionar um Telemóvel ao seu formulário.
Agora que o campo foi adicionado, pode também adicionar o seu campo de formulário Acordo RGPD.
Definir a bandeira padrão
Agora é hora de adicionar o seguinte trecho de código ao seu site. Se não tem a certeza 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 precisar de ajuda para encontrar o código de país correto para o qual deseja definir a sua bandeira, por favor, consulte esta página para encontrar o número correto.
Agora, quando a página carregar, a bandeira será automaticamente definida no campo.
Deseja também restringir países para um campo Telemóvel? Dê uma vista de olhos ao nosso tutorial sobre Como Restringir Países Dentro de Campos de Formulário de Telemóvel.
Ação de Referência
FAQ
P: Isto funcionará num 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 também vai querer usar o trecho deste tutorial também.
P: Como posso limitar apenas certos países a aparecerem?
R: Se só quiser aceitar certos países, usaria este trecho. No nosso exemplo, verificámos o código de país de duas letras para os códigos corretos para os EUA e Grã-Bretanha e colocámo-los 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 ativar os meus "países preferidos no topo da lista?"
R: Para mostrar os países que 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' );