The plugin doesn’t have a direct integration with forms, but using custom actions and some javascript snippets you can easily trigger changes in form values when regions or markers are clicked.
The example below includes some custom javascript code that triggers the change of a field in the form next to it.
To achieve this we must know the ID (or CSS selector) of the form field we want to change. Once we know that we can use a simple javascript snippet to change that field. Since we know the ID of the field, we wrote the following custom javascript code:
var districtField = document.getElementById("ptdistrict"); districtField.value = data.name;There are variations to the code above, using different element selectors in javascript. One alternative would be to use the querySelector which would result in code like this:
var districtField = document.querySelector("#ptdistrict"); districtField.value = data.name;So basically the first line gets the element we want to change and the second line simply assigns the ‘Name’ of the clicked region as the value of the input field. Read more about custom actions.
The code above goes into the ‘Custom Javascript Action’ when we set the ‘Click Action’ to custom.
Different forms might require different javascript code to properly change values, but this approach usually works.
Preparing your fields
In this example I used Contact Form 7. In order to make it work, I had to include autocomplete:off in the field tag. For other forms the same will probably be needed. Make sure the input you want to target has the autocomplete parameter disabled.