There is nothing built in to the Quform plugin to do this currently but it can be done with a bit of custom coding. Add a Text element to the form, then add the following code to the WordPress theme functions.php file (or create a plugin for it).
1 23 4 5 6 7 8 910 11 12 13 14 | add_action('wp_enqueue_scripts', function () { $apiKey = 'YOUR_API_KEY'; wp_enqueue_script('google-maps', "https://maps.googleapis.com/maps/api/js?key={$apiKey}&libraries=places&callback=initAutocomplete", array(), false, true); ob_start(); ?> window.initAutocomplete = function () { new google.maps.places.Autocomplete(document.querySelector('.quform-field-1_3'), { types: ['geocode'] });}; <?php wp_add_inline_script('google-maps', ob_get_clean(), 'before'); }); |
add_action('wp_enqueue_scripts', function () {
$apiKey = 'YOUR_API_KEY';
wp_enqueue_script('google-maps', "https://maps.googleapis.com/maps/api/js?key={$apiKey}&libraries=places&callback=initAutocomplete", array(), false, true);
ob_start();
?>
window.initAutocomplete = function () {
new google.maps.places.Autocomplete(document.querySelector('.quform-field-1_3'), { types: ['geocode'] });
};
<?php
wp_add_inline_script('google-maps', ob_get_clean(), 'before');
});- On line 2, replace
YOUR_API_KEYwith your Google Maps API key - On line 9, replace
1_3with the Text element unique ID
1 2 34 5 6 7 8 9 1011 12 13 14 15 16 | function my_google_address_autocomplete() { $apiKey = 'YOUR_API_KEY'; wp_enqueue_script('google-maps', "https://maps.googleapis.com/maps/api/js?key={$apiKey}&libraries=places&callback=initAutocomplete", array(), false, true); ob_start(); ?> window.initAutocomplete = function () { new google.maps.places.Autocomplete(document.querySelector('.quform-field-1_3'), { types: ['geocode'] });}; <?php wp_add_inline_script('google-maps', ob_get_clean(), 'before'); } add_action('wp_enqueue_scripts', 'my_google_address_autocomplete'); |
function my_google_address_autocomplete()
{
$apiKey = 'YOUR_API_KEY';
wp_enqueue_script('google-maps', "https://maps.googleapis.com/maps/api/js?key={$apiKey}&libraries=places&callback=initAutocomplete", array(), false, true);
ob_start();
?>
window.initAutocomplete = function () {
new google.maps.places.Autocomplete(document.querySelector('.quform-field-1_3'), { types: ['geocode'] });
};
<?php
wp_add_inline_script('google-maps', ob_get_clean(), 'before');
}
add_action('wp_enqueue_scripts', 'my_google_address_autocomplete');- On line 3, replace
YOUR_API_KEYwith your Google Maps API key - On line 10, replace
1_3with the Text element unique ID