ClickDimensions 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 example can be added to your form in the code editor or your survey or subscription page in an HTML component in order to modify your record’s style. In this post we will look at how you can modify required field markers on web content. You can can also edit the error message that displays if a user attempts to submit the record without filling in a required field. For more general styling examples, see this previous post.
When creating a web content record, such as a form, the editable items in the record (form fields, in this example) can be set as required within the field properties. Whenever a field is set as required, you will also be able to choose the text for the error message that displays if the field is not filled out.
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).
As you can see in the screenshot showing the modified error message, both 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!
Happy Marketing!
Written by Rhys Saraceni, Marketing Success Manager
Powered by WPeMatico