Möchten Sie eine Standardflagge für das Feld " Smart Phone" festlegen, wenn GDPR aktiviert ist? Wenn Sie das Smart Phone-Formularfeld verwenden, wird versucht, das Standard-Länderkennzeichen auf der Grundlage der IP-Adresse des Nutzers zu setzen. Wenn die GDPR-Einstellung aktiviert ist, ist diese Einstellung blockiert und daher muss die Flagge manuell von Ihren Besuchern gesetzt werden.
Mit einem kleinen JavaScript-Code-Snippet können Sie die Flagge durch eine Zahl auf ein Standardland setzen, so dass Sie nicht gegen Ihre GDPR-Vereinbarung verstoßen, sondern dem Nutzer gleichzeitig einen Schritt ersparen. Wir zeigen Ihnen in diesem Tutorial, wie Sie dies erreichen.
Einrichten des Formulars
Für die Zwecke dieses Tutorials gehen wir zunächst davon aus, dass Sie die WPForms-GDPR-Einstellung bereits aktiviert haben. Wenn Sie weitere Unterstützung benötigen, lesen Sie bitte diese Dokumentation.
Sobald die Einstellung für GDPR aktiviert ist, ist es an der Zeit, ein Smart Phone zu Ihrem Formular hinzuzufügen.
Nachdem das Feld hinzugefügt wurde, können Sie nun auch Ihr Formularfeld für die DSGVO-Vereinbarung hinzufügen.
Setzen der Standardflagge
Jetzt ist es an der Zeit, das folgende Code-Snippet zu Ihrer Website hinzuzufügen. Wenn Sie nicht sicher sind, wo und wie Sie Snippets zu Ihrer Website hinzufügen, lesen Sie bitte dieses 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 );
Der obige Code sucht nach dem options.initialCountry = 'SZ'; und setzen Sie die Flagge für dieses Land.
Wenn Sie Hilfe bei der Suche nach dem richtigen Ländercode benötigen, schauen Sie bitte auf dieser Seite nach, um die korrekte Nummer zu finden.
Wenn die Seite geladen wird, wird die Flagge automatisch auf das Feld gesetzt.
Möchten Sie auch Länder für ein Smart Phone-Feld einschränken? Werfen Sie einen Blick auf unser Tutorial über die Einschränkung von Ländern in Smart-Phone-Formularfeldern.
Referenz Aktion
FAQ
F: Funktioniert das auch bei Formularen mit Seitenumbrüchen?
A: Wenn Ihr Formular die Formularfelder für den Seitenumbruch enthält, sollten Sie auch das Snippet aus diesem Tutorial verwenden.
F: Wie kann ich verhindern, dass nur bestimmte Länder angezeigt werden?
A: Wenn Sie nur bestimmte Länder akzeptieren wollen, verwenden Sie dieses Snippet. In unserem Beispiel, wir haben den aus zwei Buchstaben bestehenden Ländercode überprüft für die richtigen Codes für die USA und Großbritannien und platzierte sie im Inneren der options.onlyCountries Code-Zeile.
/**
* 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 );
F: Wie kann ich meine "bevorzugten Länder an den Anfang der Liste setzen?
A: Um die von Ihnen bevorzugten Länder am Anfang der Liste anzuzeigen, verwenden Sie stattdessen dieses 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' );