Auto complete postal code

Home Forums Quform WordPress Auto complete postal code

This topic is: resolved
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #32105
    starwedd
    Participant

    Thank you for providing the functions.php code for autocomplete of the address field. I originally had my site with QuForm (WordPress using Elementor) that had 2 fields that worked with autocomplete. One was the actual street address and the other field was the zip code (postal code) field which would complete upon the AutoComplete of the street address.

    While updating site colors yesterday on my form I noticed that the autocomplete disappeared for both the street address field and the postal code field. Again, thanks to your post showing how to put in the functions.php code, the street address field works but the zip code does not autofill as it used to when the street address completes.

    Is there any code that would do this? I haven’t been successful in reaching the person who setup my site so I am trying to get this to work again. My live site where the 2 fields appear at the top is 72sold.sellmyhomeasheville.com for visuals.

    Thanks in advance for any guidance you may provide.

    #32108
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #32110
    starwedd
    Participant

    Yes, thank you . My coder is in Bangladesh and was able to do so overnight. He changed the coding completely using the Snippets plugin I had downloaded so I am sharing here in case it can help anyone. I removed my API Key however I am not sure how to replace where it reads “72sold” in the code (since that is part of my website name) – Perhaps you can edit to make it usable for other Quform subscribers? I hope this is helpful as I could not locate online how to do this. See below:

    add_action( ‘wp_footer’, function () { ?>
    <script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=YOUR API KEY GOES HERE&libraries=places”></script>
    <script type=”text/javascript”>
    function initialize72sold() {
    var address72sold = document.querySelector(‘.quform-field-1_6’);
    var options = {
    types: [‘address’],
    componentRestrictions: {
    country: ‘us’
    }
    };
    autocomplete = new google.maps.places.Autocomplete(address72sold, options);
    google.maps.event.addListener(autocomplete, ‘place_changed’, function() {
    var place = autocomplete.getPlace();
    for (var i = 0; i < place.address_components.length; i++) {
    for (var j = 0; j < place.address_components[i].types.length; j++) {
    if (place.address_components[i].types[j] == “postal_code”) {
    document.querySelector(‘.quform-field-1_7’).value = place.address_components[i].long_name;
    }
    }
    }
    });
    }
    google.maps.event.addDomListener(window, “load”, initialize72sold);
    </script>
    <?php } );

    #32115
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy