Spectra form removing country field from phone number field
-
I am using spectra forms. I want to use the Phone field but without the country selection. Is there a way to solve this?
-
Very strange that you don’t have an option to disable or remove it completely. Why would someone use the country code if most of the times the site is meant for one country. I would disable the country code only when someone needs it they can activate it. Now it’s activated on default. Still, most of the times the local services would use this form field. There are exception though like services used international like digital marketing, web design etc. Hope you can get a solution for this soon. I did disable the element but it doesnt look good on desktop and especially not on mobile. Another option would be to use the text field but their is no validation which is needed. users can now also input text which i dont like. Kadence forms does have this feature. thank you
Ps i managed to disable the country code but it still has a column over it and it pushes the text of another field down, please have a look at screenshot: https://ibb.co/yhN3Gkf
no not remove only disable by usig the following css:
.uagb-forms-input .uagb-form-phone-country {
display: none;
}If you know how to remove it that would be great. any help appreciated because i really want yo use your form. its simple but fast which i like alot
I am using the free version of Spectra, so I can’t complain too much right? However I too think it would make sense to not have country code. It makes much more sense to “turn it on” for those who need it, as the majority don’t need it.
Also for those who mentioned it defaults to UK. When you are editing your page you can select your country and save.
My biggest issue is that it doesn’t look right. The country code fields always gets truncated. Since the actual phone number is usually 10 digits, seems the phone number field could be a bit smaller, to allow the country code to be bigger
I live in Mexico, a relatively short country name, As you can see everything after Mexico just looksl ike garbage. On cell phone it looks even worse, since it only shows “Mexi” but with the down arrow thing on top of the i. On the picture you can clearly see how it would make more sense for the country code field to be longer, and the phone number field to be shorter.
In fact, the more I think about it, the less sense it makes. Some country names are very long! I think a list of just the country code numbers should be enough. if I am filling out a form for someone to contact me I should know my country code. I think very few people would have to look up their own country code by name so that they could properly enter it.
Again, I know I am using the service for free, so not demanding anything. However I am sure you guys are hoping to offer the best product you can, and this simple change would add value to your product.Hey everyone, I just had the same issue and came upon this post, I’m sure that maybe most of you either gave up or just used something else, but for those that are still looking for a solution, here is what I did.
I decided to spend about 30 min looking through the code for the plug-in to find myself just loosing my mind with the fact that I could not fin the list of countries, but in my years of building sites, when I cannot find the code, I just modify what I don’t like or want to change.
For this case, I decided to create JS code and add it to the bottom of the page that I have the form. The code does the following:- Finds the form using the ID
- I provide the list of allowed country codes. For me: [‘+52’, ‘+1’], I only needed Mexico and USA.
- Then, it will go through the list of all the countries listed and remove all that do not match those marked as allowed. (Don’t worry, it’s super fast and takes less than 0.1s to execute, you won’t even see it.)
- And for the user @cancunmanny, I also added a code that would change the innerHTML from “Mexico” to “MX” to keep it looking nice, and assign it as default.
Here is the code with comments:
<script>
// Select the dropdown element
const selectElement = document.getElementById('uagb-form-country-xxxxxxxx');
// Define the values to keep
const allowedValues = ['+52', '+1']; // Mexico (+52) and USA / Canada (+1)
// Loop through all options and remove those not in allowedValues
for (let i = selectElement.options.length - 1; i >= 0; i--) {
const option = selectElement.options[i];
if (!allowedValues.includes(option.value)) {
selectElement.remove(i);
}
}
// Change the inner HTML of the Mexico option to "MX +52"
const mexicoOption = Array.from(selectElement.options).find(option => option.value === '+52');
if (mexicoOption) {
mexicoOption.innerHTML = 'MX +52'; // Update the display text for Mexico
}
// Set Mexico as the default selected option
selectElement.value = '+52'; // Set Mexico as default
</script>I added this code in a HTML block at the bottom of the page. I hope this helps any one that is looking for a solution.
Ohh yeah, I did test the form of course and works perfectly. The code executes after the DOM has fully loaded.
For the Spectra guys (@mohsinbsf), please add a section on the settings page to choose what countries to display or select the default and hide if only one country is selected and just keep the 10 digit phone field visible at 100% width like the other fields. ??
If anybody has any questions, feel free to ask. Keep on rockin!
- You must be logged in to reply to this topic.
