Red box on form

It appears that your theme defines a CSS class (.error-message) which is the same as the class which Google Forms use. The CSS for your theme is creating the small red box with the yellow background and then Google Forms is picking it up because it is the same name and higher precedence.

So how do you fix it? It isn’t simple because your theme defines all of this CSS:

.error-message::before {
    border-color: transparent #d94729 transparent transparent;
    border-style: inset solid inset none;
    border-width: 6px 6px 6px 0;
    content: "";
    height: 0;
    left: 0;
    margin-left: -8px;
    margin-top: -6px;
    position: absolute;
    top: 50%;
    width: 0;
}
div.error-message {
    color: red;
}
.error-message {
    background: none repeat scroll 0 0 #ffee99 !important;
    box-shadow: 0 0 0 1px #d94729 inset;
    clear: both;
    display: block;
    height: 16px;
    left: 100% !important;
    line-height: 16px;
    margin-left: 2px;
    margin-top: -13px;
    overflow: visible;
    padding: 0.5em;
    position: absolute;
    top: 50%;
    transition: opacity 0.2s linear 0.7s !important;
    white-space: nowrap;
    z-index: 100000;
}

You can override your theme’s CSS for Google Forms by using the Custom CSS feature. Make sure you enable Custom CSS (Dashboard > Settings > Google Forms – make sure the Custom CSS box is checked). Then you would add something like this:

div.ss-form-container .error-message {
    /** All of your custom CSS rules go here and each directive will likely need the !important attribute **/
}

I am not sure where I would begin to essentially “undo” all of the CSS your theme defines for the .error-message class. It would be nice if you could essentially “reset” CSS within the context of the div.ss-form-container DIV but if that can be done, I don’t know how to do it and if you figure it out please share.

I’ll be honest with you, this isn’t an easy problem to solve. The error box you see now is likely the same one you saw with the email field, or at least the source is the same.

Hopefully this will get you going in the right direction.

Had one of the “doh” moments this morning – the solution to your problem is actually fairly simple. The “CSS Prefix” feature when defining a Google Form was added for exactly this reason.

Enable the CSS prefix using a unique string (e.g. “book-lesson-“) and all of the CSS classes in your Google Form will be unique strings and will not conflict with the CSS designed by your theme.

Make sure you’re running v0.77, there was a bug with CSS prefix and suffix in earlier builds but this simple fix should solve your problem.

Just to validate what I posted with the CSS prefix, I opened your page with Firebug and found all of the instances of the “error-message” class within the Google Form. Firebug has the ability to “tweak” HTML (as well as CSS) inline so I changed the five instances of “error-messages” to “x-error-message” and the small yellow box (there were actually five of them stacked on top of each other, one for each question on your form) disappeared.

I am confident the CSS prefix solution will solve your problem. If you have defined Custom CSS for your form then you will need to adjust it to account for the prefix as well.

Marking resolved due to lack of follow up.