In my example, I’m styling four different things: the c-validation container, a triangle/arrow extending from that container, the asterisk next to “Email” that indicates the field is required, and the text field itself. Labels are also contained by the element that will have the c-error class. c-label - This is the container of the field label (which is “Email” in this case).The validation message is contained by the element that will have the c-error class. It isn’t visible until an error has been made. c-validation - This class name is on the container of the error message.In our example, this class will get applied to the parent container after the user tries to submit an invalid email address. c-error - This class name is added to all field containers if that field has an error.Cognito Forms have several class names that allow you to do this very thing. HTML elements can have class names for CSS rules to hook onto. But I’ll write this example in a way that will force our custom rules to be applied no matter where they are. Normally, the order of CSS does matter, with rules that come later on the page tending to override earlier rules. You can put this CSS anywhere on the webpage that hosts the form, either through a reference to an external CSS doc, or by placing the style rules directly on the same page (learn more about the mechanics of these options here). Iframes are like tall fortress walls that keep out things like hoards of CSS lines sometimes that’s great, but not in this case. The CSS we’re writing will only affect the form if it’s seamlessly embedded on the page, and not in an iframe. When you try to submit this form, you’ll notice that the error messages look a little different:Ī few things we need to cover before getting into the styling: No Iframes This is the same form, but with that sprinkling of CSS that I mentioned earlier. So, if someone tries to submit this form without filling out the required fields, they’ll see a bunch of pre-customized error messages with bright red backgrounds: Before Below, I’ve set up a simple form that requires everything except for the Name field. In order to have error messages to style, we need to have errors and in order to have errors, we need rules. This post assumes no knowledge of CSS, but if you are a super thorough type of person, check out my general introduction to CSS.
#Create your own windows error message how to#
CSS is simply a set of text rules that you can write to tell browsers how to style websites. In this post, we’re going to completely customize the look of our form’s error messages with just a sprinkling of CSS.
0 kommentar(er)
