Spectra form removing country field from phone number field

rix, I did a quick test, but didn’t work, but I do appreciate your help. Right now the issue is not that big of a deal for me, but in the near future will play around more with your script to see if I can get it to work

Did you add the ID of the form in the place were i have “xxxxxxxx” in the code?

lol, of course not! Just copy and pasted what you had. How do I find the ID?

• This reply was modified 3 weeks ago by cancunmanny.

Ok, so I am 95% of the way there!

While on the edit screen of the page I want to modify Shift+Alt+Ctrl+M will take me out of visual editor and put me in code editor,, with Ctrl+F I get the “find” function where I put “uagb-form-country” and click on search. On my home page I have two forms, both use phone number, so it found two instances, copied both of the codes.

Shift+Ctrl+Alt+M takes us back to visual editor

I copied your script twice. On the fist one put the ID of the first form, on the second one I put the ID of the second. The top one worked, the bottom didn’t. To troubleshoot, I cut the first script, and saved. This time the bottom one worked. Seems I can’t run the script twice, even if I create to separate HTML blocks. Also tried removing the /script script between the two scripts, and same results.

Is there a way to modify both forms, or can only do one?

Also did figure out a way to modify your code a bit. I took out USA (put it back in), and also Even with MX +52 when seeing on cell phone it got truncated, so now it just reads +52, and if you click the down arrow option, you get to select USA/Canada (do have a friend that lives here but still uses his USA number as his main number)

@rixwp22 So I figured it out! Well actualy chatGPT figured it out for me. (I am splurging this month and paid for one month of ChatGPT)

<script>
// Define the IDs of your dropdown elements
const formIds = ['uagb-form-country-xxxxxxxx', 'uagb-form-country-yyyyyyyy']; // Replace 'xxxxxxxx' and 'yyyyyyyy'  with the actual ID of the forms

// Define the values to keep
const allowedValues = ['+52', '+1']; // Mexico (+52) and USA / Canada (+1)

// Loop through each form ID and apply the same logic
formIds.forEach(id => {
    // Select the dropdown element by ID
    const selectElement = document.getElementById(id);

    if (selectElement) {
        // 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 = '+52'; // Update the display text for Mexico
        }

        // Set Mexico as the default selected option
        selectElement.value = '+52'; // Set Mexico as default
    }
});

</script>

@cancunmanny That’s great! Glad it worked out for you. As a TIP! For the phone version, I would say consider using maybe a smaller font or you can also modify the padding and margin to fit the content better.
BTW, ChatGPT is great, but also free, I don’t think you would have to pay for it, but your call.

For everyone else…
I actually had the request today to remove the country selection from the form, so I had to modify the code I used previously. This would help everyone looking to not display the country list, set a preferred country code (mine is ‘+52’ for Mexico) and also to only show the phone input field and display it at 100%.

Here is the code:

// Select the input element
const inputElement = document.querySelector('.uagb-forms-phone-input');

// Hide the select element
const selectElement = document.getElementById('uagb-form-country-xxxxxxxx');
selectElement.style.display = 'none'; // Hides the select dropdown

// Set Mexico as selected
selectElement.value = '+52'; // Ensure Mexico is selected

// Set width to 100% with !important
inputElement.style.setProperty('width', '100%', 'important');

Don’t forget to change the ID value for your SELECT element, that you can get using the “Inspect” option on your browser and selecting the form.

If any of you have questions, I’ll be happy to help. Enjoy!

• This reply was modified 2 weeks, 6 days ago by rixwp22.

@rixwp22 Thanks for sharing the code. I think I will leave the +52 in, but will copy and paste your code on my website notes folder in case I change my mind in the future. I am pretty much 50 years old, and do happen to have an BS in IT with specialization in programming and web design, but that was like 25 years ago and I never worked directly in a related field. Heck my web design courses were using Frontpage LOL

I had been using ChatGPT for free for a few months now, but the 3 images per day was making things difficult for me. I know the basics of photoshop and gimp, and the basics of video editing, but by no means would I say I know “how to use” them tools. Figured I would pay the $20 for one month and get unlimited pictures created which I will be able to use down the road as I create more posts. I had forgotten that ChatGpt does code too, but while browsing as I was going to pay I noticed it does help with code.

I am basically a one man band. I want to start making money on something I really enjoy, setting up smart homes, building/fabricating my own devices, etc. But in order to get clients I need a decent enough website. Did the best I could.

I did have ChatGPT take a look at my site, and pretty much told me it is functional but lacking in my aspects, especially on the mobile version which seems is how most of my clients will actually find me. I rarely use my phone to search and learn, but seem I have become the minority. Heck here in Cancun I am the only person I know that actually uses his computer as his TV.

Hopefully soon I will get some clients, and when I can afford to I plan to have someone improve my website mobile version. Should be relatively inexpensive using someone from Fiverr. Which is why I wrote all this. You seem to know your way around wordpress. If I wanted to hire a “stranger” to work on my mobile side of the website, would there be a “safe” way to do it? Would it be possible via WP to give someone enough access to modify the site, but not enough access to create harm to my site? (like put in backdoors and suck)

Hi @cancunmanny – You are welcome!

Thank you for sharing, I’m more or less on the same boat as you, with 2 differences, I’m 39 and have a job right now, but I’m starting to build my own site to start looking for clients (Wink-wink), on anything Digital Marketing, web, graphics design, photography, audio and video editing, podcast-anything, and more.

Coming back to your question, yes! You can setup a new user that can only have certain permissions, and WP lists all the items that you can allow and deny access to. Really simple.

If you are looking for someone to help you out with your page, message me via LinkedIn, here is my link: https://mx.linkedin.com/in/ricardo-merino-almada

Cachinillo! Yo vivi en 1261 Creston, casi en esquina con Del Rocio en playas de tij. Ahi hice la ultima mitad de 6to y primero y segundo de secundaria en el Colegio Ingles. Dicen que Playas De tj esta irreconocible, pero por lo que veo por google maps, la casa donde viví solo cambio de color!

We did move to San Diego where I did all of my HS and started college at SDSU, that is why I am much better at typing in english.

Many many years ago I played with linked in. I don’t remember what the issue was but I closed my acct and promised myself I would never join them again. In order to see your contact info I have to first give them my personal info.

Would like to be in direct contact. The site I am working on is CasaSeguraInteligente.com so it should be pretty easy for you to make contact with me