Adding javascript to a form

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
</script>
<style>


Note that we have jquery available once the form is loaded, so this example shows you how to execute the code once all the associated files are loaded. this 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>
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.