ClickDimensions – Jazzing up the form with the code editor

Problem: I create a form using ClickDimensions but its quite basic and the formatting does not match our website, what is possible, how can I make it look a little more professional?

Well with the latest release and the introduction of the code editor you can now update the CSS of the form and thus jazz it up a little, so how do I do this?

Lets take the following basic example from Intergen.co.nz events page where we use ClickDimensions forms for capturing event registrations. Our forms look like this and we are not using form capture.
Intergen event form

 

So in this simple example we have nice background image, some padding and the font matches our website. So how did we do this?

Simple, follow these steps:

  1. Create a new form or open an existing form – settings ->Web Content
  2. Click on the Design button to enter the design mode
  3. If this is a new form drag and drop the fields on to the form, like below:
  4. Form Editor
  5. Once you have added your fields save and then click on the Code Editor button
  6. From here you can adjust the CSS and add JavaScript to jazz up your form.
  7. For this simple example we just add a background image and some padding.
  8. The default CSS for the body is as follows:
    {
    padding:0px;
    padding:0px;
    }
  9. We simply change the body to:
    {
    margin-top:50px;
    margin-left:50px;
    margin-right:50px;
    margin-bottom:50px;
    padding:0px;
    background: url(“http://<<insert your public facing image location>/bgAirMail.png”) no-repeat scroll 0 0 transparent;
    }
  10. As below:
  11. Code editor
  12. Now when you select refresh you will see a margin placed around the form as well as the image you chose as the background displayed.
  13. Save and publish the form and you are up and running.

So via the code editor on a form I can do some cool things to jazz up my standard form and make it a bit more interactive, use the HTML preview to help identify the CSS tags, you do need some basic knowledge of CSS to do this but lots of resources on the web.

For more information see and explanation of how you reference other areas of the form see http://blog.clickdimensions.com/2014/01/new-feature-customize-your-clickdimensions-forms-with-css-and-javascript.html

 

 

 

 

 

 

 

Advertisements

2 Responses

  1. […] ClickDimensions – Jazzing up the form with the code editor […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s