Adding Javascript (Advanced)

For those who have experience of using Javascript, then you are able to add javascript to a form. This enables you to make the interactions with the infoodle form more flexible and create a more customised experience for your users.

The CSS Entry Box in the form build area is where you are able to add the javascript. Because infoodle places the contents of this box in the header area, within <style> tags, then you can use this to your advantage by closing and reopening the style tags - and adding your Javascript in between. e.g.

</style>
<script>
//place your javascript code here
function userPageLoaded() {
  //called by infoodle once the page has been fully loaded.
}
</script>
<style>

Note that we have jquery available once the form is loaded. The final call after the form has been loaded and infoodle has setup everything it needs is to call the function userPageLoaded(), so put your code in this function to start any features you need.

This example shows you how to execute the code once all the associated files are loaded and will change the label that ends with _town to State / Region, and switch the state field to be after the city. Note: In general this isnt necessary because infoodle presents the address format according to the country of the site.

</style>
<script>
function userPageLoaded() {
    window.addEventListener( 'load', function(){
        $('.primary_address label[name*="_town"]').html('State / Region');
        $('.primary_address label[name*="_city"]').html('City / Town');
        var state = $('.primary_address label[name*="_town"]').parents('.entry_holder').detach();
        $('.primary_address label[name*="_city"]').parents('.entry_holder').after(state);
    });
}
</script>
<style>

Each part of the form is identified with classes, IDs and names in order for you to identify the specific area you want to work on. By inspecting the published form you will be able to find the ones you want.