Simple css forms how to#

All weвЂ™re going to do with this is change the color of the asterisk. This is how Cognito places the asterisks at the end of required labels. c-label:after This is just like the вЂњ:beforeвЂќ pseudo-element, but it comes at the end of. The вЂњ:beforeвЂќ means something like, вЂњCreate a pseudo-element that doesnвЂ™t really exist at the very beginning of c-validation.вЂќ The pseudo-element can be styled just like a real element, even though it doesnвЂ™t appear anywhere in the HTML. If you donвЂ™t want an arrow like this, then you donвЂ™t need the equivalent in your CSS. c-validation:before This is where the arrow/triangle is going to be. Since this class is only on fields when they have errors, our styles wonвЂ™t appear by default. All styles that we only want to take effect when there is an error will be prefaced with. The order of the class names and how they are separated by a space mean that c-validation is contained by an element that has the class name c-error. c-validation The dot in front of each class name just denotes that c-error and c-validation are class names. These are the selectors weвЂ™re going to be using: 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.

Simple css forms 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.