Riassunto AI
Desideri impostare una bandiera predefinita sul campo Numero di telefono quando il GDPR è abilitato? Quando si utilizza il campo modulo Numero di telefono, la bandiera del paese predefinita tenterà di essere impostata in base all'indirizzo IP dell'utente. Quando l'impostazione GDPR è abilitata, questa impostazione viene bloccata e quindi la bandiera dovrebbe essere impostata manualmente dai tuoi visitatori.
Utilizzando un piccolo snippet di codice JavaScript puoi impostare la bandiera su un paese predefinito tramite un numero in modo da non violare il tuo accordo GDPR, ma allo stesso tempo risparmiando un passaggio all'utente. Ti mostreremo come ottenere questo risultato con questo tutorial.
Configurazione del modulo
Innanzitutto, ai fini di questo tutorial, presumeremo che tu abbia già abilitato l'impostazione GDPR di WPForms. Se hai bisogno di ulteriore assistenza, consulta questa documentazione.
Una volta abilitata l'impostazione per il GDPR, è ora di aggiungere un Numero di telefono al tuo modulo.
Ora che il campo è stato aggiunto, puoi aggiungere anche il tuo campo modulo Accordo GDPR.
Impostazione della bandiera predefinita
Ora è il momento di aggiungere il seguente snippet di codice al tuo sito. Se non sei sicuro dove e come aggiungere snippet al tuo sito, consulta questo 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 );
Questo codice sopra cercherà `options.initialCountry = 'SZ';` e imposterà la bandiera per quel paese.
Se hai bisogno di aiuto per trovare il codice paese corretto per cui impostare la tua bandiera, dai un'occhiata a questa pagina per trovare il numero corretto.
Ora, quando la pagina verrà caricata, imposterà automaticamente la bandiera sul campo.
Desideri anche limitare i paesi per un campo Numero di telefono? Dai un'occhiata al nostro tutorial su Come limitare i paesi all'interno dei campi modulo Numero di telefono.
Azione di riferimento
FAQ
D: Funzionerà su un modulo con interruzioni di pagina?
R: Se il tuo modulo ha i campi modulo Interruzione di pagina, allora vorrai anche utilizzare lo snippet di questo tutorial.
D: Come posso limitare solo alcuni paesi che appaiono?
R: Se vuoi accettare solo determinati paesi, useresti questo snippet. Nel nostro esempio, abbiamo controllato il codice paese di due lettere per i codici corretti per USA e Gran Bretagna e li abbiamo inseriti nella riga di codice `options.onlyCountries`.
/**
* 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 );
D: Come posso abilitare i miei "paesi preferiti in cima alla lista?"
R: Per mostrare i paesi che preferisci in cima alla lista, usa invece questo 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' );
$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' );