How to Set a Default Flag on Smart Phone Field with GDPR

Introduction

Would you like to set a default flag on the Smart Phone field when GDPR is enabled? When using the Smart Phone form field, the default country flag will attempt to be set based on the user’s IP address. When the GDPR setting is enabled, this setting is blocked and therefore the flag would need to be set manually by your visitors.

Using a small JavaScript code snippet you can set the flag to a default country by a number so you’re not in violation of your GDPR agreement but saving the user a step at the same time. We’ll show you how to achieve this with this tutorial.

Setting up the form

First, for the purpose of this tutorial, we’ll presume you have already enabled the WPForms GDPR setting. If you need further assistance with this, please review this documentation.

Once the setting for GDPR is enabled, it’s time to add a Smart Phone to your form.

Add a Smart Phone form field to your form

Now that the field is added, you can now add your GDPR Agreement form field as well.

Next, add the GDPR Agreement form field to the form

Adding the code snippet

Now it’s time to add the following code snippet to your site. If you need help adding code snippets to your site, please review this 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() {
			var $el = jQuery( '.wpforms-smart-phone-field' ),
				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';
			$el.intlTelInput( options );
			// Restore hidden input name after intlTelInput is reinitialized.
			$el.siblings( 'input[type="hidden"]' ).attr( 'name', 'wpforms[fields][' + options.hiddenInput + ']' );
		} );
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_smart_phone_field_initial_country' );

This code above will look for the options.initialCountry = ‘SZ’; and set the flag for that country code of 52.

If you need help finding the correct country code you want to set your flag to, please take a look at this page to find the correct number.

Now when the page loads, it will automatically set the flag on the field.

Now a default flag will be set on the Smart Phone form field

Would you like to also style the Smart Phone field a little differently as well? Take a look at our tutorial on How to Separate Dial Code From Smart Phone Form Field Dropdown.

Action Reference: wpforms_wp_footer

FAQ

Q: Will this work on a form with Page Breaks?

A: If your form has the Page Break form fields, then you’ll want to also add this snippet as well.