Résumé IA
Souhaitez-vous définir un drapeau par défaut sur le champ Téléphone intelligent lorsque le RGPD est activé ? Lorsque vous utilisez le champ de formulaire Téléphone intelligent, le drapeau du pays par défaut tentera d'être défini en fonction de l'adresse IP de l'utilisateur. Lorsque le paramètre RGPD est activé, ce paramètre est bloqué et le drapeau devrait donc être défini manuellement par vos visiteurs.
En utilisant un petit extrait de code JavaScript, vous pouvez définir le drapeau sur un pays par défaut par un numéro afin de ne pas enfreindre votre accord RGPD tout en faisant gagner du temps à l'utilisateur. Nous vous montrerons comment y parvenir dans ce tutoriel.
Configuration du formulaire
Tout d'abord, dans le but de ce tutoriel, nous supposerons que vous avez déjà activé le paramètre RGPD de WPForms. Si vous avez besoin d'aide supplémentaire à ce sujet, veuillez consulter cette documentation.
Une fois le paramètre RGPD activé, il est temps d'ajouter un Téléphone intelligent à votre formulaire.
Maintenant que le champ est ajouté, vous pouvez également ajouter votre champ de formulaire Accord RGPD.
Définition du drapeau par défaut
Il est maintenant temps d'ajouter l'extrait de code suivant à votre site. Si vous n'êtes pas sûr où et comment ajouter des extraits à votre site, veuillez consulter ce tutoriel.
/**
* 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 );
Le code ci-dessus recherchera "options.initialCountry = 'SZ';" et définira le drapeau pour ce pays.
Si vous avez besoin d'aide pour trouver le code de pays correct que vous souhaitez définir pour votre drapeau, veuillez consulter cette page pour trouver le numéro correct.
Maintenant, lorsque la page se charge, le drapeau sera automatiquement défini sur le champ.
Souhaitez-vous également restreindre les pays pour un champ Téléphone intelligent ? Consultez notre tutoriel sur Comment restreindre les pays dans les champs de formulaire de téléphone intelligent.
Action de référence
FAQ
Q : Cela fonctionnera-t-il sur un formulaire avec des sauts de page ?
R : Si votre formulaire contient les champs de formulaire Saut de page, vous voudrez alors aussi utiliser l'extrait de ce tutoriel également.
Q : Comment puis-je limiter l'apparition de certains pays seulement ?
R : Si vous ne souhaitez accepter que certains pays, vous utiliseriez cet extrait. Dans notre exemple, nous avons vérifié le code pays à deux lettres pour les codes corrects des États-Unis et de la Grande-Bretagne et les avons placés dans la ligne de code 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 );
Q : Comment puis-je activer mes « pays préférés en haut de la liste » ?
R : Pour afficher les pays que vous préférez en haut de la liste, utilisez plutôt cet extrait.
/**
* 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' );