Creating Custom CSS Styling for ClickDimensions Forms

The ClickDimensions web content editors enable you to make numerous changes such as improving the field layout, font colors, font type, etc. However, if you need more styling options than what is provided OOB you will need to add custom CSS. I have provided some CSS examples that I have used to customize my forms.

How to find the Code Editor

Under the settings for the webform, navigate to Design > Code Editor:

Here you will be able to add custom CSS code.

Change the Checkbox Styling

**/*— Changes the width of the element —*/**

.clickdform .minSize1 {
width: 300px;
min-width: 300px;
}

**/*— Margin between checkbox and text —*/**

input[type=”checkbox”] {
margin: 10px;
}

**/*— Sometimes the checkbox appears slightly above the text, this corrects that issue —*/**

.clickdform .floatLeft {
float: none;
}

.clickdform .responsiveCell div.alignBottom div input + span {
padding-left: 10px;
}

Change the Style of Font

**/*— Font styles —*/**
span
{
font-size: 18px;
font-name: Arial !important;
color: rgba(0, 0, 0, 0.6) !important;
font-weight: bold !important;
}

Change Style of the Input Fields

**/*— Here you can change the fonts, round the field corners, and add a border.—*/**
.clickdform input[type=’text’],
.clickdform textarea,
.clickdform select
{
font-family:”Verdana” !important;
font-size:15px !important;
color: rgba(0, 0, 0, 0.6);
margin:0;
padding:2px 0;
border-radius: 12px;
border-top:1px solid #7c7c7c;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-bottom:1px solid #ddd;
}

Change Style of the Dropdowns

**/*— LIST DROPDOWN STYLE —*/**
.clickdform select
{
height:30px;
}

Change Button Styles

**/*— SUBMIT BUTTON STYLE —*/**
#btnSubmit
{
margin: 15px 0 0 0;
font-family:Verdana;
font-size:13px;
clear:both;
}

**/*— PREVIOUS BUTTON STYLE —*/**
.clickdform .WizardPrevButton{
margin: 15px 10px 0 0;
font-family:Verdana;
font-size:13px;
float:left;
}

**/*— NEXT BUTTON STYLE —*/**
.clickdform .WizardNextButton
{
margin: 15px 0px 0 0;
font-family:Verdana;
font-size:13px;
float:right;
clear:both;
}

These are just a handful of the many classes you can target to customize your ClickDimensions form. Remember to always include the !important property in order to override any previously applied attributes. Have fun experimenting and feel free to reach out to me if you have any questions!