ClickDimensions - Editing WebContent Forms for increased appearance and performance

Using Click Dimensions Web Content you can quickly create forms that connect to your Dynamics CRM system. However despite adding more formatting options in recent ClickDimensions releases you still cannot change much of how the form looks. In this blog I will show you how to host these forms on your own server, allowing you to change everything about how the form looks, enable touch support for the captcha slider and increase performance.

To start editing the form first we need to get the html that ClickDimensions has created. To this open up the Web Content record for the form you want to edit and click Design in the ribbon. Then select Embed from the Form Editor window that opens. This will open the Embed dialog, the Embed as Link option should be selected by default which is what we want. Click the link that it gives you to open it in your browser.

Now that the form is open right click and select view source (Safari mac users may have to enable the develop to get this option). This will give you the html code for the form. Select all the code then copy and paste it into your editor of choice. In the Head section of the code is where most of the javascript and css files are referenced however the ClickDimensions tracking snippet is located near the end of the body as is required. If you have included a captcha on your form, the javascript and css files for it are located in the middle of the body right above where the html code for the captcha is, you can safely move it up to where the rest of the javascript and css are if you prefer.

In the body section there is a form with the id “clickdimensionsForm”. This contains firstly a number of hidden input fields which store details about your form such as your domain,in particular one that can get very large that stores what you set for the Confirmation Text. It is important that you do not change these values.

Next however is a table. This table is where the forms fields and submit button are located. This table can be changed to for example a div based layout, as long as the code for the fields themselves are not altered. The code for each field and the submit button are all contained in divs inside table cells, extracting all the divs from inside <td> tags will get you all the fields etc intact.

HTML Code for a text field

You may have noticed that depending on where you are in the world, your form loads slowly the first time. This is because the javascript and css files are hosted on ClickDimensions servers, which can be very far away from your location. One easy change is to switch the jquery and jquery UI javascript libraries from being hosted by ClickDimensions to using a CDN like Google, loading the jquery library from the ClickDimensions server takes almost 11 seconds in New Zealand. Many users will have the Google CDN hosted versions of jquery cached in their browsers as it is used on many sites, which is a big bonus. To use it change the jquery and jquery UI script tags to:

and

You can also host the other files in the head section by first downloading the files by copying the urls contained in the href or src attributes to your browser then saving them.

Speed Test of a ClickDimensions form from New Zealand using www.webpagetest.org

By default the captcha that can be added to ClickDimensions form does not support touch, which is problemtic for users on an iPhone for example, as they cannot drag the slider. However this is easy to fix. First you need to download jquery.ui.touch and host it on your website. Then add a script tag referencing it to the form above the javascript for the captcha, which is called QapTcha.jquery.js, like this:

Remember to change the script src to the url where you are hosting the files.

When you are happy with the changes you have made to your form, host it on your webpage and browse to it, fill it out and make sure it pulls data into CRM correctly. You can embed your form into pages using a modified version of the code that the Embed as Iframe embed option gives you, changing the src attribute to point to your hosted form ie:

You may need to tweak the width and height values depending on the changes you made to the size of the form.

Now with these changes your forms are now more attractive, faster and have mobile support!