search

kjac / FormEditor

A form builder editor for Umbraco 7 - let your editors build forms easily with this free package.
MIT License
99 stars 42 forks source link

Error message styling #127

Closed bobi33 closed 7 years ago

bobi33 commented 7 years ago

Hi again @kjac, I can't seem to figure out the styling of the error messages. I would like the error messages to appears similar to: https://htmlstream.com/preview/unify-v1.9.8/page_contact1.html. If you click the submit button on the aforementioned link, you'll notice the different style of font colour (I'm trying to replicate, but don't know where to locate the styling for error messages).

Also, you'll see that the text boxes light up as well with the similar colour to the error message. How can I customize formeditor to do the same thing?

I'm trying to replicate that form.

kjac commented 7 years ago

You'll have to add your own styling to handle this. Which CSS classes you need greatly depends on what rendering you're using (Sync, Async etc).

The best way to figure out which styles you need to add, is by inspecting a form with validation errors and having a look at the classes that are added for the invalid fields.

Keep in mind that for some renderings, the classes might be added to a container DIV, e.g. <div class="form-group ... has-error ...">.

bobi33 commented 7 years ago

Thanks @kjac! I am using Async (it was the first one I chose haha). I should see the class, and then I'll have to find the corresponding css file, which I'm assuming is somewhere in app_plugins :)

kjac commented 7 years ago

Hi @bobi33,

There's no CSS file for frontend bundled with Form Editor. You need to use your own styling, so you should simply just extend your current site CSS :)

With the Async rendering you'll probably need to style on the ng-* classes that are appended to the input fields by Angular (e.g. ng-invalid).

bobi33 commented 7 years ago

Hi @kjac, I just noticed that the reCAPTCHA error notification does not pop up (using async). I've included the error message in the content section, but it does not show up when a user tries to submit the form without completing the reCAPTCHA...it just won't submit the form without the reCAPTCHA being completed but does not give any errors.

kjac commented 7 years ago

@bobi33 I'm closing this now. The reCAPTCHA issue will be tested in #132 as soon as possible.