[Share] Form Error Message CSS

Some CSS code to adjust form block error message style. You can use code to Website Tools > Custom CSS.

#1. Error Message color

/* Error message color */
p.form-field-error {
    background-color: #f1f !important;
    color: #000;
}
p.form-field-error svg path {
    fill: #000 !important;
}

#2. Error text size

/* error text size */
p.form-field-error {
    font-size: 30px;
    letter-spacing: 1px;
}
p.form-field-error svg {
    width: 30px;
    height: 30px;
}

#3. Change Error icon

Replace Pixabay with new icon url.

/* error icon */
p.form-field-error svg {
    display: none;
}
p.form-field-error:before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(https://cdn.pixabay.com/photo/2023/10/18/15/30/statue-8324499_1280.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

#4. Error message font

Replace monospace with your font. You can follow below guide to get exact font-family name

/* Error font */
p.form-field-error {
    font-family: monospace;
}