Home | New Releases | New feature: Customize your ClickDimensions forms with CSS and Javascript

New feature: Customize your ClickDimensions forms with CSS and Javascript

Our new Code Editor for the Form Builder lets you further customize your ClickDimensions forms by making it easier to add in custom CSS and allowing JavaScript for the first time. This is a great feature, especially for users who may not have wanted to build their own form and use our Form Capture functionality, but still wanted more flexibility and customization options from our Form Builder.

To access the new Code Editor, just click the button in the middle of the ribbon in your Form Designer.

You'll see a window pop up with the following sections:

HTML (read only) – This allows you to see all the HTML code that we generate for your form. You can use this as a reference, especially if you like to target the ID's and classes we use in our code with your own CSS.

CSS – Here's the CSS we apply. You can edit this code or write in your own. Again, you can check our HTML and pull in the classes you'd like to customize here in order to apply changes.

JavaScript – Add JavaScript here for additional form functions.

Preview – Click the "Refresh" button to see updates based on your changes in the Preview box.

You can click "Reset" on either the CSS or JavaScript boxes to remove all changes you've made.

Arguably the most important feature here is the ability to add CSS and preview it live. (Adding CSS was possible with our HTML Component, but since there was no preview of the form, nor of the HTML, the process was significantly more arduous.)

We recommend that you be familiar with the basics of CSS and HTML before writing any code here (though of course you can always reset your changes if you need to).

That being said, here are a few common questions we get on customizing specific form features. Please note, in some cases you will need to use "!important" to see the results.

How can I change the background color of my form?

Just add the background-color property to the body. For example, body {background-color:#eee;}. This is beginner's CSS, so if you want to get more advanced or have questions there are lots of great resources available on the web.

How can I use another font for my form field labels?

You'll want to target .maxSize1, .maxSize2, and .maxSize3 together (or separately). (The numbers at the end correspond to how many columns the label spans.) Please note you may need to use the "!important" declarative.

How can I change the size or other properties of the button?

This is targeted already in the CSS for you under the ID #btnSubmit. If you add a button background image in your form, you may want to change the height, width, and color of the default text of the button here.

How can I change the alignment of the labels (especially for languages reading right to left)?

Use float:right; for your labels (.maxSize1, .maxSize2, .maxSize3).

Classes and ID's for additional features you can customize:

Class/ID/Element

Corresponding Form Feature

.requiredStar

the asterisk that shows up when a field is required

.QapTcha .dropError, .QapTcha .dropSuccess

The text underneath the CAPCHA for both the "unlock" (dropError) and "lock" (dropSuccess) messages. You can customize these separately as well.

.clickdform input

These are the text fields themselves

.clickdform select

Drop-down lists

.clickdform textarea

Textarea boxes (for multiple lines of text)

.clickdform .requiredInfo

The error messages that pop up when a required field is not filled out

Again, please remember that this should be considered a guide for those who are already familiar with CSS and HTML. There are also a lot of ways you can customize our forms and while these methods will produce the described results, you may in your own testing find solutions that work better for you.

Happy designing!

2017-05-16T18:13:25+00:00 By |New Releases|0 Comments

About the Author:

mm
The ClickDimensions marketing team is committed to helping marketers using Microsoft Dynamics 365 achieve their goals.

Leave A Comment