Si desidera impostare un flag predefinito sul campo Smart Phone quando il GDPR è abilitato? Quando si utilizza il campo del modulo Smart Phone, il flag predefinito del paese tenterà di essere impostato in base all'indirizzo IP dell'utente. Quando l'impostazione GDPR è abilitata, questa impostazione è bloccata e quindi il flag deve essere impostato manualmente dai visitatori.
Utilizzando un piccolo snippet di codice JavaScript è possibile impostare la bandiera di un paese predefinito da un numero, in modo da non violare l'accordo GDPR e allo stesso tempo risparmiare all'utente un passaggio. In questo tutorial vi mostreremo come fare.
Impostazione del modulo
Innanzitutto, ai fini di questo tutorial, si presume che abbiate già attivato l'impostazione GDPR di WPForms. Se avete bisogno di ulteriore assistenza, consultate questa documentazione.
Una volta attivata l'impostazione per il GDPR, è il momento di aggiungere uno Smart Phone al modulo.
Ora che il campo è stato aggiunto, è possibile aggiungere anche il campo del modulo Accordo GDPR.
Impostazione del flag predefinito
Ora è il momento di aggiungere il seguente snippet di codice al vostro sito. Se non sapete dove e come aggiungere gli snippet al vostro sito, consultate 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' );
// 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 );
Il codice qui sopra cercherà l'elemento options.initialCountry = 'SZ'; e impostare la bandiera di quel Paese.
Se avete bisogno di aiuto per trovare il codice paese corretto su cui impostare la vostra bandiera, consultate questa pagina per trovare il numero corretto.
Ora, al caricamento della pagina, verrà impostato automaticamente il flag sul campo.
Volete limitare i Paesi anche per un campo Smart Phone? Date un'occhiata al nostro tutorial su Come limitare i Paesi nei campi del modulo Smart Phone.
Azione di riferimento
FAQ
D: Funziona su un modulo con interruzioni di pagina?
R: Se il vostro modulo ha i campi del modulo Interruzione di pagina, dovrete utilizzare anche lo snippet di questo tutorial.
D: Come posso limitare la visualizzazione di alcuni paesi?
A: Se si desidera accettare solo alcuni Paesi, si deve utilizzare questo snippet. Nel nostro esempio, abbiamo verificato il codice paese di due lettere per i codici corretti per il STATI UNITI D'AMERICA e Gran Bretagna e li ha collocati all'interno del options.onlyCountries linea di codice.
/**
* 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 );
D: Come posso abilitare i miei "paesi preferiti" in cima all'elenco?
R: Per mostrare i Paesi che preferite in cima all'elenco, utilizzate 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' );
// 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' );