Code Snippets PHP WordPress

The country code drop-down list doesn’t appear in the Elementor popup (country & phone field contact form 7)

By on Sunday, March 12, 2023
Country phone field contact form 7

First of all, I am very thankful for all my plugin subscribers. I am receiving so much love and appreciation for my WordPress plugin. https://wordpress.org/plugins/country-phone-field-contact-form-7/

I expect this love will continue as my efforts continue to make this plugin more useful.
So let’s come to the most asked query on my plugin support. That is
The country code drop-down list doesn’t appear in the Elementor popup”

Let me share the reason and solutions for it.

Reason: Elementor popup content was initially hidden. So JavaScript code is not able to detect the popup form field and that’s why the country drop-down field is not initialized.

Solution

So we need to re-initialize the field with the Elmentor popup event. You can discover the Elementor event by this link. https://developers.elementor.com/elementor-pro-2-7-popup-events/

We are going to use this paticular event.“elementor/popup/show”

NOTE: You must have basic JavaScript implementation knowledge before applying code on your live website.

1. Edit your contact form and assign a unique id to your phone number field. For more detail check the screenshot.
In our example “popup-phone” is unique id. You can change it but similar id you have to replace it into your JavaScript code too.

2. After login into your WordPress admin dashboard. Add a new custom JavaScript code under the Elementor. For more detail, check the screenshot.

3. Add the following custom code. After adding to the code, don’t forget to save the code. Please refer screenshot as well.

<script type='text/javascript'>
	jQuery(document).ready(function () { 
		jQuery(document).on('elementor/popup/show', () => {
		if(jQuery('#popup-phone').length > 0) {
			jQuery('#popup-phone').intlTelInput({
				autoHideDialCode: false,
				autoPlaceholder: "off",
				nationalMode: false,
				separateDialCode: false,
				hiddenInput: "full_number",
				initialCountry: "us",	
			});
						
			var hiddenInput = jQuery('#popup-phone').attr('name');
			
			jQuery("input[name=" + hiddenInput + "-country-code]").val(jQuery('#popup-phone').val());
		
			jQuery('#popup-phone').on("countrychange", function() {
				// do something with iti.getSelectedCountryData()
				//console.log(this.value);
				var hiddenInput = jQuery(this).attr("name");
				jQuery("input[name="+hiddenInput+"-country-code]").val(this.value);
			
			});
			jQuery('#popup-phone').on("keyup", function () {
				var dial_code = jQuery(this).siblings(".flag-container").find(".country-list li.active span.dial-code").text();
				if(dial_code == "")
				var dial_code = jQuery(this).siblings(".flag-container").find(".country-list li.highlight span.dial-code").text();
				var value   = jQuery(this).val();
				jQuery(this).val(dial_code + value.substring(dial_code.length));
			});
		}
	})
});
</script>

4. Try and test the applied code. Just refresh your browser, and clear all cache if you have any active cache plugins.

Drawaback of this code.

The auto country selection code will not work. You have to choose the default initial country. You can achieve it. But it needs more custom code.

0
Related Posts