Fun with Forms: One Form to Rule them All!

Wouldn't it be cool if you could dynamically have an image appear depending on the country the end user is viewing the form?

I thought so, so I created this cool sample form to show what can be achieved with a little JavaScript and CSS in Nintex Forms.

For this example, let's imagine that we have an office in the United States and an office in Australia (oddly enough, Nintex does!).

When viewed in the United States:

When viewed in Australia:

To accomplish this, I used a free geoip service and stored the output of the 'country' data to a variable. The variable would then be used to determine the appropriate CSS class to apply to the label control used to populate the image.

The label control has HTML embedded to apply a ID and Class.

The below JavaScript can be placed in the 'Custom JavaScript' section in Nintex Forms Settings:

1. NWF$(document).ready(function () {
2.     NWF$.getJSON("http://freegeoip.net/json/", function (data) {
3.         var country = data.country_name;
4.         var ip = data.ip;
5.       
6.         NWF$('#showCountry').text(country);
7.     
8.         switch (country) {
9.             case "United States":
10.                NWF$('#testBackground').addClass('seattle').removeClass('default');
11.                 break;
12.             case "Australia":
13.                 NWF$('#testBackground').addClass('apac').removeClass('default');
14.                 break;
15.         }    });
16.  
17. });

The below CSS can be added in the 'Custom CSS' section in Nintex Forms Settings:

1. .apac {
2. background-image: url('http://www.nintex.com/~/media/corporate/images/sections/platforms/nintex-products-connect-to-content.ashx?h=153&la=en&w=446');
3. }
4. .seattle {
5. background-image: url('http://www.nintex.com/~/media/corporate/images/sections/platforms/nintex-products-on-premises-cloud-hybrid.ashx?h=232&la=en&w=312');
6. }