KI-Zusammenfassung
Möchten Sie eine Standardflagge für das Feld Smart Phone festlegen, wenn GDPR aktiviert ist? Bei Verwendung des Smart Phone-Formularfelds wird versucht, die Standard-Länderflagge basierend auf der IP-Adresse des Benutzers festzulegen. Wenn die GDPR-Einstellung aktiviert ist, wird diese Einstellung blockiert und die Flagge muss daher von Ihren Besuchern manuell gesetzt werden.
Mit einem kleinen JavaScript-Code-Snippet können Sie die Flagge auf ein Standardland setzen, um nicht gegen Ihre GDPR-Vereinbarung zu verstoßen und gleichzeitig dem Benutzer einen Schritt zu ersparen. In diesem Tutorial zeigen wir Ihnen, wie Sie dies erreichen.
Einrichtung des Formulars
Zunächst gehen wir für dieses Tutorial davon aus, dass Sie die WPForms GDPR-Einstellung bereits aktiviert haben. Wenn Sie weitere Unterstützung hierbei benötigen, lesen Sie bitte diese Dokumentation.
Sobald die Einstellung für GDPR aktiviert ist, ist es an der Zeit, Ihrem Formular ein Smart Phone hinzuzufügen.
Nachdem das Feld hinzugefügt wurde, können Sie nun auch Ihr GDPR Agreement-Formularfeld hinzufügen.
Festlegen der Standardflagge
Nun ist es an der Zeit, den folgenden Code-Snippet auf Ihrer Website einzufügen. Wenn Sie nicht sicher sind, wo und wie Sie Snippets auf Ihrer Website einfügen können, 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' );
$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 );
Der obige Code sucht nach options.initialCountry = 'SZ'; und legt die Flagge für dieses Land fest.
Wenn Sie Hilfe beim Finden des richtigen Ländercodes benötigen, den Sie für Ihre Flagge festlegen möchten, schauen Sie bitte auf dieser Seite nach der richtigen Nummer.
Wenn die Seite nun geladen wird, wird die Flagge im Feld automatisch gesetzt.
Möchten Sie auch Länder für ein Smart Phone-Feld einschränken? Schauen Sie sich unser Tutorial an So schränken Sie Länder in Smart Phone-Formularfeldern ein.
Referenzaktion
FAQ
F: Funktioniert dies auch bei Formularen mit Seitenumbrüchen?
A: Wenn Ihr Formular Seitenumbruch-Formularfelder enthält, dann möchten Sie auch den Snippet aus diesem Tutorial verwenden.
F: Wie kann ich nur bestimmte Länder anzeigen lassen?
A: Wenn Sie nur bestimmte Länder akzeptieren möchten, würden Sie diesen Snippet verwenden. In unserem Beispiel haben wir den zweibuchstabigen Ländercode für die richtigen Codes für die USA und Großbritannien überprüft und sie in die Zeile options.onlyCountries des Codes eingefügt.
/**
* 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 );
F: Wie kann ich meine „bevorzugten Länder an erster Stelle der Liste“ aktivieren?
A: Um die Länder, die Sie bevorzugen, an erster Stelle der Liste anzuzeigen, verwenden Sie stattdessen diesen 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' );