¿Desea establecer una bandera por defecto en el campo Smart Phone cuando GDPR está activado? Cuando se utiliza el campo de formulario Smart Phone, el indicador de país predeterminado intentará establecerse en función de la dirección IP del usuario. Cuando la configuración de GDPR está activada, esta configuración está bloqueada y, por lo tanto, la bandera tendría que ser establecida manualmente por sus visitantes.
Usando un pequeño fragmento de código JavaScript puede establecer la bandera a un país por defecto por un número por lo que no está en violación de su acuerdo GDPR pero ahorrando al usuario un paso al mismo tiempo. Le mostraremos cómo lograrlo con este tutorial.
Configuración del formulario
En primer lugar, a efectos de este tutorial, supondremos que ya ha activado la configuración GDPR de WPForms. Si necesita más ayuda con esto, por favor revise esta documentación.
Una vez activada la configuración para GDPR, es hora de añadir un Smart Phone a su formulario.
Ahora que el campo está añadido, puede añadir también el campo del formulario del Acuerdo GDPR.
Fijar la bandera por defecto
Ahora es el momento de añadir el siguiente fragmento de código a su sitio. Si no está seguro de dónde y cómo agregar fragmentos a su sitio, por favor 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' );
// 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 buscará el options.initialCountry = 'SZ'; y fijar la bandera de ese país.
Si necesita ayuda para encontrar el código de país correcto en el que desea fijar su bandera, eche un vistazo a esta página para encontrar el número correcto.
Ahora, cuando se cargue la página, se establecerá automáticamente la bandera en el campo.
¿Le gustaría también restringir países para un campo de Teléfono Inteligente? Eche un vistazo a nuestro tutorial sobre Cómo restringir países dentro de los campos de formulario de Smart Phone.
Acción de referencia
PREGUNTAS FRECUENTES
P: ¿Funcionará en un formulario con saltos de página?
R: Si su formulario tiene los campos de formulario de salto de página, deberá utilizar también el fragmento de este tutorial.
P: ¿Cómo puedo limitar que sólo aparezcan determinados países?
A: Si sólo desea aceptar determinados países, utilice este fragmento. En nuestro ejemplo, hemos comprobado el código de país de dos letras para obtener los códigos correctos del EE.UU. y Gran Bretaña y los colocó dentro del options.onlyCountries línea 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: ¿Cómo puedo habilitar mis "países preferidos en la parte superior de la lista?
R: Para mostrar los países que prefiera al principio de la lista, utilice en su lugar este fragmento.
/**
* 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' );