Click does not provide technical support for custom code used in styling HTML/CSS for Emails and Web Content.
Click Marketing Automation's web content editors allow users to make a number of stylistic changes, such as changing the field layout, font colors, font type, etc. However, adding CSS to your record allows for many more styling options in addition to what is provided out-of-the-box. The following CSS examples can be added to your web content in the code editor in order to modify your record’s styling.
Change the Font Type to a Font that is not Provided Out-of-the-Box
The fonts we provide are web safe fonts, which are generally recognized across all browsers and email clients. If you want to use a font that we do not provide, you can do so by adding the following CSS:
span { font-family: Monotype Corsiva, Helvetica, Arial !important; }
Please note that if you choose a font that is not widely supported, any browsers or email clients that do not support the font will change it to something else, such as Times New Roman. The benefit of using the font family property is that it allows you to list several fonts, and if the first font in the list is not supported, the second will be used and so on. The helps maintain control over the page’s style in the case where your font choice is not widely supported. The !important at the end of the font family attribute indicates that this CSS should override the default font value we already have in place for the web content record.
Change the Background Color
Add the following CSS to set a custom background color:
body { background: rgb(120,173,200); }
In this example, RGB represents the rgb (red, green, blue) color encoding values for the color you want to use. In this color encoding style, each of the three values can be a number from 0 to 255, and each represents how much red, green, and blue is in the color respectively. Rgb(0,0,0) is black, rgb(255,255,255) is white, and every other color, such as the blue in the example, is something in between. You can also use a hexadecimal value for your color or use some generic color names, such as red.
Make the Background Transparent
You can make the background of your form transparent by setting the color as “transparent” instead of a specific rgb or hexadecimal color value.
body { background: transparent; }
In this example, the page the form is embedded on has a parchment texture background image.
Round the Corners of fields
Add the following HTML to round the corners of your fields:
/*--- FIELD INPUT STYLE ---*/
.clickdform input[type='text'],
.clickdform textarea,
.clickdform select { border-radius:9px; }
The greater the number you set for border-radius, the more curved the corners will be.
You can also add the same CSS to make the Submit button rounded too:
/*--- SUBMIT BUTTON STYLE ---*/
#btnSubmit
{ border-radius:9px; }
Add Extra Space between Fields
Add the following CSS to increase the amount of space between fields.
span { padding-top: 20px; }
This CSS is actually adding space above the label on the field, which pushes the fields further apart. If you want more space between the label and the field, you can use the property padding-bottom instead or padding-top.
Change the Properties of the Required Field Indicator
By default, whenever a field is set as required in a web content editor, a red asterisk will be added to the end of the label to indicate that the field is required. If you want to modify the color of the asterisk or change how close it is to the label text, you can do so by adding the following CSS:
.requiredStar { color: rgb(0,0,255) !important; padding-left: 10px !important; }
In this example, the color of the star was changed from red to blue, and 10px of extra padding were added between the label text and the asterisk.
Change the Properties of the Required Field Error Message
Whenever a field is set to be required in the web content editor, an error message will display below the field if the person tries to submit the record without providing a response in the required field. By default, the error message text is red and the text is “This field is required. Please enter a value.” The text of the message can be updated within the field properties, but if you want to modify the font color, size, or type, you can do so by adding the following CSS:
.requiredInfo div { font-size: 16px; color: rgb(0,0,255); font-family: Chiller, Georgia; }
In this example, the error message font size is being set to 16 pixels, the color is being changed to blue, and the font type is being changed to Chiller (or Georgia as a backup if the person’s browser does not support Chiller).
Change the Properties of the Form Field Hover State
The hover state refers to the properties of the form field when you mouse over it. Modifying the hover properties can be useful because it easily allows you to convey to a person that whatever their mouse is over can be interacted with or is something they should pay attention to. In this scenario, two changes are being made when the field is moused over: the background color changes to green and a shadow is added around the field.
.clickdform input[type='text']:hover,
.clickdform textarea:hover,
.clickdform select:hover {background: rgba(0,200,0,0.3); box-shadow: 0px 0px 12px rgba(0,200,0,0.8); }
You may notice that the background property in this example is different from what was used in previous examples. Previously, only rgb was used to define the color. The represents the amount of red, green, and blue used to generate the color (each value on a scale of 0 to 255). In this example, rgba represents the same thing, except the “a” value represents the opacity of the color, where values closer to 0 are more transparent and values close to 1 are more opaque. For the box-shadow property, there are four parameters. The first two, which are set to 0 in this example, control the position of the shadow. Giving the first parameter a negative value moves the shadow to the left of the field, and a positive value moves it to the right. Likewise, giving the second parameter a negative value moves the shadow above the field and giving it a positive value moves it below the field. The third parameter controls the spread of the shadow, where a lower value results in a more condensed shadow, and the final parameter controls the color.
Change the Properties of the Form Field Focus State
The focus state refers to the properties of the form field when the field has been clicked on and is actively being edited. Modifying this state can help with readability of the form since it allows the user to easily pinpoint which part of the form is currently being modified. In this example, the field will gain a thicker green border. The background is also being set to “none” to cancel out the background change in the hover state if the user is selecting the field and hovering over it at the same time.
.clickdform input[type='text']:focus,
.clickdform textarea:focus,
.clickdform select:focus { border:2px solid rgb(0,200,0) !important; background: none !important; }
Both of the attributes used here include !important because both border and background attributes had already been specified for the field in their normal state and hover state styling, so the !important indicates that this style should take precedence over those that were already defined. Any of the examples in this post can be combined for use on the same record, and there are many other CSS styling options beyond what is covered here. Take some time to experiment and see what works for you!